/* ─── Fonts self-hébergées (audit perf 2026-07-17) ─────────────────────────
Archivo + Geist Mono en fontes VARIABLES (tous les poids dans un seul woff2
par style/subset), servies depuis /fonts au lieu de fonts.googleapis.com :
supprime la feuille CSS tierce render-blocking + 2 preconnect par page.
Le ?v=1 force le Cache-Control immutable 1 an du static handler (bump
manuel si un fichier change). Pages legacy (landing/kima : Playfair, IBM
Plex…) toujours sur Google Fonts — hors shell app. */
@font-face {
font-family: 'Archivo';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/archivo-italic-latin-ext.woff2?v=1) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: italic;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/archivo-italic-latin.woff2?v=1) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/archivo-normal-latin-ext.woff2?v=1) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Archivo';
font-style: normal;
font-weight: 400 900;
font-display: swap;
src: url(/fonts/archivo-normal-latin.woff2?v=1) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(/fonts/geist-mono-normal-latin-ext.woff2?v=1) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(/fonts/geist-mono-normal-latin.woff2?v=1) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* ================================================================
SKLEUR — Design System v4.5 « Le Registre »
European Venture Intelligence
Passe premium 2026-07 : surfaces ivoire froid, encre profonde,
typo Archivo, ombres fines. Le rouge Skouer (--rust) reste
l'IDENTITÉ (logo, menu actif, onglets, liens) mais quitte les
boutons et contrôles (encre) ; le négatif sémantique (--negative)
est découplé en rouge signal profond pour ne plus se confondre
avec la marque.
================================================================ */
/* Polices Archivo + Geist Mono : chargées via dans le
de chaque page (fetch en parallèle de cette feuille), plus via @import
ici (qui sérialisait HTML → skouer.css → CSS fonts → fichiers de police). */
/* ────────────────────────────────────────────────────────────────
1. TOKENS — Light Theme
──────────────────────────────────────────────────────────────── */
:root {
/* Surfaces — ivoire froid (v4.5 : quitte le crème rosé) */
--paper: #f2f1ec;
--paper2: #fdfcfa;
--paper3: #eae8e1;
--surface: #fdfcfa;
/* Surface secondaire (cellules/hover sur fond --surface). Alias de
--paper3 : suit automatiquement le thème (clair/sombre). Utilisé par
tour-de-table, fond, comparables-sortie — était référencé sans être
défini → fonds transparents silencieux. */
--surface-2: var(--paper3);
/* Ink — encre profonde (v4.5 : contraste et hiérarchie) */
--ink: #16130f;
--ink2: #46433c;
--muted: #716c63;
--muted2: #6d675f; /* WCAG AA conservé (≥4.5:1 sur --paper) */
/* Accent — Rust */
--rust: #ea4e4d;
--rust2: #c73837;
--rust-bg: rgba(234, 78, 77, 0.07);
--rust-border: rgba(234, 78, 77, 0.18);
/* Secondary — Teal / Armor */
--teal: #07603b;
--teal2: #0a7849;
--teal-bg: rgba(7, 96, 59, 0.07);
--teal-border: rgba(7, 96, 59, 0.16);
/* Premium — Gold */
--gold: #8e6210;
--gold2: #a87418;
--gold-bg: rgba(142, 98, 16, 0.07);
--gold-border: rgba(142, 98, 16, 0.16);
/* Pastel color-blocks (KPI cards, refonte) */
--c-blush: #f9e7e3; --c-blush-ink: #bd2f2e;
--c-cream: #fbf1d8; --c-cream-ink: #90681a;
--c-sage: #e3eee6; --c-sage-ink: #2f7d52;
--c-sky: #e7eef5; --c-sky-ink: #2f5d86;
--c-lilac: #ece6f2; --c-lilac-ink: #7a4f93;
/* Axes de tags (5 axes) — SOURCE UNIQUE.
Référencée par les règles .adv-tag (ci-dessous) ET par le JS des pages
listing (AXIS_DOT / TAG_PALETTE de list-startups|fonds|tours-de-table)
et startup.html (AXIS_STYLE). Ces valeurs étaient recopiées à la main
dans ≥5 fichiers → dérive silencieuse (badges startups sans bordure).
-{k} = teinte pleine (dot + texte badge) · -bg = fond clair · -br = bordure pastel. */
--axis-sect: #3F7A66; --axis-sect-bg: #F3FAF7; --axis-sect-br: #A7F3D0;
--axis-gtm: #94701F; --axis-gtm-bg: #FCFAF3; --axis-gtm-br: #FDE68A;
--axis-prod: #3C5E97; --axis-prod-bg: #F4F8FD; --axis-prod-br: #BFDBFE;
--axis-tech: #8A4E93; --axis-tech-bg: #FAF4FA; --axis-tech-br: #E8C9EC;
--axis-angle: #A45064; --axis-angle-bg: #FDF5F6; --axis-angle-br: #FECDD3;
/* Semantic — le négatif est DÉCOUPLÉ de la marque (v4.5) :
rouge signal profond pour procédures/pertes, distinct du --rust
identitaire. Ne pas re-aliaser sur --rust. */
--positive: #158a40;
--positive-bg: rgba(21, 138, 64, 0.07);
--negative: #b02e27;
--negative-bg: rgba(176, 46, 39, 0.07);
--negative-border: rgba(176, 46, 39, 0.20);
--warning: #b05200;
--warning-bg: rgba(176, 82, 0, 0.07);
--warning-border: rgba(176, 82, 0, 0.16);
--info: var(--teal);
--info-bg: var(--teal-bg);
/* Borders — hairlines encre (v4.5) */
--border: rgba(22, 19, 15, 0.09);
--border2: rgba(22, 19, 15, 0.16);
/* Typography — Archivo (v4.5 : grotesque tendue, remplace Poppins) */
--font-display: 'Archivo', 'Poppins', system-ui, sans-serif;
--font-ui: 'Archivo', 'Poppins', system-ui, sans-serif;
--font-mono: 'Geist Mono', 'JetBrains Mono', ui-monospace, monospace;
/* Radius — un cran plus net sur les surfaces data (v4.5) */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 7px;
--radius-lg: 10px;
--radius-xl: 13px;
--radius-2xl: 17px;
--radius-pill: 999px;
/* Shadows — fines, multicouches (v4.5) */
--shadow-xs: 0 1px 2px rgba(22,19,15,0.04);
--shadow-sm: 0 1px 2px rgba(22,19,15,0.04), 0 6px 18px -10px rgba(22,19,15,0.10);
--shadow-md: 0 2px 4px rgba(22,19,15,0.05), 0 14px 34px -20px rgba(22,19,15,0.22);
--shadow-lg: 0 2px 8px rgba(22,19,15,0.06), 0 18px 46px -18px rgba(22,19,15,0.28);
--shadow-inset: inset 0 1px 0 rgba(255,255,255,0.7);
/* Glow / ambient — discret (v4.5 : encore atténué) */
--glow-rust: rgba(234, 78, 77, 0.06);
--glow-teal: rgba(7, 96, 59, 0.04);
--glow-gold: rgba(142, 98, 16, 0.06);
/* Gradients */
--gradient-rust: linear-gradient(135deg, var(--rust) 0%, #f07040 100%);
--gradient-teal: linear-gradient(135deg, var(--teal) 0%, #0db870 100%);
--gradient-gold: linear-gradient(135deg, var(--gold) 0%, #d4a030 100%);
--gradient-hero: linear-gradient(160deg, #0a0c10 0%, #15080e 50%, #080f14 100%);
/* Transitions */
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in: cubic-bezier(0.4, 0, 1, 1);
--t-fast: 0.12s;
--t-base: 0.2s;
--t-slow: 0.35s;
}
/* ────────────────────────────────────────────────────────────────
2. TOKENS — Dark Theme
──────────────────────────────────────────────────────────────── */
[data-theme="dark"] {
/* v4.5 : graphite froid (instrument), quitte le brun chaud */
--paper: #121317;
--paper2: #1a1c21;
--paper3: #23262d;
--surface: #0f1013;
--ink: #eeede9;
--ink2: #c9c7bf;
--muted: #a19e95;
--muted2: #8e8b82; /* WCAG AA conservé sur --paper dark */
--rust: #f36a63;
--rust2: #f68b85;
--rust-bg: rgba(243, 106, 99, 0.11);
--rust-border: rgba(243, 106, 99, 0.24);
--teal: #30c070;
--teal2: #44d480;
--teal-bg: rgba(48, 192, 112, 0.10);
--teal-border: rgba(48, 192, 112, 0.22);
--gold: #cc9828;
--gold2: #e0aa38;
--gold-bg: rgba(204, 152, 40, 0.10);
--gold-border: rgba(204, 152, 40, 0.22);
/* Pastel color-blocks (dark) */
--c-blush: #341f1d; --c-blush-ink: #ff8e8a;
--c-cream: #2c2517; --c-cream-ink: #e0b24e;
--c-sage: #1c2a21; --c-sage-ink: #6fcf97;
--c-sky: #1b2632; --c-sky-ink: #7fb0dc;
--c-lilac: #282031; --c-lilac-ink: #b89ad0;
--positive: #30c070;
--positive-bg: rgba(48, 192, 112, 0.10);
--negative: #e2685e;
--negative-bg: rgba(226, 104, 94, 0.12);
--negative-border: rgba(226, 104, 94, 0.26);
--warning: #e89020;
--warning-bg: rgba(232, 144, 32, 0.10);
--warning-border: rgba(232, 144, 32, 0.22);
--border: rgba(238, 237, 233, 0.08);
--border2: rgba(238, 237, 233, 0.15);
--shadow-xs: 0 1px 2px rgba(0,0,0,0.25);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.32), 0 1px 8px rgba(0,0,0,0.24);
--shadow-md: 0 4px 16px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.24);
--shadow-lg: 0 12px 40px rgba(0,0,0,0.55), 0 2px 8px rgba(0,0,0,0.30);
--shadow-inset: inset 0 1px 0 rgba(255,255,255,0.04);
--glow-rust: rgba(243, 106, 99, 0.12);
--glow-teal: rgba(48, 192, 112, 0.14);
--glow-gold: rgba(204, 152, 40, 0.14);
}
/* ────────────────────────────────────────────────────────────────
3. RESET + BODY
──────────────────────────────────────────────────────────────── */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
/* Réserve toujours la gouttière du scrollbar : sinon les onglets/filtres dont
le contenu tient sans défilement masquent la scrollbar et tout le contenu
se décale horizontalement de ~10px (saut visible sur les onglets de fiche
fond, les listes filtrées, etc.). */
overflow-y: scroll;
}
body {
background: var(--paper);
background-image:
radial-gradient(ellipse 40% 30% at 96% 1%, var(--glow-rust), transparent 70%);
background-attachment: fixed;
color: var(--ink);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-x: hidden;
zoom: 0.88; /* densité globale "dézoomée" (refonte) */
/* Sticky footer : la page remplit toujours la hauteur d'écran pour que
le footer reste collé en bas même quand le contenu est court.
Le /0.88 compense le zoom global (sinon 100vh ne couvre que 88% de l'écran). */
display: flex;
flex-direction: column;
min-height: calc(100vh / 0.88);
}
/* Grain texture overlay */
body::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
opacity: 0.022;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat: repeat;
background-size: 128px;
pointer-events: none;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
h1, h2, h3, h4, p { margin: 0; }
img { display: block; max-width: 100%; }
/* Scrollbar */
* { scrollbar-width: thin; scrollbar-color: var(--muted2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: var(--muted2);
border-radius: var(--radius-pill);
border: 3px solid transparent;
background-clip: padding-box;
transition: background-color .15s;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* Selection */
::selection {
background: var(--rust);
color: #fff;
}
/* Focus — anneau neutre à l'encre (v4.5 : le rouge ne marque plus
l'interaction, il resterait ambigu avec l'alarme) */
:focus-visible {
outline: 2px solid var(--ink2);
outline-offset: 3px;
border-radius: var(--radius-xs);
}
/* Lien d'évitement : premier élément focusable (dans #nav-shell), invisible
hors focus. La cible est résolue par nav-loader.js (#main-content, sinon
premier bloc de contenu après la nav). */
.skip-link {
position: absolute;
left: -9999px;
top: 12px;
z-index: 2000;
padding: 10px 16px;
background: var(--paper);
color: var(--ink);
border: 1px solid var(--border);
border-radius: var(--radius-xs);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.skip-link:focus { left: 12px; }
/* Contenu réservé aux lecteurs d'écran (ex. annonce de navigation Turbo). */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}
/* ────────────────────────────────────────────────────────────────
4. TYPOGRAPHY
──────────────────────────────────────────────────────────────── */
h1, .h1 {
font-family: var(--font-display);
font-weight: 600;
font-size: 20px;
line-height: 1.15;
letter-spacing: -0.04em;
color: var(--ink);
}
h2, .h2 {
font-family: var(--font-display);
font-weight: 600;
font-size: 18px;
line-height: 1.25;
letter-spacing: -0.045em;
}
h3, .h3 {
font-family: var(--font-ui);
font-weight: 600;
font-size: 14px;
letter-spacing: -0.025em;
}
.section-title {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--font-display);
font-size: 15px;
font-weight: 700;
color: var(--ink);
text-transform: none;
letter-spacing: -0.01em;
margin-bottom: 14px;
background: none;
border: none;
padding: 0;
}
.section-title::before {
content: '';
width: 9px;
height: 9px;
border-radius: 50%;
background: var(--rust);
flex-shrink: 0;
}
/* Picto en tête de section (remplace la pastille là où il est présent) */
.section-title .sec-ico { width: 18px; height: 18px; color: var(--rust); flex-shrink: 0; }
.section-title:has(.sec-ico)::before { display: none; }
.mono { font-family: var(--font-mono); }
.text-muted { color: var(--muted); }
.text-rust { color: var(--rust); }
.text-teal { color: var(--teal); }
.text-gold { color: var(--gold); }
.text-positive { color: var(--positive); }
.text-warning { color: var(--warning); }
/* ────────────────────────────────────────────────────────────────
5. LAYOUT
──────────────────────────────────────────────────────────────── */
.container {
width: 100%; /* body est flex-column : sans width:100%, un enfant
centré (margin:0 auto) se rétracte à la largeur de
son contenu → bloc étroit qui « grandit » au chargement
(état Chargement… → contenu). */
max-width: 1400px;
margin: 0 auto;
padding: 24px 32px;
}
.dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.dash-3col { display: grid; grid-template-columns: 3fr 1.5fr 1.5fr; gap: 16px; margin-bottom: 16px; }
/* ────────────────────────────────────────────────────────────────
6. NAVIGATION
──────────────────────────────────────────────────────────────── */
.nav {
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--paper2) 86%, transparent);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
position: sticky;
top: 0;
z-index: 100;
transition: background var(--t-base), border-color var(--t-base);
}
[data-theme="dark"] .nav {
background: color-mix(in srgb, var(--paper2) 80%, transparent);
border-bottom: 1px solid var(--border);
}
/* Wordmark — équerre + skouer · Archivo 700 (v4.5 : Archivo est plus
fine que Poppins à graisse égale, on compense d'un cran ; l'équerre
SVG et le rouge --rust sont inchangés) */
.nav-logo {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--font-display);
font-weight: 700;
font-size: 20px;
letter-spacing: -0.05em;
color: var(--rust);
text-transform: none;
background: none;
-webkit-text-fill-color: unset;
text-decoration: none;
line-height: 1;
transition: opacity var(--t-base);
}
.nav-logo:hover { opacity: 0.75; }
[data-theme="dark"] .nav-logo { color: var(--rust); }
.nav-tabs { display: flex; gap: 2px; }
.nav-tab {
position: relative;
padding: 6px 14px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
color: var(--muted);
text-decoration: none;
border-radius: var(--radius-md);
transition: color var(--t-base), background var(--t-base), transform var(--t-fast);
}
.nav-tab:hover {
color: var(--ink);
background: var(--paper3);
transform: translateY(-1px);
}
.nav-tab.active {
color: #fff;
background: var(--rust);
font-weight: 600;
}
.nav-tab.active:hover {
color: #fff;
background: var(--rust2);
transform: none;
}
.nav-right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
}
.nav-search svg { width: 15px; height: 15px; color: color-mix(in srgb, var(--muted2) 70%, transparent); flex-shrink: 0; }
.theme-toggle svg { width: 16px; height: 16px; }
.nav-search {
position: relative;
display: flex;
align-items: center;
gap: 8px;
background: var(--paper);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: 7px 12px;
transition: border-color var(--t-base), box-shadow var(--t-base), background var(--t-base);
}
.nav-search:hover {
border-color: var(--border2);
background: var(--paper2);
}
.nav-search:focus-within {
border-color: var(--ink2);
box-shadow: 0 0 0 3px var(--border);
background: var(--paper2);
}
.nav-search input {
background: none;
border: none;
outline: none;
color: var(--ink);
font-family: var(--font-ui);
font-size: 13px;
width: 200px;
}
.nav-search input::placeholder { color: color-mix(in srgb, var(--muted2) 70%, transparent); }
.nav-search span { color: var(--muted2); font-size: 12px; }
/* ────────────────────────────────────────────────────────────────
7. THEME TOGGLE
──────────────────────────────────────────────────────────────── */
.theme-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--paper);
color: var(--muted);
cursor: pointer;
font-size: 15px;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.theme-toggle:hover {
color: var(--ink);
background: var(--paper2);
border-color: var(--border2);
transform: scale(1.04);
}
@keyframes menuFadeIn {
from { opacity: 0; transform: translateY(-6px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ────────────────────────────────────────────────────────────────
7b. NAVIGATION LATÉRALE (app) — sidebar gauche + topbar recherche
Activée uniquement quand le loader pose `body.has-sidebar`
(les pages landing/auth gardent l'ancienne nav top intacte).
──────────────────────────────────────────────────────────────── */
:root { --sidebar-w: 234px; }
body.has-sidebar { padding-left: var(--sidebar-w); }
.side-nav {
position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar-w);
display: flex; flex-direction: column; gap: 3px;
padding: 16px 14px 14px;
overflow-y: auto; overflow-x: hidden;
border-right: 1px solid var(--border);
background: color-mix(in srgb, var(--paper2) 92%, transparent);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
z-index: 200;
transition: transform 0.25s var(--ease-out);
}
[data-theme="dark"] .side-nav { background: color-mix(in srgb, var(--paper2) 88%, transparent); }
.side-nav .nav-logo { padding: 4px 10px 16px; font-size: 21px; }
.side-collapse {
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 36px; height: 36px; padding: 0; cursor: pointer;
border: 1px solid var(--border); border-radius: var(--radius-md);
background: var(--paper); color: var(--muted);
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.side-collapse:hover { background: var(--paper3); color: var(--ink); }
.side-collapse svg { width: 16px; height: 16px; transition: transform 0.25s var(--ease-out); }
.side-tabs { display: flex; flex-direction: column; gap: 3px; }
.side-tab {
display: flex; align-items: center; gap: 11px;
padding: 9px 12px; border-radius: var(--radius-md);
font-family: var(--font-ui); font-size: 13.5px; font-weight: 500;
color: var(--muted); text-decoration: none;
transition: color var(--t-base), background var(--t-base);
}
.side-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.side-tab:hover { color: var(--ink); background: var(--paper3); }
.side-tab.active { color: #fff; background: var(--rust); font-weight: 600; }
.side-group {
font-family: var(--font-mono); font-size: 10px; text-transform: uppercase;
letter-spacing: 0.1em; color: var(--muted2); padding: 18px 12px 7px;
}
/* Barre du haut : recherche + compte (la cloche notif s'insère dans .nav-right) */
.topbar {
position: sticky; top: 0; z-index: 100;
display: flex; align-items: center; gap: 14px;
/* La barre garde son fond/bordure pleine largeur, mais son contenu s'aligne
sur les bords du contenu des `.container` (max-width 1400, centré, padding
32) → mêmes marges latérales que les blocs du site. */
height: 58px; padding: 0 max(32px, calc((100% - 1400px) / 2 + 32px));
border-bottom: 1px solid var(--border);
background: color-mix(in srgb, var(--paper) 86%, transparent);
backdrop-filter: saturate(150%) blur(14px);
-webkit-backdrop-filter: saturate(150%) blur(14px);
}
.topbar .nav-search { display: flex; flex: 0 1 380px; min-width: 0; }
.topbar .nav-search input { width: 100%; }
/* Logo dans la topbar : caché sur desktop (la sidebar porte déjà le logo),
affiché en mobile quand la sidebar est off-canvas. */
.topbar-logo { display: none; }
/* Groupe droit de la topbar : indicateur live + notifications (cloche) */
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
/* Le logo (mobile) et le groupe droit gardent leur taille ; seule la
recherche se comprime. Sinon le flex écrase hamburger/cloche → notifs
illisibles et bouton burger rectangulaire. */
.topbar .topbar-logo { flex-shrink: 0; }
.topbar-right .nav-right:empty { display: none; }
/* Indicateur « En direct » dans la topbar (global, toutes pages) */
.topbar-live {
display: inline-flex; align-items: center; gap: 7px;
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
color: var(--muted); background: var(--paper3);
border: 0.5px solid var(--border);
padding: 5px 13px; border-radius: var(--radius-pill); white-space: nowrap;
}
/* ────────────────────────────────────────────────────────────────
7c. MENU COMPTE — avatar à initiales (topbar) regroupant l'ex
rubrique « Mon espace » + Portefeuille, thème et déconnexion
──────────────────────────────────────────────────────────────── */
.user-menu-wrap { position: relative; }
.user-avatar {
display: flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
border: 1px solid var(--border); background: var(--paper3); color: var(--muted);
font-family: var(--font-ui); font-size: 12px; font-weight: 700; letter-spacing: 0.03em;
cursor: pointer;
transition: background var(--t-base), color var(--t-base), border-color var(--t-base), transform var(--t-fast);
}
.user-avatar:hover { color: var(--rust); border-color: var(--rust); transform: scale(1.04); }
.user-avatar svg { width: 16px; height: 16px; }
.user-avatar svg[hidden], .user-avatar-initials[hidden] { display: none; }
/* Ancré au pied de la sidebar, ouvert vers le haut. `fixed` (pas absolute) :
la sidebar a overflow-y:auto, un enfant positionné y serait rogné. */
.user-menu {
position: fixed; bottom: 60px; left: 10px; width: 232px;
background: var(--paper); border: 0.5px solid var(--border);
border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,.12);
z-index: 210; padding: 6px; overflow: hidden;
animation: menuFadeUp 0.12s var(--ease-out);
}
@keyframes menuFadeUp {
from { opacity: 0; transform: translateY(6px) scale(0.97); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.user-menu[hidden] { display: none; }
.user-menu-head {
display: flex; flex-direction: column; gap: 2px;
padding: 8px 10px 10px; margin-bottom: 6px;
border-bottom: 0.5px solid var(--border);
}
.user-menu-title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink); }
.user-menu-email {
font-family: var(--font-ui); font-size: 11px; color: var(--muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-menu-email:empty { display: none; }
.user-menu-item {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 8px 10px; border: none; border-radius: var(--radius-md);
background: none; text-align: left; cursor: pointer;
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
color: var(--muted); text-decoration: none;
transition: color var(--t-base), background var(--t-base);
}
.user-menu-item:hover { color: var(--ink); background: var(--paper3); }
.user-menu-item svg, .user-menu-item .theme-ico svg { width: 16px; height: 16px; flex-shrink: 0; }
.user-menu-item .theme-ico { display: flex; align-items: center; flex-shrink: 0; }
.user-menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }
.user-menu-logout { color: var(--rust); }
.user-menu-logout:hover { color: var(--rust); background: var(--rust-bg); }
/* Pied de sidebar : avatar compte (menu « Mon espace », cf. 7c) + repli */
.side-foot {
margin-top: auto; padding-top: 12px; border-top: 0.5px solid var(--border);
display: flex; flex-direction: column; gap: 8px;
}
.side-foot-tools { display: flex; gap: 8px; }
.side-foot-tools .side-collapse { flex: 1; }
/* État replié (desktop) : sidebar réduite aux icônes seules.
Piloté par `body.sidebar-collapsed` (persisté en localStorage par le loader).
Pas d'effet en mobile (< 980px) où la sidebar est un drawer off-canvas. */
@media (min-width: 981px) {
body.sidebar-collapsed { --sidebar-w: 66px; }
body.sidebar-collapsed .side-nav { padding-left: 12px; padding-right: 12px; }
body.sidebar-collapsed .nav-logo-text,
body.sidebar-collapsed .side-tab .lbl { display: none; }
/* Le logo (équerre) reste centré */
body.sidebar-collapsed .side-nav .nav-logo { padding: 4px 0 16px; justify-content: center; }
body.sidebar-collapsed .side-tab { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
body.sidebar-collapsed .side-collapse svg { transform: rotate(180deg); }
/* Les intertitres deviennent un simple filet de séparation */
body.sidebar-collapsed .side-group {
font-size: 0; padding: 0; margin: 9px 8px;
height: 1px; background: var(--border); overflow: hidden;
}
body.sidebar-collapsed .side-foot-tools { flex-direction: column; align-items: center; }
body.sidebar-collapsed .side-foot-tools .side-collapse { flex: none; width: 100%; }
}
/* Le bouton de repli n'a de sens que sur desktop (drawer en mobile) : seul
l'avatar compte reste dans le pied du drawer. */
@media (max-width: 980px) {
.side-collapse { display: none; }
}
/* Backdrop du drawer mobile */
.sidenav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.42); z-index: 150; }
body.sidebar-open .sidenav-backdrop { display: block; }
/* Animation hamburger → croix quand la sidebar est ouverte (mobile) */
body.sidebar-open .nav-hamburger-icon span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.sidebar-open .nav-hamburger-icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.sidebar-open .nav-hamburger-icon span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); width: 18px; }
/* Tablette / mobile : la sidebar devient un drawer off-canvas */
@media (max-width: 980px) {
body.has-sidebar { padding-left: 0; }
.side-nav { transform: translateX(-100%); width: 280px; box-shadow: var(--shadow-lg); }
body.sidebar-open .side-nav { transform: none; }
.topbar .nav-hamburger { display: flex; }
.topbar-logo { display: inline-flex; }
}
/* Sur très petit écran, on garde l'équerre seule pour économiser la place */
@media (max-width: 480px) {
.topbar-logo-text { display: none; }
}
@media (min-width: 981px) {
.sidenav-backdrop { display: none !important; }}
@media (max-width: 600px) {
.topbar-live { display: none; }}
/* ────────────────────────────────────────────────────────────────
8. CARDS
──────────────────────────────────────────────────────────────── */
.card {
position: relative;
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 22px;
box-shadow: var(--shadow-sm);
transition: box-shadow var(--t-base), border-color var(--t-base), transform var(--t-base);
animation: cardFadeUp var(--t-slow) var(--ease-out) both;
overflow: hidden;
min-width: 0;
}
.card:hover {
box-shadow: var(--shadow-md);
border-color: var(--border2);
transform: translateY(-2px);
}
[data-theme="dark"] .card {
background: var(--paper2);
border: 1px solid var(--border);
box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .card:hover {
border-color: var(--border2);
box-shadow: var(--shadow-md);
}
.card-sm {
position: relative;
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: 14px;
box-shadow: var(--shadow-xs);
transition: box-shadow var(--t-base), border-color var(--t-base);
}
/* Entrée des cartes : opacité + translation verticale UNIQUEMENT.
Pas de scale() : la mise à l'échelle rétrécit la carte depuis son centre et
rentre ses bords à l'intérieur du header (qui n'anime pas) → décalage
horizontal des blocs. L'anim se rejoue à chaque passage display:none→block
(switch d'onglet) ; si elle est interrompue/throttlée elle reste figée sur
l'image `from` (fill-mode both) → bloc décalé jusqu'au reload. Sans scale(),
une entrée coincée ne peut plus produire de désalignement horizontal. */
@keyframes cardFadeUp {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* ────────────────────────────────────────────────────────────────
9. TICKER
──────────────────────────────────────────────────────────────── */
.ticker {
background: linear-gradient(90deg,
rgba(7,96,59,0.04) 0%,
var(--paper2) 20%,
var(--paper2) 80%,
rgba(217,26,46,0.04) 100%);
border-bottom: 1px solid var(--border);
padding: 10px 32px;
display: flex;
gap: 32px;
overflow-x: auto;
white-space: nowrap;
}
.ticker::-webkit-scrollbar { height: 0; }
.t-up { color: var(--positive); }
.t-down { color: var(--negative); }
/* ────────────────────────────────────────────────────────────────
10. PAGE TITLE
──────────────────────────────────────────────────────────────── */
.page-title {
position: relative;
margin-bottom: 20px;
padding-bottom: 16px;
}
.page-title h1 {
font-family: var(--font-display);
font-size: clamp(24px, 3vw, 30px);
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.15;
color: var(--ink);
}
.page-title p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.page-title::after {
content: '';
position: absolute;
bottom: 0; left: 0;
width: 36px; height: 3px;
background: var(--gradient-rust);
border-radius: 2px;
}
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 20px;
}
/* Live dot */
.live-dot {
display: inline-block;
width: 7px;
height: 7px;
background: var(--positive);
border-radius: 50%;
margin-right: 5px;
animation: livePulse 2.2s ease-in-out infinite;
}
@keyframes livePulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(21,138,64,0.5); opacity: 1; }
50% { box-shadow: 0 0 0 6px rgba(21,138,64,0); opacity: 0.8; }
}
.dash-hero .eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 12px; font-weight: 600;
background: rgba(255,255,255,0.16);
padding: 5px 13px; border-radius: var(--radius-pill);
margin-bottom: 16px; position: relative; z-index: 1;
}
.dash-hero .eyebrow .live-dot { background: #fff; animation: heroLive 1.8s ease-in-out infinite; }
@keyframes heroLive {
0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0.65); opacity: 1; }
70% { box-shadow: 0 0 0 6px rgba(255,255,255,0); opacity: 0.5; }
}
.dash-hero .hero-stats {
display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px;
position: relative; z-index: 1;
}
.dash-hero .hstat .v { font-family: var(--font-mono); font-weight: 600; font-size: 15px; letter-spacing: -0.02em; color: #fff; }
.dash-hero .hstat .l { font-size: 12px; color: rgba(255,255,255,0.85); }
/* ────────────────────────────────────────────────────────────────
11. KPI CARDS
──────────────────────────────────────────────────────────────── */
.kpi-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
margin-bottom: 20px;
}
/* v4.5 « registre » : cellules neutres (surface + hairline), la couleur
ne survit que sur le picto — les pastels pleins sont retirés, le chiffre
redevient le protagoniste. Les tokens --c-* restent définis (pages inline). */
.kpi-card {
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 18px 18px 20px;
position: relative;
overflow: hidden;
transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
animation: cardFadeUp var(--t-slow) var(--ease-out) both;
background: var(--paper2);
color: var(--c-sage-ink);
box-shadow: var(--shadow-xs);
}
/* La rotation de teinte ne colore plus que le picto (via color:) */
.kpi-card:nth-child(5n+1) { animation-delay: 0.04s; color: var(--c-sage-ink); }
.kpi-card:nth-child(5n+2) { animation-delay: 0.08s; color: var(--c-cream-ink); }
.kpi-card:nth-child(5n+3) { animation-delay: 0.12s; color: var(--c-sky-ink); }
.kpi-card:nth-child(5n+4) { animation-delay: 0.16s; color: var(--c-blush-ink); }
.kpi-card:nth-child(5n+5) { animation-delay: 0.20s; color: var(--c-lilac-ink); }
.kpi-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border2); }
/* Picto discret en haut à droite de chaque tuile (refonte) */
.kpi-icon { position: absolute; right: 16px; top: 15px; width: 22px; height: 22px; opacity: 0.55; color: inherit; pointer-events: none; }
.kpi-icon svg { width: 100%; height: 100%; }
.kpi-label {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--muted);
margin-bottom: 10px;
font-weight: 500;
}
.kpi-val {
font-family: var(--font-display);
font-size: 30px;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
color: var(--ink);
font-variant-numeric: tabular-nums;
}
.kpi-delta { font-size: 12px; margin-top: 7px; display: flex; align-items: center; gap: 3px; font-weight: 500; color: var(--muted); }
.kpi-delta--up { color: var(--positive); }
.kpi-delta--down { color: var(--negative); }
.kpi-delta--flat { color: var(--muted); }
/* ────────────────────────────────────────────────────────────────
12. ALERTS
──────────────────────────────────────────────────────────────── */
.alert-strip {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.alert-chip {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 15px;
font-size: 13px;
font-weight: 600;
font-family: var(--font-ui);
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: var(--paper2);
box-shadow: var(--shadow-sm);
cursor: pointer;
transition: box-shadow var(--t-base), transform var(--t-fast);
}
.alert-chip::before {
content: '';
width: 8px; height: 8px;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.alert-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.alert-chip--danger { color: var(--negative); }
.alert-chip--warning { color: var(--warning); }
.alert-chip--success { color: var(--positive); }
.alert-chip--info { color: var(--teal); }
/* ────────────────────────────────────────────────────────────────
13. FLUX (Activity Feed)
──────────────────────────────────────────────────────────────── */
.flux-item {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 10px 0;
margin: 0;
min-width: 0;
border-bottom: 0.5px solid var(--border);
border-radius: var(--radius-md);
border-left: 2px solid transparent;
transition: background var(--t-base), border-left-color var(--t-base), padding-left var(--t-base);
}
.flux-item:last-child { border-bottom: none; }
.flux-item:hover {
background: linear-gradient(90deg, var(--paper3), transparent);
border-left-color: var(--teal);
padding-left: 14px;
}
.flux-time {
font-family: var(--font-mono);
font-size: 10px;
color: var(--muted);
white-space: nowrap;
margin-top: 2px;
}
.flux-content { flex: 1; min-width: 0; overflow: hidden; }
.flux-title { font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 2px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; }
.flux-sub { font-size: 12px; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; width: 100%; }
.flux-badge {
display: inline-block;
padding: 2px 8px;
font-size: 10px;
font-family: var(--font-mono);
margin-left: 6px;
border: 0.5px solid;
border-radius: var(--radius-pill);
}
.flux-badge--positive { background: var(--positive-bg); border-color: rgba(21,138,64,0.15); color: var(--positive); }
.flux-badge--danger { background: var(--negative-bg); border-color: var(--negative-border); color: var(--negative); }
.flux-badge--info { background: var(--teal-bg); border-color: var(--teal-border); color: var(--teal); }
.flux-badge--gold { background: var(--gold-bg); border-color: var(--gold-border); color: var(--gold); }
.flux-badge--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
/* ────────────────────────────────────────────────────────────────
14. TOP LIST
──────────────────────────────────────────────────────────────── */
.top-item {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 0.5px solid var(--border);
cursor: pointer;
transition: padding-left var(--t-base);
}
.top-item:last-child { border-bottom: none; }
.top-item:hover { padding-left: 4px; }
.top-rank { font-family: var(--font-mono); font-size: 11px; color: var(--muted); width: 18px; flex-shrink: 0; }
.top-icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; border: 0.5px solid var(--border); border-radius: var(--radius-md); background: var(--paper3); }
.top-name { flex: 1; font-size: 13px; color: var(--ink); font-weight: 500; }
.top-score { font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.top-delta { font-size: 10px; margin-left: 4px; }
/* ────────────────────────────────────────────────────────────────
15. FOND MINI CARDS
──────────────────────────────────────────────────────────────── */
.fond-mini {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 0;
border-bottom: 0.5px solid var(--border);
cursor: pointer;
transition: padding-left var(--t-base);
}
.fond-mini:last-child { border-bottom: none; }
.fond-mini:hover { padding-left: 4px; }
.fond-logo-sm {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
border: 0.5px solid var(--border);
border-radius: var(--radius-md);
background: var(--paper3);
}
.fond-nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.fond-stats { margin-left: auto; text-align: right; }
.fond-aum { font-family: var(--font-mono); font-size: 12px; color: var(--ink); }
.fond-perf { font-size: 11px; }
/* ────────────────────────────────────────────────────────────────
16. DATA TABLE
──────────────────────────────────────────────────────────────── */
.data-table { width: 100%; border-collapse: collapse; }
.data-table th {
font-family: var(--font-ui);
font-size: 11px;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 500;
padding: 9px 12px;
text-align: left;
border-bottom: 1px solid var(--border2);
}
.data-table td {
padding: 11px 12px;
border-bottom: 0.5px solid var(--border);
font-size: 13px;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--paper3); }
/* ────────────────────────────────────────────────────────────────
17. TAGS
──────────────────────────────────────────────────────────────── */
.tag {
display: inline-block;
padding: 3px 10px;
font-size: 11px;
font-weight: 500;
font-family: var(--font-ui);
border: 0.5px solid;
border-radius: var(--radius-pill);
transition: transform var(--t-fast), box-shadow var(--t-fast);
}
.tag:hover { transform: scale(1.04); }
.tag--positive { background: var(--positive-bg); border-color: rgba(21,138,64,0.2); color: var(--positive); }
.tag--danger { background: var(--negative-bg); border-color: var(--negative-border); color: var(--negative); }
.tag--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.tag--teal { background: var(--teal-bg); border-color: var(--teal-border); color: var(--teal); }
.tag--gold { background: var(--gold-bg); border-color: var(--gold-border); color: var(--gold); }
/* ────────────────────────────────────────────────────────────────
18. BUTTONS
──────────────────────────────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 18px;
font-family: var(--font-ui);
font-size: 13px;
font-weight: 600;
border: 1px solid;
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out),
box-shadow var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-out),
border-color var(--t-base) var(--ease-out);
letter-spacing: -0.025em;
}
.btn:active { transform: scale(0.98); }
/* v4.5 : le bouton primaire passe à l'encre — le rouge reste au logo,
au menu et au signal, jamais sur un bouton. */
.btn--primary {
background: var(--ink);
border-color: var(--ink);
color: var(--paper2);
box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255,255,255,0.08);
}
.btn--primary:hover {
background: var(--ink2);
border-color: var(--ink2);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
.btn--secondary {
background: transparent;
border-color: var(--border2);
color: var(--ink);
}
.btn--secondary:hover {
background: var(--paper3);
border-color: var(--border2);
transform: translateY(-1px);
}
.btn--teal {
background: var(--teal);
border-color: var(--teal);
color: #fff;
box-shadow: 0 1px 3px rgba(7,96,59,0.25), inset 0 1px 0 rgba(255,255,255,0.12);
}
.btn--teal:hover {
background: var(--teal2);
box-shadow: 0 4px 14px rgba(7,96,59,0.35);
transform: translateY(-1px);
}
/* ────────────────────────────────────────────────────────────────
19. PROGRESS BARS
──────────────────────────────────────────────────────────────── */
.bar-track {
height: 5px;
background: var(--paper3);
border-radius: var(--radius-pill);
overflow: hidden;
}
.bar-fill {
height: 100%;
border-radius: var(--radius-pill);
}
@keyframes growbar { from { width: 0; } }
/* ────────────────────────────────────────────────────────────────
20. SEARCH
──────────────────────────────────────────────────────────────── */
.search-big {
display: flex;
align-items: center;
gap: 10px;
background: var(--paper2);
border: 1px solid var(--border2);
border-radius: var(--radius-xl);
padding: 12px 18px;
margin-bottom: 20px;
transition: border-color var(--t-base), box-shadow var(--t-base);
box-shadow: var(--shadow-xs);
}
.search-big:focus-within {
border-color: var(--ink2);
box-shadow: 0 0 0 3px var(--border), var(--shadow-sm);
}
.search-big input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--ink);
font-family: var(--font-ui);
font-size: 14px;
}
.search-big input::placeholder { color: var(--muted2); }
/* ────────────────────────────────────────────────────────────────
21. EMAIL WIDGET
──────────────────────────────────────────────────────────────── */
.email-widget {
background: var(--teal-bg);
border: 1px solid var(--teal-border);
border-radius: var(--radius-xl);
padding: 20px;
}
.email-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.025em; }
.email-sub { font-size: 12px; color: var(--muted); margin-bottom: 16px; }
.email-input { display: flex; gap: 8px; }
.email-input input {
flex: 1;
background: var(--paper2);
border: 1px solid var(--border2);
border-radius: var(--radius-md);
padding: 9px 12px;
color: var(--ink);
font-family: var(--font-ui);
font-size: 13px;
outline: none;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
.email-input input:focus {
border-color: var(--ink2);
box-shadow: 0 0 0 3px var(--border);
}
.email-btn {
padding: 9px 16px;
background: var(--ink);
color: var(--paper2);
border: none;
border-radius: var(--radius-md);
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: var(--font-ui);
transition: background var(--t-base), box-shadow var(--t-base), transform var(--t-fast);
}
.email-btn:hover {
background: var(--ink2);
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* ────────────────────────────────────────────────────────────────
22. CHART HELPERS
──────────────────────────────────────────────────────────────── */
.chart-area { position: relative; }
.chart-svg { width: 100%; overflow: visible; }
.chart-axis { font-family: var(--font-mono); font-size: 9px; fill: var(--muted); }
/* ────────────────────────────────────────────────────────────────
23. SELECTS / FORM ELEMENTS
──────────────────────────────────────────────────────────────── */
.select {
background: var(--paper2);
border: 1px solid var(--border2);
border-radius: var(--radius-md);
color: var(--muted);
font-size: 13px;
padding: 8px 12px;
outline: none;
font-family: var(--font-ui);
appearance: none;
cursor: pointer;
transition: border-color var(--t-base), box-shadow var(--t-base);
}
.select:focus {
border-color: var(--ink2);
box-shadow: 0 0 0 3px var(--border);
color: var(--ink);
}
/* ────────────────────────────────────────────────────────────────
25. PRICING CARDS
──────────────────────────────────────────────────────────────── */
.pricing-item {
padding: 14px;
border: 1px solid;
border-radius: var(--radius-lg);
transition: box-shadow var(--t-base), transform var(--t-base);
}
.pricing-item:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.pricing-item--teal { background: var(--teal-bg); border-color: var(--teal-border); }
.pricing-item--gold { background: var(--gold-bg); border-color: var(--gold-border); }
.pricing-item--warning { background: var(--warning-bg); border-color: var(--warning-border); }
.pricing-name { font-size: 13px; font-weight: 600; margin-bottom: 3px; }
.pricing-desc { font-size: 12px; color: var(--muted); }
/* ────────────────────────────────────────────────────────────────
26. UTILITY HELPERS
──────────────────────────────────────────────────────────────── */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.gap-xs { gap: 4px; }
.gap-sm { gap: 8px; }
.gap-md { gap: 16px; }
.gap-lg { gap: 24px; }
.mb-sm { margin-bottom: 8px; }
.mb-md { margin-bottom: 16px; }
.avatar-sm {
width: 26px;
height: 26px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 600;
border: 0.5px solid var(--border);
border-radius: 50%;
background: var(--paper3);
}
/* ────────────────────────────────────────────────────────────────
28. PAGE HEADERS (Startup, Fond)
──────────────────────────────────────────────────────────────── */
.entity-header {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 24px;
align-items: start;
padding: 28px 32px;
background: var(--paper2);
border-bottom: 0.5px solid var(--border);
}
.entity-logo {
width: 60px; height: 60px;
background: var(--paper3);
border: 1px solid var(--border2);
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-mono);
font-size: 18px;
font-weight: 600;
color: var(--teal);
}
.entity-name { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 4px; letter-spacing: -0.035em; }
.entity-sub { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.entity-tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* Mini-header compact : logo réduit + nom + actions, sans sub ni tags */
.entity-header--compact {
padding: 12px 24px;
gap: 14px;
align-items: center;
border: 0.5px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xs);
}
.entity-header--compact .entity-logo {
width: 38px;
height: 38px;
font-size: 13px;
border-radius: var(--radius-md);
}
.entity-header--compact .entity-name { font-size: 17px; margin-bottom: 0; }
/* Bloc d'intro Overview (startup) : sub + tags */
.overview-intro { margin-bottom: 16px; }
.overview-intro .entity-sub { font-size: 13px; color: var(--muted); margin-bottom: 8px; line-height: 1.55; }
.overview-intro .entity-tags { display: flex; gap: 6px; flex-wrap: wrap; }
/* Bloc d'intro Accueil (fond) : sub + tags + AUM */
.fund-accueil-intro {
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: start;
margin-bottom: 20px;
}
.fund-accueil-intro-text .entity-sub { font-size: 13px; color: var(--muted); margin-bottom: 0; line-height: 1.55; }
@media (max-width: 768px) {
.fund-accueil-intro { grid-template-columns: 1fr; }
.entity-header--compact { padding: 10px 16px; gap: 10px; }
.entity-header--compact .entity-logo { width: 32px; height: 32px; font-size: 12px; }
.entity-header--compact .entity-name { font-size: 15px; }}
/* ────────────────────────────────────────────────────────────────
29. HEALTH SCORE WIDGET
──────────────────────────────────────────────────────────────── */
.health-widget { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.health-score {
font-family: var(--font-mono);
font-size: 42px;
font-weight: 600;
line-height: 1;
color: var(--teal);
}
.health-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; }
.health-bar {
width: 160px; height: 4px;
background: var(--paper3);
border-radius: var(--radius-pill);
overflow: hidden;
}
.health-bar-fill { height: 100%; background: var(--teal); border-radius: var(--radius-pill); }
/* ────────────────────────────────────────────────────────────────
30. METRICS GRID
──────────────────────────────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 24px; }
.metrics-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 24px; }
.metric-card {
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 16px;
box-shadow: var(--shadow-xs);
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
}
.metric-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.metric-label { font-family: var(--font-ui); font-size: 11.5px; color: var(--muted); margin-bottom: 6px; font-weight: 400; }
.metric-value { font-family: var(--font-mono); font-size: 20px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.metric-delta { font-size: 12px; }
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.section { margin-bottom: 24px; }
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-action { font-size: 12px; color: var(--muted); cursor: pointer; transition: color var(--t-fast); }
.section-action:hover { color: var(--ink); }
/* Bloc « section » avec en-tête + carte → on fusionne en UNE carte dont le titre
est À L'INTÉRIEUR (barre d'en-tête), comme le modèle table-card des listes/analyse.
Ne cible que les sections contenant à la fois un .section-header et une .card
directe ; les sections « timeline » (sans carte) restent inchangées. */
.section:has(> .section-header):has(> .card) {
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.section:has(> .section-header):has(> .card) > .section-header {
margin: 0;
padding: 14px 18px;
border-bottom: 1px solid var(--border);
}
.section:has(> .section-header):has(> .card) > .card {
background: none;
border: none;
box-shadow: none;
border-radius: 0;
animation: none;
}
/* ────────────────────────────────────────────────────────────────
32. TIMELINE
──────────────────────────────────────────────────────────────── */
.timeline { position: relative; }
/* Ancien trait global supprimé : on relie maintenant les dots un par un via
`.timeline-event::before` pour que le trait passe ENTRE les carrés au lieu
de les traverser. */
.timeline-line { display: none; }
.timeline-event {
display: grid;
grid-template-columns: 40px 1fr;
gap: 12px;
margin-bottom: 16px;
position: relative;
}
/* Trait vertical sous chaque dot, jusqu'au dot suivant.
left: 16px = centre du dot 32×32. top: 32px = juste en dessous du dot.
bottom: -16px = comble la margin-bottom de 16px jusqu'au dot d'après. */
.timeline-event::before {
content: "";
position: absolute;
left: 16px;
top: 32px;
bottom: -16px;
width: 1px;
background: var(--teal);
opacity: 0.4;
pointer-events: none;
}
.timeline-event:last-child::before { display: none; }
.timeline-dot {
width: 32px; height: 32px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
flex-shrink: 0;
border: 1px solid var(--border);
border-radius: var(--radius-md);
position: relative;
z-index: 1;
transition: box-shadow var(--t-base);
}
.timeline-dot:hover { box-shadow: var(--shadow-sm); }
.dot-raise { background: var(--positive-bg); border-color: rgba(21,138,64,0.3); color: var(--positive); }
.dot-gov { background: var(--gold-bg); border-color: var(--gold-border); color: var(--gold); }
.dot-press { background: var(--teal-bg); border-color: var(--teal-border); color: var(--teal); }
.dot-legal { background: var(--negative-bg); border-color: var(--negative-border); color: var(--negative); }
.dot-social { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.dot-invest { background: var(--positive-bg); border-color: rgba(21,138,64,0.3); color: var(--positive); }
.timeline-dot.dot-exit { background: var(--teal-bg); border-color: var(--teal-border); color: var(--teal); }
.dot-dead { background: var(--negative-bg); border-color: var(--negative-border); color: var(--negative); }
.event-card {
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 14px 16px;
box-shadow: var(--shadow-xs);
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
cursor: pointer;
}
.event-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.event-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.event-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.event-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; }
.event-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.event-amount { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--positive); margin-top: 4px; }
.event-badges { display: flex; gap: 4px; margin-top: 8px; flex-wrap: wrap; }
.badge { padding: 3px 9px; font-size: 11px; font-weight: 500; border: 0.5px solid; border-radius: var(--radius-pill); }
/* Variantes de couleur (badge-teal/red/gray/purple/blue/amber + .sk-badge)
définies une seule fois §"Badges & pastilles de statut" plus bas — partagées
par les bases .badge et .sk-badge. */
/* ────────────────────────────────────────────────────────────────
33. FILTER BUTTONS
──────────────────────────────────────────────────────────────── */
.filter-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.filter-btn {
padding: 6px 14px;
font-size: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: none;
color: var(--muted);
cursor: pointer;
transition: all var(--t-base);
font-family: var(--font-ui);
font-weight: 500;
}
.filter-btn:hover { border-color: var(--border2); color: var(--ink); background: var(--paper3); }
.filter-btn.active { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); font-weight: 600; }
/* ────────────────────────────────────────────────────────────────
34. INDEX ROWS
──────────────────────────────────────────────────────────────── */
.index-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.index-row:last-child { border-bottom: none; }
.index-name { font-size: 13px; color: var(--ink); }
.index-bar-wrap { flex: 1; margin: 0 12px; height: 4px; background: var(--paper3); border-radius: var(--radius-pill); overflow: hidden; }
.index-bar-inner { height: 100%; border-radius: var(--radius-pill); }
.index-val { font-family: var(--font-mono); font-size: 12px; font-weight: 600; min-width: 28px; text-align: right; }
/* ────────────────────────────────────────────────────────────────
36. ALERTS (sidebar)
──────────────────────────────────────────────────────────────── */
.alert {
display: flex;
gap: 10px;
padding: 10px 14px;
margin-bottom: 8px;
font-size: 12px;
line-height: 1.5;
border: 1px solid;
border-radius: var(--radius-lg);
}
.alert:last-child { margin-bottom: 0; }
.alert-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.alert-ok { background: var(--positive-bg); border-color: rgba(21,138,64,0.15); color: var(--positive); }
.alert-danger { background: var(--negative-bg); border-color: var(--negative-border); color: var(--negative); }
.alert-icon { font-size: 14px; flex-shrink: 0; margin-top: 1px; }
/* ────────────────────────────────────────────────────────────────
37. VEHICULE SELECTOR
──────────────────────────────────────────────────────────────── */
.vehicule-selector { display: flex; gap: 10px; margin: 24px 0 20px; overflow-x: auto; padding-bottom: 6px; }
.vehicule-card {
min-width: 220px;
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 16px;
cursor: pointer;
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
flex-shrink: 0;
box-shadow: var(--shadow-xs);
}
.vehicule-card.active { border-color: var(--teal); background: var(--teal-bg); box-shadow: 0 0 0 3px var(--teal-bg); }
.vehicule-card:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.vehicule-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.vehicule-vintage { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-bottom: 10px; }
.vehicule-mini-stats { display: flex; gap: 12px; }
.vms-item { text-align: center; }
.vms-val { font-family: var(--font-mono); font-size: 14px; font-weight: 600; }
.vms-label { font-size: 10px; color: var(--muted); }
.age-badge { display: inline-block; padding: 3px 10px; font-size: 11px; font-family: var(--font-ui); border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.age-young { background: var(--positive-bg); color: var(--positive); border-color: rgba(21,138,64,0.15); }
.age-mid { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.age-old { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); }
/* ────────────────────────────────────────────────────────────────
38. PORTFOLIO TABLE
──────────────────────────────────────────────────────────────── */
.portfolio-table { width: 100%; border-collapse: collapse; }
.portfolio-table th { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 500; padding: 9px 14px; text-align: left; border-bottom: 0.5px solid var(--border); }
.portfolio-table td { padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 13px; vertical-align: middle; }
.portfolio-table tr:last-child td { border-bottom: none; }
.portfolio-table tr:hover td { background: var(--paper3); }
.startup-cell { display: flex; align-items: center; gap: 10px; }
.startup-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; flex-shrink: 0; border: 0.5px solid var(--border); border-radius: var(--radius-md); background: var(--paper3); }
.startup-nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.startup-sec { font-size: 11px; color: var(--muted); }
.status-pill { padding: 4px 10px; font-size: 11px; font-weight: 500; border: 0.5px solid; border-radius: var(--radius-pill); }
.status-alive { background: var(--positive-bg); color: var(--positive); border-color: rgba(21,138,64,0.15); }
.status-exit-hi { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); }
.status-exit-lo { background: var(--paper3); color: var(--muted); border-color: var(--border); }
.status-dead { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); }
.status-watch { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.health-mini { display: flex; align-items: center; gap: 6px; }
/* ────────────────────────────────────────────────────────────────
39. GP TEAM
──────────────────────────────────────────────────────────────── */
.gp-card { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 0.5px solid var(--border); transition: padding-left var(--t-base); }
.gp-card:last-child { border-bottom: none; }
.gp-card:hover { padding-left: 4px; }
.gp-avatar { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; border: 0.5px solid var(--border); border-radius: 50%; background: var(--paper3); }
.gp-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.gp-role { font-size: 12px; color: var(--muted); }
.gp-track { margin-left: auto; text-align: right; }
.gp-exits { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--positive); }
.gp-exits-label { font-size: 10px; color: var(--muted); }
/* ────────────────────────────────────────────────────────────────
40. CONTENTIEUX
──────────────────────────────────────────────────────────────── */
.contentieux-item { padding: 14px; border: 1px solid var(--border); border-radius: var(--radius-lg); margin-bottom: 8px; background: var(--paper2); transition: box-shadow var(--t-base); }
.contentieux-item:last-child { margin-bottom: 0; }
.contentieux-item:hover { box-shadow: var(--shadow-sm); }
.c-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.c-title { font-size: 13px; font-weight: 500; color: var(--ink); }
.c-status-pill { padding: 3px 10px; font-size: 11px; border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.c-en-cours { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); }
.c-clos { background: var(--positive-bg); color: var(--positive); border-color: rgba(21,138,64,0.15); }
.c-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
/* ────────────────────────────────────────────────────────────────
41. PORTFOLIO SUMMARY
──────────────────────────────────────────────────────────────── */
.portfolio-summary { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.ps-val { font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.ps-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; margin-top: 3px; }
/* ────────────────────────────────────────────────────────────────
42. PROFILE HERO
──────────────────────────────────────────────────────────────── */
.profile-hero {
background: var(--paper2);
border-bottom: 0.5px solid var(--border);
padding: 48px 40px 36px;
position: relative;
overflow: hidden;
}
.profile-hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 60% 80% at 100% -20%, var(--glow-teal), transparent);
pointer-events: none;
}
.hero-grid { display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: start; }
.avatar {
width: 96px; height: 96px;
background: var(--ink);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: 32px;
font-weight: 600;
color: var(--paper2);
letter-spacing: -0.035em;
}
.avatar-wrap { position: relative; }
.avatar-status {
position: absolute;
bottom: 4px; right: 4px;
width: 18px; height: 18px;
background: var(--positive);
border-radius: 50%;
border: 2.5px solid var(--paper2);
}
.hero-name { font-family: var(--font-display); font-size: 36px; font-weight: 600; color: var(--ink); line-height: 1; letter-spacing: -0.045em; margin-bottom: 6px; }
.hero-title { font-size: 15px; color: var(--muted); margin-bottom: 12px; font-style: italic; }
.hero-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.htag { padding: 5px 12px; font-size: 12px; font-weight: 500; font-family: var(--font-ui); border: 0.5px solid; border-radius: var(--radius-pill); letter-spacing: -0.025em; }
.htag-vc { background: var(--ink); color: var(--paper2); border-color: var(--ink); }
.htag-stage { background: var(--rust-bg); color: var(--rust); border-color: var(--rust-border); }
.htag-sector { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); }
.hero-contact { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.hero-contact a { color: var(--teal); text-decoration: none; transition: color var(--t-fast); }
.hero-contact a:hover { color: var(--teal2); text-decoration: underline; }
.hero-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
border: 1px solid var(--border2);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
/* ────────────────────────────────────────────────────────────────
43. PAGE GRID
──────────────────────────────────────────────────────────────── */
.page-grid { display: grid; grid-template-columns: 1fr 320px; gap: 0; max-width: 1280px; margin: 0 auto; }
.main-col { padding: 32px 40px; border-right: 0.5px solid var(--border); min-width: 0; }
.side-col { padding: 28px; min-width: 0; }
/* ────────────────────────────────────────────────────────────────
44. BREADCRUMB
──────────────────────────────────────────────────────────────── */
.breadcrumb {
padding: 10px 40px;
font-size: 12px;
color: var(--muted);
border-bottom: 0.5px solid var(--border);
background: var(--paper2);
display: flex;
align-items: center;
gap: 6px;
}
.breadcrumb a { color: var(--muted); text-decoration: none; transition: color var(--t-fast); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb-sep { opacity: 0.35; }
/* ────────────────────────────────────────────────────────────────
45. FOND CARDS
──────────────────────────────────────────────────────────────── */
.fond-cards { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--border2); border-radius: var(--radius-xl); overflow: hidden; }
.fond-card {
background: var(--paper2);
padding: 22px 24px;
border-bottom: 0.5px solid var(--border);
cursor: pointer;
transition: background var(--t-base);
position: relative;
}
.fond-card:last-child { border-bottom: none; }
.fond-card:hover { background: var(--paper3); }
.fond-card.current { border-left: 3px solid var(--rust); padding-left: 21px; }
.fond-card.exited { border-left: 3px solid var(--positive); padding-left: 21px; }
.fond-card.failed { border-left: 3px solid var(--muted2); padding-left: 21px; }
.fc-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); letter-spacing: -0.035em; }
.exit-chip { display: flex; align-items: center; gap: 5px; padding: 4px 12px; font-size: 12px; background: var(--paper3); border: 0.5px solid var(--border); border-radius: var(--radius-pill); transition: background var(--t-fast), border-color var(--t-fast); }
.exit-chip:hover { background: var(--paper2); border-color: var(--border2); }
.exit-chip-name { font-weight: 500; color: var(--ink); }
.exit-chip-mult { font-family: var(--font-mono); font-size: 11px; }
/* ────────────────────────────────────────────────────────────────
46. SIDEBAR SECTIONS
──────────────────────────────────────────────────────────────── */
.side-section { margin-bottom: 28px; border-bottom: 0.5px solid var(--border); padding-bottom: 24px; }
.side-section:last-child { border-bottom: none; }
.side-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; margin-bottom: 12px; }
.mini-timeline { position: relative; padding-left: 18px; }
.mini-timeline::before { content: ''; position: absolute; left: 4px; top: 6px; bottom: 6px; width: 1px; background: var(--border2); }
.mt-item { position: relative; margin-bottom: 16px; }
.mt-item:last-child { margin-bottom: 0; }
.mt-dot { position: absolute; left: -16px; top: 4px; width: 8px; height: 8px; border: 2px solid var(--border2); background: var(--paper2); border-radius: 50%; }
.mt-dot.active { background: var(--rust); border-color: var(--rust); }
.mt-dot.exited { background: var(--positive); border-color: var(--positive); }
.mt-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-bottom: 1px; }
.mt-text { font-size: 13px; color: var(--ink); font-weight: 500; }
.mt-sub { font-size: 12px; color: var(--muted); }
.bio-text { font-size: 13px; color: var(--ink); line-height: 1.75; font-style: italic; border-left: 3px solid var(--rust); padding-left: 14px; }
.data-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.data-row:last-child { border-bottom: none; }
.dr-label { font-size: 12px; color: var(--muted); }
.dr-val { font-size: 13px; color: var(--ink); font-weight: 500; font-family: var(--font-mono); }
.signal-row { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.signal-row:last-child { border-bottom: none; }
.signal-icon { font-size: 13px; flex-shrink: 0; }
.signal-text { font-size: 12px; color: var(--ink); flex: 1; line-height: 1.4; }
.signal-badge { font-family: var(--font-mono); font-size: 10px; padding: 2px 8px; border: 0.5px solid; border-radius: var(--radius-pill); }
.similar-item { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); cursor: pointer; transition: padding-left var(--t-base); }
.similar-item:last-child { border-bottom: none; }
.similar-item:hover { padding-left: 4px; }
.sim-av { width: 34px; height: 34px; border: 0.5px solid var(--border2); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 11px; font-weight: 600; background: var(--paper3); }
.sim-name { font-size: 13px; font-weight: 500; color: var(--ink); }
.sim-role { font-size: 11px; color: var(--muted); }
.sim-dpi { font-family: var(--font-mono); font-size: 13px; font-weight: 600; margin-left: auto; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: 5px; }
.tcloud-tag { padding: 4px 10px; font-size: 11px; background: var(--paper3); color: var(--ink); border: 0.5px solid var(--border); border-radius: var(--radius-pill); font-family: var(--font-ui); transition: background var(--t-fast), border-color var(--t-fast); }
.tcloud-tag:hover { background: var(--paper2); border-color: var(--border2); }
/* ────────────────────────────────────────────────────────────────
47. INVESTISSEUR TABLE
──────────────────────────────────────────────────────────────── */
.inv-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border2); border-radius: var(--radius-xl); overflow: hidden; }
.inv-table th { font-family: var(--font-ui); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; padding: 10px 14px; text-align: left; background: var(--paper3); border-bottom: 0.5px solid var(--border2); font-weight: 500; }
.inv-table td { padding: 12px 14px; border-bottom: 0.5px solid var(--border); font-size: 13px; background: var(--paper2); }
.inv-table tr:last-child td { border-bottom: none; }
.inv-table tr:hover td { background: var(--paper3); }
.startup-chip { display: flex; align-items: center; gap: 8px; }
.startup-logo-sm { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; flex-shrink: 0; border: 0.5px solid var(--border2); border-radius: var(--radius-md); background: var(--paper3); }
.s-nm { font-size: 13px; font-weight: 500; color: var(--ink); }
.s-sec { font-size: 11px; color: var(--muted); }
.mult-pill { padding: 3px 10px; font-family: var(--font-mono); font-size: 11px; font-weight: 600; border: 0.5px solid; border-radius: var(--radius-pill); }
.m-win { background: var(--positive-bg); color: var(--positive); border-color: rgba(21,138,64,0.15); }
.m-loss { background: var(--paper3); color: var(--muted); border-color: var(--border); }
.m-live { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); }
.m-watch { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.network-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.netw-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--paper2); border: 0.5px solid var(--border); border-radius: var(--radius-md); transition: background var(--t-fast), border-color var(--t-fast); }
.netw-item:hover { background: var(--paper3); border-color: var(--border2); }
.netw-count { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); min-width: 24px; }
.netw-name { font-size: 12px; color: var(--ink); }
.netw-deals { font-size: 11px; color: var(--muted); margin-left: auto; }
/* ────────────────────────────────────────────────────────────────
48. FONDATEUR HERO
──────────────────────────────────────────────────────────────── */
.hero { background: var(--paper2); border-bottom: 0.5px solid var(--border); position: relative; overflow: hidden; }
.hero::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(ellipse 50% 100% at 100% 50%, var(--glow-rust), transparent);
pointer-events: none;
}
.hero-inner { display: grid; grid-template-columns: 300px 1fr; min-height: 300px; }
.hero-left {
padding: 40px 32px;
border-right: 0.5px solid var(--border);
display: flex;
flex-direction: column;
justify-content: space-between;
background: var(--paper3);
position: relative;
z-index: 1;
}
.avatar-zone { text-align: center; margin-bottom: 20px; }
.avatar-md {
width: 80px; height: 80px;
background: var(--ink);
border: 0.5px solid var(--border2);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-display);
font-size: 28px;
font-style: italic;
color: var(--paper2);
margin: 0 auto 12px;
}
.founder-name { font-family: var(--font-display); font-size: 28px; font-weight: 600; color: var(--ink); line-height: 1.1; text-align: center; margin-bottom: 4px; letter-spacing: -0.035em; }
.founder-title { font-size: 13px; color: var(--muted); text-align: center; font-style: italic; margin-bottom: 14px; }
.id-chip { display: flex; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 0.5px solid var(--border); }
.id-chip:last-child { border-bottom: none; }
.id-icon { font-size: 12px; opacity: 0.5; width: 16px; text-align: center; }
.id-val { font-size: 12px; color: var(--muted); }
.id-val strong { color: var(--ink); font-weight: 500; }
.hero-right { padding: 40px; position: relative; z-index: 1; }
.hero-right-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.hs-val { font-family: var(--font-display); font-size: 56px; font-weight: 600; color: var(--ink); line-height: 1; margin-bottom: 2px; letter-spacing: -0.04em; }
.hs-label { font-size: 13px; color: var(--muted); font-style: italic; }
.rep-score { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.rep-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-ui); }
.rep-val { font-family: var(--font-mono); font-size: 36px; font-weight: 600; color: var(--gold); line-height: 1; }
.rep-sub { font-size: 12px; color: var(--gold); opacity: 0.7; }
.kpi-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.kpi-cell { background: var(--paper3); padding: 14px 16px; border-right: 0.5px solid var(--border); }
.kpi-cell:last-child { border-right: none; }
.kpi-v { font-family: var(--font-mono); font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.kpi-l { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.body-grid { display: grid; grid-template-columns: 1fr 340px; }
.sec-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.sec-title { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--ink); letter-spacing: -0.035em; }
.sec-count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
/* ────────────────────────────────────────────────────────────────
49. STARTUP BLOCK
──────────────────────────────────────────────────────────────── */
.startup-block {
margin-bottom: 20px;
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
overflow: hidden;
cursor: pointer;
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
box-shadow: var(--shadow-xs);
}
.startup-block:hover { border-color: var(--border2); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.startup-block.active-co { border-color: var(--gold-border); }
.sb-header { display: flex; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 0.5px solid var(--border); background: var(--paper2); }
.sb-logo { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; border: 0.5px solid var(--border2); border-radius: var(--radius-md); flex-shrink: 0; background: var(--paper2); }
.sb-name { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 1px; letter-spacing: -0.025em; }
.sb-sector { font-size: 12px; color: var(--muted); }
.sb-role-badge { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.role-pill { padding: 4px 12px; font-size: 11px; font-family: var(--font-ui); font-weight: 500; border: 0.5px solid; border-radius: var(--radius-pill); }
.rp-ceo { background: var(--gold-bg); color: var(--gold); border-color: var(--gold-border); }
.period-label { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.sb-timeline { padding: 16px 20px 4px; position: relative; padding-left: 28px; }
.sb-tl-line { position: absolute; left: 10px; top: 0; bottom: 0; width: 1px; background: var(--border); }
.ev { display: grid; grid-template-columns: 80px 1fr; gap: 12px; margin-bottom: 14px; position: relative; }
.ev-dot { position: absolute; left: -22px; top: 4px; width: 8px; height: 8px; border: 1.5px solid var(--border2); background: var(--paper2); border-radius: 50%; }
.ev-dot.r { background: var(--positive); border-color: var(--positive); }
.ev-dot.g { background: var(--gold); border-color: var(--gold); }
.ev-dot.l { background: var(--warning); border-color: var(--warning); }
.ev-dot.p { background: var(--muted); border-color: var(--muted); }
.ev-dot.a { background: var(--negative); border-color: var(--negative); }
.ev-dot.x { background: var(--teal); border-color: var(--teal); }
.ev-date { font-family: var(--font-mono); font-size: 10px; color: var(--muted); padding-top: 2px; }
.ev-title { font-size: 13px; color: var(--ink); font-weight: 500; margin-bottom: 2px; }
.ev-desc { font-size: 12px; color: var(--muted); line-height: 1.5; }
.ev-amount { font-family: var(--font-mono); font-size: 12px; color: var(--positive); font-weight: 600; margin-top: 3px; }
.ev-tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.etag { padding: 3px 9px; font-size: 11px; border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.etag-g { background: var(--positive-bg); color: var(--positive); border-color: rgba(21,138,64,0.15); }
.etag-r { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); }
.etag-b { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); }
.etag-p { background: var(--gold-bg); color: var(--gold); border-color: var(--gold-border); }
.etag-y { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
.etag-n { background: var(--paper3); color: var(--muted); border-color: var(--border); }
.sb-footer { padding: 12px 20px; border-top: 0.5px solid var(--border); display: flex; align-items: center; gap: 16px; background: var(--paper3); }
.sf-stat { text-align: center; }
.sf-val { font-family: var(--font-mono); font-size: 14px; font-weight: 600; color: var(--ink); }
.sf-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.sf-sep { width: 1px; height: 28px; background: var(--border2); }
/* ────────────────────────────────────────────────────────────────
50. FONDATEUR SIDEBAR
──────────────────────────────────────────────────────────────── */
.s-section { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 0.5px solid var(--border); }
.s-section:last-child { border-bottom: none; padding-bottom: 0; }
.s-title { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 12px; font-family: var(--font-ui); }
.score-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sc-item { padding: 12px; background: var(--paper3); border: 0.5px solid var(--border); border-radius: var(--radius-lg); }
.sc-val { font-family: var(--font-mono); font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.sc-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.07em; }
.sc-bar { height: 3px; margin-top: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.alert-item { display: flex; gap: 8px; padding: 10px 12px; margin-bottom: 7px; font-size: 12px; line-height: 1.4; border: 1px solid; border-radius: var(--radius-lg); }
.alert-item:last-child { margin-bottom: 0; }
.ai-warn { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.ai-ok { background: var(--positive-bg); border-color: rgba(21,138,64,0.15); color: var(--positive); }
.ai-danger { background: var(--negative-bg); border-color: var(--negative-border); color: var(--negative); }
.ai-icon { flex-shrink: 0; font-size: 12px; }
.social-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.social-row:last-child { border-bottom: none; }
.soc-platform { font-size: 13px; width: 20px; text-align: center; }
.soc-name { font-size: 12px; color: var(--muted); flex: 1; }
.soc-val { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ink); }
.soc-delta { font-size: 11px; margin-left: 4px; }
.soc-up { color: var(--positive); }
.gov-item { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.gov-item:last-child { border-bottom: none; }
.gov-icon { font-size: 13px; }
.gov-text { font-size: 13px; color: var(--ink); flex: 1; }
.gov-badge { padding: 3px 9px; font-size: 11px; font-family: var(--font-ui); border: 0.5px solid; border-radius: var(--radius-pill); font-weight: 500; }
.gb-dou { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-border); }
/* ────────────────────────────────────────────────────────────────
51. PRESS & REVIEWS
──────────────────────────────────────────────────────────────── */
.tab-strip { display: flex; gap: 2px; background: var(--paper3); padding: 3px; border-radius: var(--radius-lg); margin-bottom: 14px; }
.tab-strip-btn { flex: 1; padding: 6px 10px; font-size: 12px; color: var(--muted); cursor: pointer; text-align: center; transition: all var(--t-base); border: none; background: none; font-family: var(--font-ui); border-radius: var(--radius-md); }
.tab-strip-btn.active { background: var(--paper2); color: var(--ink); box-shadow: var(--shadow-sm); font-weight: 500; }
.press-item { padding: 12px 0; border-bottom: 0.5px solid var(--border); transition: padding-left var(--t-base); }
.press-item:last-child { border-bottom: none; }
.press-item:hover { padding-left: 4px; }
.press-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.press-source { font-size: 11px; color: var(--teal); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.press-date { font-size: 11px; color: var(--muted); }
.press-title { font-size: 13px; color: var(--ink); line-height: 1.4; margin-bottom: 4px; font-weight: 500; }
.press-summary { font-size: 12px; color: var(--muted); line-height: 1.4; }
.sent-pos { background: var(--positive-bg); color: var(--positive); border-color: rgba(21,138,64,0.15); }
.sent-neg { background: var(--negative-bg); color: var(--negative); border-color: var(--negative-border); }
.sent-neu { background: var(--paper3); color: var(--muted); border-color: var(--border); }
.review-item { padding: 10px 0; border-bottom: 0.5px solid var(--border); }
.review-item:last-child { border-bottom: none; }
.review-meta { display: flex; justify-content: space-between; margin-bottom: 4px; }
.review-role { font-size: 12px; color: var(--muted); }
.review-date { font-size: 11px; color: var(--muted); }
.review-text { font-size: 13px; color: var(--ink); line-height: 1.4; }
.stars { color: var(--warning); font-size: 15px; letter-spacing: 1px; }
.avis-summary { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.avis-note { font-family: var(--font-mono); font-size: 32px; font-weight: 600; color: var(--warning); }
.avis-count { font-size: 12px; color: var(--muted); }
.avis-trend-item { font-size: 11px; padding: 3px 10px; border: 0.5px solid var(--border); border-radius: var(--radius-pill); }
/* ────────────────────────────────────────────────────────────────
52. RH / TRAFFIC
──────────────────────────────────────────────────────────────── */
.rh-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 0.5px solid var(--border); }
.rh-row:last-child { border-bottom: none; }
.rh-label { font-size: 13px; color: var(--ink); flex: 1; }
.rh-val { font-family: var(--font-mono); font-size: 13px; color: var(--ink); min-width: 40px; text-align: right; }
.rh-delta { font-size: 11px; margin-left: 4px; }
.comp-name { font-size: 13px; color: var(--ink); }
.comp-raised { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.comp-dots { display: flex; gap: 4px; }
.comp-dot { width: 6px; height: 6px; background: var(--paper3); border-radius: 50%; }
.comp-dot.fill { background: var(--teal); }
/* ────────────────────────────────────────────────────────────────
55. NAV BADGE
──────────────────────────────────────────────────────────────── */
/* ────────────────────────────────────────────────────────────────
56. ANIMATIONS
──────────────────────────────────────────────────────────────── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes slideIn { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: none; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
/* ────────────────────────────────────────────────────────────────
57. CONTEXTUAL LINKS
──────────────────────────────────────────────────────────────── */
a.entity-link {
position: relative;
color: var(--ink);
text-decoration: none;
font-weight: 500;
}
a.entity-link::after {
content: '';
position: absolute;
bottom: -1px; left: 0;
width: 0; height: 1px;
background: var(--teal);
transition: width var(--t-base) var(--ease-out);
}
a.entity-link:hover { color: var(--teal); }
a.entity-link:hover::after { width: 100%; }
/* Bouton « retour à la liste » sur les fiches — calé sur le pill .more du dashboard,
flèche à gauche. */
a.back-link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 600;
color: var(--ink2);
background: var(--paper2);
border: 1px solid var(--border);
padding: 8px 14px;
border-radius: var(--radius-md);
text-decoration: none;
white-space: nowrap;
transition: color var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
a.back-link svg { transition: transform var(--t-base) var(--ease-out); }
a.back-link:hover {
color: var(--rust);
border-color: var(--rust);
transform: translateY(-1px);
}
a.back-link:hover svg { transform: translateX(-3px); }
a.action-link {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--teal);
font-size: 12px;
text-decoration: none;
cursor: pointer;
font-weight: 500;
transition: gap var(--t-base) var(--ease-out), color var(--t-fast);
}
a.action-link:hover { gap: 8px; }
.sources { margin-top: 40px; padding-top: 20px; border-top: 0.5px solid var(--border); }
.sources-title { font-family: var(--font-mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.13em; margin-bottom: 10px; }
.source-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.source-item { display: flex; gap: 6px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.source-num { font-family: var(--font-mono); font-size: 9px; color: var(--muted); min-width: 16px; flex-shrink: 0; }
.source-item a { color: var(--muted); text-decoration: none; border-bottom: 1px dotted var(--muted); word-break: break-all; transition: color var(--t-fast), border-color var(--t-fast); }
.source-item a:hover { color: var(--teal); border-bottom-color: var(--teal); }
.src-badge {
display: inline-flex;
align-items: center;
gap: 3px;
font-family: var(--font-mono);
font-size: 8px;
color: var(--muted2);
text-decoration: none;
opacity: 0.7;
transition: opacity var(--t-fast);
}
.src-badge:hover { opacity: 1; color: var(--teal); }
.src-badge::before { content: '↗'; font-size: 7px; }
/* ────────────────────────────────────────────────────────────────
59. LIST PAGES
──────────────────────────────────────────────────────────────── */
.list-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 24px;
}
.list-title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 30px); font-weight: 700; color: var(--ink); letter-spacing: -0.03em; line-height: 1.15; }
.list-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.list-search {
display: flex;
align-items: center;
gap: 10px;
background: var(--paper2);
border: 1px solid var(--border2);
border-radius: var(--radius-2xl);
padding: 12px 18px;
margin-bottom: 20px;
transition: border-color var(--t-base), box-shadow var(--t-base);
box-shadow: var(--shadow-xs);
}
.list-search:focus-within {
border-color: var(--ink2);
box-shadow: 0 0 0 3px var(--border), var(--shadow-sm);
}
.list-search input {
flex: 1;
background: none;
border: none;
outline: none;
color: var(--ink);
font-family: var(--font-ui);
font-size: 15px;
}
.list-search input::placeholder { color: var(--muted2); }
.list-search-icon { color: var(--muted); font-size: 16px; }
.list-search-count { font-family: var(--font-mono); font-size: 12px; color: var(--muted); white-space: nowrap; }
.list-filters {
display: flex;
gap: 8px;
margin-bottom: 20px;
flex-wrap: wrap;
align-items: center;
}
.list-filter {
padding: 7px 16px;
font-size: 12px;
font-family: var(--font-ui);
font-weight: 500;
border: 1px solid var(--border);
border-radius: var(--radius-pill);
background: none;
color: var(--muted);
cursor: pointer;
transition: all var(--t-base);
}
.list-filter:hover { border-color: var(--border2); color: var(--ink); background: var(--paper3); }
.list-filter.active { background: var(--teal-bg); color: var(--teal); border-color: var(--teal-border); font-weight: 600; }
.list-filter-sep { width: 1px; height: 20px; background: var(--border); }
.list-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.list-card {
position: relative;
background: var(--paper2);
border: 1px solid var(--border);
border-radius: var(--radius-xl);
padding: 20px;
cursor: pointer;
transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-base);
text-decoration: none;
color: var(--ink);
display: block;
box-shadow: var(--shadow-xs);
}
.list-card:hover { border-color: var(--teal-border); box-shadow: var(--shadow-md); transform: translateY(-3px); }
.list-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.list-card-logo {
width: 42px; height: 42px;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 14px; font-weight: 600;
flex-shrink: 0;
border: 1px solid var(--border);
border-radius: var(--radius-lg);
background: var(--paper3);
}
.list-card-name { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.025em; }
.list-card-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.list-card-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.list-card-metrics { display: flex; gap: 16px; }
.list-card-score {
position: absolute; top: 20px; right: 20px;
font-family: var(--font-mono); font-size: 18px; font-weight: 600;
}
.list-pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
margin-top: 32px;
}
.list-page-btn {
display: flex; align-items: center; justify-content: center;
min-width: 36px; height: 36px;
padding: 0 10px;
font-family: var(--font-mono); font-size: 12px;
border: 1px solid var(--border);
border-radius: var(--radius-md);
background: none; color: var(--muted);
cursor: pointer;
transition: all var(--t-base);
}
.list-page-btn:hover { border-color: var(--border2); color: var(--ink); background: var(--paper3); }
.list-page-btn.active { background: var(--teal); color: #fff; border-color: var(--teal); box-shadow: 0 2px 8px var(--glow-teal); }
.list-page-btn:disabled { opacity: 0.3; cursor: default; }
.list-page-info { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin: 0 12px; }
.list-empty { text-align: center; padding: 60px 20px; color: var(--muted); }
.list-empty-icon { font-size: 32px; margin-bottom: 12px; opacity: 0.3; }
.list-empty-text { font-size: 14px; }
/* ────────────────────────────────────────────────────────────────
61. MOCKUP MARKERS
──────────────────────────────────────────────────────────────── */
.mockup {
text-decoration: line-through;
text-decoration-color: var(--rust);
text-decoration-thickness: 1.5px;
opacity: 0.5;
}
.mockup-badge {
display: inline-block;
font-family: var(--font-mono);
font-size: 8px;
color: var(--rust);
text-transform: uppercase;
letter-spacing: 0.08em;
text-decoration: none;
opacity: 0.65;
margin-left: 4px;
vertical-align: super;
}
.mockup-section { position: relative; opacity: 0.4; }
.mockup-section::after {
content: 'MOCKUP — PAS DE SOURCE';
position: absolute; top: 8px; right: 8px;
font-family: var(--font-mono); font-size: 8px;
color: var(--rust); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75;
}
/* ────────────────────────────────────────────────────────────────
62. EMPTY STATES
──────────────────────────────────────────────────────────────── */
.card:empty,
.dash-2col:empty,
.dash-3col:empty,
.section:empty,
.flux-item:empty { display: none; }
.container > *:last-child { margin-bottom: 0; }
/* ────────────────────────────────────────────────────────────────
63. SEARCH DROPDOWN
──────────────────────────────────────────────────────────────── */
#nav-search-suggestions {
position: absolute;
top: calc(100% + 8px);
right: 0;
width: 360px;
background: var(--paper2);
border: 1px solid var(--border2);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
z-index: 200;
backdrop-filter: none;
-webkit-backdrop-filter: none;
animation: menuFadeIn 0.16s var(--ease-out) both;
}
[data-theme="dark"] #nav-search-suggestions {
background: var(--paper2);
border-color: var(--border2);
box-shadow: var(--shadow-lg);
}
.search-suggestion {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 10px 14px;
background: none;
border: none;
border-bottom: 0.5px solid var(--border);
cursor: pointer;
text-align: left;
transition: background var(--t-fast);
color: var(--ink);
}
.search-suggestion:last-child { border-bottom: none; }
.search-suggestion:hover,
.search-suggestion.is-active { background: var(--paper3); }
.search-suggestion-copy { display: flex; flex-direction: column; gap: 2px; }
.search-suggestion-copy strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.search-suggestion-copy span { font-size: 11px; color: var(--muted); }
.search-suggestion-type {
font-family: var(--font-mono);
font-size: 10px;
color: var(--teal);
background: var(--teal-bg);
border: 0.5px solid var(--teal-border);
border-radius: var(--radius-pill);
padding: 2px 8px;
flex-shrink: 0;
text-transform: uppercase;
letter-spacing: 0.07em;
}
.search-empty {
padding: 16px 14px;
font-size: 13px;
color: var(--muted);
text-align: center;
background: var(--paper2);
position: relative;
z-index: 201;
}
/* Fix transparence */
#nav-search-suggestions {
z-index: 201;
background: var(--paper2) !important;
background-color: var(--paper2) !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
#nav-search-suggestions * { background-color: var(--paper2) !important; }
#nav-search-suggestions a:hover,
#nav-search-suggestions a.yuka-search-item:hover { background-color: var(--paper3) !important; }
[data-theme="dark"] #nav-search-suggestions,
[data-theme="dark"] #nav-search-suggestions * { background-color: var(--paper2) !important; }
[data-theme="dark"] #nav-search-suggestions a:hover { background-color: var(--paper3) !important; }
/* ────────────────────────────────────────────────────────────────
64. YUKA SEARCH ITEMS
──────────────────────────────────────────────────────────────── */
.yuka-search-item {
display: flex;
align-items: center;
width: 100%;
padding: 10px 14px;
background-color: var(--paper2) !important;
border-bottom: 0.5px solid var(--border);
color: var(--ink);
text-decoration: none;
font-size: 13px;
transition: background var(--t-fast);
}
.yuka-search-item:last-child { border-bottom: none; }
.yuka-search-item:hover { background-color: var(--paper3) !important; }
[data-theme="dark"] .yuka-search-item { background-color: var(--paper2) !important; }
[data-theme="dark"] .yuka-search-item:hover { background-color: var(--paper3) !important; }
/* Les enfants d'un item ne doivent pas garder de fond fixe : sinon ils restent
blancs (--paper2) quand la ligne passe en gris (--paper3) au survol → "carré blanc". */
#nav-search-suggestions .yuka-search-item *,
.yuka-search-dropdown .yuka-search-item * { background-color: transparent !important; }
/* ────────────────────────────────────────────────────────────────
65. MOBILE NAV — Hamburger + Drawer
──────────────────────────────────────────────────────────────── */
.nav-hamburger {
display: none;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 40px; height: 40px;
border: 1px solid var(--border2);
border-radius: var(--radius-md);
background: var(--paper3);
color: var(--muted);
cursor: pointer;
padding: 0;
transition: background var(--t-base), color var(--t-base);
-webkit-tap-highlight-color: transparent;
}
.nav-hamburger:hover { background: var(--paper2); color: var(--ink); }
.nav-hamburger-icon { display: flex; flex-direction: column; gap: 5px; width: 18px; }
.nav-hamburger-icon span {
display: block; height: 1.5px;
background: currentColor; border-radius: 2px;
transition: transform 0.25s var(--ease-out), opacity 0.2s, width 0.2s;
transform-origin: center;
}
.nav-hamburger-icon span:nth-child(2) { width: 12px; }
/* ────────────────────────────────────────────────────────────────
66. HERO STATS ROW
──────────────────────────────────────────────────────────────── */
.hero-stats-row {
margin-top: 14px;
display: flex;
gap: 14px;
flex-wrap: wrap;
}
.hero-stats-sep {
width: 1px;
background: var(--border);
align-self: stretch;
}
/* ════════════════════════════════════════════════════════════════
RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
.kpi-grid { grid-template-columns: repeat(3, 1fr); }
.dash-3col { grid-template-columns: 1fr 1fr; }
.dash-grid { grid-template-columns: 1fr 1fr; }
.nav-tab { padding: 6px 10px; font-size: 12px; white-space: nowrap; }
.nav-search input { width: 140px; }
}
@media (max-width: 960px) {
.nav-tab { padding: 6px 7px; font-size: 11px; white-space: nowrap; }
.nav-tabs { gap: 0; }
.nav-search { display: none; }}
@media (max-width: 768px) {
body { overflow-x: hidden; }
.nav-tabs { display: none; }
.nav-search { display: none; }
.nav-hamburger { display: flex !important; }
.container { padding: 16px; }
.topbar { padding: 0 16px; }
.kpi-grid,
.dash-2col,
.dash-3col { grid-template-columns: 1fr; }
.page-grid { grid-template-columns: 1fr; }
.ticker {
padding: 10px 16px;
gap: 20px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.ticker::-webkit-scrollbar { display: none; }
.table-wrap,
table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
.list-header { flex-direction: column; align-items: flex-start; gap: 10px; }
.list-filters { flex-wrap: wrap; gap: 6px; }
.breadcrumb { padding: 8px 16px; font-size: 12px; }
h1, .h1 { font-size: 20px; }
h2, .h2 { font-size: 16px; }
.page-title h1 { font-size: 20px; }
.list-title { font-size: 20px; }
.kanban { grid-template-columns: 1fr !important; }
.pipeline-stats { flex-wrap: wrap; gap: 12px; }
/* Profile hero — fondateur */
.hero-inner { grid-template-columns: 1fr !important; min-height: unset; }
.hero-left { padding: 20px 16px; border-right: none; border-bottom: 0.5px solid var(--border); }
.hero-right { padding: 20px 16px; overflow-x: hidden; }
.hero-right-top { flex-direction: column; gap: 14px; align-items: flex-start; }
.hero-stats-row { gap: 10px; flex-wrap: wrap; }
.hero-stats-sep { display: none; }
.hs-val { font-size: 32px; }
.rep-score { align-items: flex-start; }
.rep-val { font-size: 26px; }
.kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
.kpi-cell { border-bottom: 0.5px solid var(--border); }
.kpi-cell:nth-child(2n) { border-right: none; }
.kpi-cell:nth-last-child(-n+2) { border-bottom: none; }
.body-grid { grid-template-columns: 1fr !important; }
.body-grid > .main-col,
.body-grid > div:first-child { padding: 20px 16px; border-right: none; min-width: 0; overflow-x: hidden; }
.body-grid > .side-col,
.body-grid > div:last-child { padding: 20px 16px; border-top: 0.5px solid var(--border); min-width: 0; }
.sb-header { flex-wrap: wrap; gap: 10px; }
.sb-role-badge { margin-left: 0; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; width: 100%; }
.sb-footer { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 10px; padding: 10px 16px; }
.sf-stat { flex-shrink: 0; }
.sb-timeline { padding-left: 22px; }
.ev { grid-template-columns: 56px 1fr; gap: 8px; }
.ev-dot { left: -16px; }
/* Profile hero — investisseur */
.profile-hero { padding: 20px 16px; overflow: hidden; }
.hero-grid { grid-template-columns: auto 1fr !important; gap: 12px 14px; align-items: start; }
.hero-grid > #fav-slot { display: none !important; }
.avatar { width: 64px; height: 64px; font-size: 20px; }
.hero-name { font-size: 20px; word-break: break-word; }
.hero-title { font-size: 12px; white-space: normal; word-break: break-word; }
.hero-tags { flex-wrap: wrap; }
.hero-contact { flex-wrap: wrap; gap: 4px 8px; font-size: 11px; }
.hero-contact > span:not(:has(*)) { display: none; }
.page-grid { grid-template-columns: 1fr !important; overflow: hidden; }
.page-grid > .main-col { padding: 20px 16px; border-right: none; border-bottom: 0.5px solid var(--border); min-width: 0; overflow-x: hidden; }
.page-grid > .side-col { padding: 20px 16px; min-width: 0; }
.fond-card { padding: 16px; min-width: 0; }
.fc-name { font-size: 15px; white-space: normal; word-break: break-word; }
.section:has(#inv-table) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#inv-table { display: table !important; white-space: normal; min-width: 460px; width: 100%; }
.inv-table th { white-space: nowrap; font-size: 10px; padding: 8px; }
.inv-table td { font-size: 11px; padding: 8px; }
.inv-table th:nth-child(3), .inv-table td:nth-child(3),
.inv-table th:nth-child(4), .inv-table td:nth-child(4) { display: none; }
.network-grid { grid-template-columns: 1fr !important; }
.netw-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-section { min-width: 0; }
.data-row { flex-wrap: wrap; gap: 4px; }
.dr-val { max-width: 100%; word-break: break-word; }
.section-header { flex-wrap: wrap; gap: 4px; }
.sources { padding-left: 16px; padding-right: 16px; margin-top: 24px; }
.container .sources { padding-left: 0; padding-right: 0; }
#nav-search-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; width: auto; z-index: 1100; }
.list-pagination { flex-wrap: wrap; gap: 4px; padding: 0 16px; }
.list-page-btn { min-width: 32px; height: 32px; padding: 0 8px; font-size: 11px; }}
@media (max-width: 480px) {
.kpi-grid { grid-template-columns: 1fr; }
h1, .h1 { font-size: 18px; }
.container { padding: 12px; }
.topbar { padding: 0 12px; }
.kpi-strip { grid-template-columns: 1fr !important; }
.kpi-cell { border-right: none !important; border-bottom: 0.5px solid var(--border); }
.kpi-cell:last-child { border-bottom: none; }
.hs-val { font-size: 26px; }
.rep-val { font-size: 20px; }
.hero-stats-row { gap: 8px; }
.hero-name { font-size: 18px; }
.profile-hero { padding: 16px 14px; }
.sb-header { padding: 12px 14px; }}
/* ════════════════════════════════════════════════════════════════
REDUCED MOTION
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
body::before { display: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
Exit Intelligence — faisceau d'indices (faits, pas jugement)
Classes partagées par les widgets embarqués (track record, positionnement)
et les pages comparables-sortie / exit-operation.
▲ = fait positif · ▼ = fait négatif · · = neutre. Aucune couleur verdict.
═══════════════════════════════════════════════════════════════════════ */
.ei-facts { display: flex; flex-direction: column; gap: 3px; }
.ei-fact { display: block; font-size: 12px; color: var(--ink2); line-height: 1.6; }
.ei-g { font-family: var(--font-mono); font-weight: 600; margin-right: 7px;
display: inline-block; width: 12px; text-align: center; }
.ei-up { color: var(--teal); }
.ei-dn { color: var(--negative); }
.ei-nt { color: var(--muted); }
.ei-indet { display: block; font-size: 11px; font-style: italic; color: var(--muted); margin-bottom: 4px; }
.ei-crew { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink2); }
.ei-nc { color: var(--muted); font-style: italic; }
.ei-empty { color: var(--muted); font-style: italic; text-align: center; padding: 18px 10px; }
/* ═══════════════════════════════════════════════════════════════════════
FOOTER APP — partagé sur les pages internes (data-nav="app").
Injecté par nav-loader.js. Discret, aligné sur .container.
═══════════════════════════════════════════════════════════════════════ */
.app-footer {
margin-top: auto; /* pousse le footer en bas du body flex (sticky footer) */
padding-top: 56px; /* conserve l'air au-dessus quand le contenu est long */
background: var(--paper);
}
.app-footer-inner {
max-width: 1400px;
margin: 0 auto;
padding: 18px 32px;
display: flex;
flex-direction: column;
gap: 12px;
font-size: 12px;
color: var(--muted);
}
/* Ligne de sources canonique (compacte) */
.app-footer-sources {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 6px 8px;
font-size: 11px;
line-height: 1.5;
}
.app-footer-sources .src-label {
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
color: var(--muted2);
}
.app-footer-sources .src-items {
display: inline;
color: var(--muted);
}
.app-footer-sources .src-sep {
margin: 0 6px;
color: var(--border2);
}
.app-footer-sources a {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .15s, border-color .15s;
}
.app-footer-sources a:hover {
color: var(--ink2);
border-bottom-color: var(--border2);
}
/* Ligne meta : marque + clin d'œil breton */
.app-footer-meta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
flex-wrap: wrap;
border-top: 1px solid var(--border);
padding-top: 12px;
}
.app-footer-brand {
display: inline-flex;
align-items: center;
gap: 7px;
}
.app-footer-mark { color: var(--ink2); opacity: 0.7; flex-shrink: 0; }
/* Lien Aide & support (sorti du menu avatar : pas un item « compte ») */
.app-footer-link {
color: var(--muted);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: color .15s, border-color .15s;
}
.app-footer-link:hover {
color: var(--ink2);
border-bottom-color: var(--border2);
}
.app-footer-bzh {
display: inline-flex;
align-items: center;
gap: 7px;
white-space: nowrap;
}
/* Picto breton qui alterne (crossfade entre icônes) */
.bzh-picto {
position: relative;
display: inline-block;
width: 22px;
height: 16px;
vertical-align: -3px;
color: var(--muted2);
}
.bzh-ico {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity .6s ease;
}
.bzh-ico.is-on { opacity: 1; }
.bzh-ico svg { display: block; width: 18px; height: 18px; }
.bzh-ico .bzh-flag-svg {
width: 22px;
height: 15px;
border-radius: 2px;
box-shadow: 0 0 0 1px var(--border), 0 1px 2px rgba(42, 32, 30, 0.14);
transform-origin: left center;
animation: bzh-wave 5s ease-in-out infinite;
}
@keyframes bzh-wave {
0%, 100% { transform: skewY(0deg) scaleY(1); }
25% { transform: skewY(-1.4deg) scaleY(1.015); }
60% { transform: skewY(1.1deg) scaleY(0.99); }
}
@media (prefers-reduced-motion: reduce) {
.bzh-ico { transition: none; }
.bzh-flag-svg { animation: none; }}
@media (max-width: 768px) {
.app-footer { margin-top: auto; padding-top: 36px; }
.app-footer-inner { padding: 16px; }}
/* ════════════════════════════════════════════════════════════════
67. VIZ — Système data-viz partagé (KPIs, charts, tables, filtres)
Système de présentation des données, d'abord posé sur analyse.html
puis généralisé. Tout est namespacé sous .viz (posé sur le conteneur
racine de la page) pour ne PAS entrer en collision avec les classes
génériques déjà utilisées ailleurs (.panel, .seg, .legend, .sec,
.kpi, .btn-ghost, .tag…). Les tokens alias de l'ancienne maquette ont
été résolus vers les vrais tokens du design system (--red→--rust,
--card→--paper2, --line→--border, etc.).
Pour réutiliser ce style sur n'importe quelle page : ajouter la classe
`viz` au conteneur `.container` (cf. analyse.html, dashboard.html).
════════════════════════════════════════════════════════════════ */
.container.viz { padding-bottom: 80px; }
.viz .sec { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin:40px 0 18px; flex-wrap:wrap; }
.viz .sec h2 { font-size:23px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); }
.viz .sec h2 .sub { display:block; font-size:13.5px; font-weight:400; color:var(--muted); letter-spacing:0; margin-top:2px; }
.viz .kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* v4.5 « registre » : mêmes cellules neutres que .kpi-card — la teinte
ne survit que sur le picto. */
.viz .kpi { background:var(--paper2); border:1px solid var(--border); box-shadow:var(--shadow-xs); border-radius:var(--radius-lg); padding:20px 20px 22px; position:relative; overflow:hidden; transition:transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s var(--ease-out); }
.viz .kpi:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--border2); }
.viz .kpi .k-label { font-family:var(--font-mono); font-size:10.5px; font-weight:500; text-transform:uppercase; letter-spacing:0.12em; color:var(--muted); }
.viz .kpi .k-val { font-size:34px; font-weight:700; letter-spacing:-0.03em; line-height:1.05; margin-top:13px; color:var(--ink); font-variant-numeric:tabular-nums; }
.viz .kpi .k-icon { position:absolute; right:18px; top:16px; width:22px; height:22px; opacity:0.55; }
.viz .kpi .k-icon svg { width:100%; height:100%; }
.viz .kpi.v-blush { color:var(--c-blush-ink); }
.viz .kpi.v-cream { color:var(--c-cream-ink); }
.viz .kpi.v-sage { color:var(--c-sage-ink); }
.viz .kpi.v-sky { color:var(--c-sky-ink); }
.viz .kpi.v-lilac { color:var(--c-lilac-ink); }
.viz .cols-2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; }
.viz .panel { background:var(--paper2); border-radius:var(--radius-lg); padding:22px; border:1px solid var(--border); min-width:0; box-shadow:var(--shadow-sm); }
.viz .panel-h { display:flex; align-items:center; gap:9px; margin-bottom:14px; font-size:16px; font-weight:700; letter-spacing:-0.01em; color:var(--ink); }
.viz .panel-h .pi { width:18px; height:18px; color:var(--rust); flex-shrink:0; }
.viz .rank-item { display:grid; grid-template-columns:20px 36px 1fr auto; gap:12px; align-items:center; padding:10px 0; }
.viz .rank-item + .rank-item { border-top:1px solid var(--border); }
.viz .rank-n { font-family:var(--font-mono); font-size:13px; font-weight:600; color:var(--muted2); }
.viz .rank-av { width:36px; height:36px; border-radius:var(--radius-md); display:grid; place-items:center; font-weight:700; font-size:12.5px; }
.viz .rank-name { font-size:14px; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.viz .rank-name:hover { color:var(--rust); }
.viz .rank-val { font-family:var(--font-mono); font-size:14px; font-weight:600; text-align:right; color:var(--ink); }
.viz .rank-val span { display:block; font-family:var(--font-ui); font-size:10.5px; font-weight:500; color:var(--muted2); }
@media (prefers-reduced-motion: no-preference) {
.viz .reveal { opacity:0; transform:translateY(14px); animation:analyse-rise .6s var(--ease-out) forwards; }
.viz .reveal[style*="--d"] { animation-delay:calc(var(--d) * 1ms); }
@keyframes analyse-rise { to { opacity:1; transform:none; } }}
/* ── Titre de page ── */
/* En-tête de page standard (réutilisable sur toutes les pages) */
.page-head { display:flex; align-items:flex-end; justify-content:space-between; gap:18px; flex-wrap:wrap; margin:6px 0 18px; }
.page-head h1 { font-family:var(--font-display); font-size:clamp(24px,3vw,30px); font-weight:700; letter-spacing:-0.03em; line-height:1.15; color:var(--ink); }
.page-head h1 .accent { color:var(--rust); }
.page-head p { color:var(--muted); font-size:14px; margin-top:4px; max-width:60ch; }
.viz .head-actions { display:flex; gap:10px; }
.viz .btn-ghost {
display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:600; color:var(--ink2);
background:var(--paper2); border:1px solid var(--border); padding:9px 15px; border-radius:var(--radius-md); cursor:pointer;
transition:border-color .16s var(--ease-out), color .16s, transform .16s;
}
.viz .btn-ghost:hover { color:var(--ink); border-color:var(--ink2); transform:translateY(-1px); }
.viz .btn-ghost svg { width:15px; height:15px; }
/* ── Barre de filtres sticky & repliable ── */
.viz .filterbar {
position:sticky; top:calc(58px + 8px); z-index:40;
background:color-mix(in srgb, var(--paper2) 94%, transparent);
backdrop-filter:saturate(150%) blur(14px); -webkit-backdrop-filter:saturate(150%) blur(14px);
border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);
margin-bottom:22px; overflow:hidden;
}
.viz .filter-toggle {
width:100%; display:flex; align-items:center; gap:10px; background:none; border:none; cursor:pointer;
padding:12px 16px; font:inherit; color:var(--ink); text-align:left;
}
.viz .filter-toggle .chev { width:16px; height:16px; color:var(--muted); flex-shrink:0; transition:transform .2s var(--ease-out); }
.viz .filterbar.collapsed .filter-toggle .chev { transform:rotate(-90deg); }
.viz .filter-toggle .ft-label { font-size:13px; font-weight:700; letter-spacing:-0.01em; }
.viz .filter-toggle .ft-summary { font-size:12.5px; color:var(--muted); margin-left:auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:60%; }
.viz .filter-body { padding:4px 16px 14px; }
.viz .filterbar.collapsed .filter-body { display:none; }
.viz .filterbar.collapsed .filter-toggle .ft-summary { display:inline; }
.viz .filter-toggle .ft-summary { display:none; }
@media (min-width:721px){ .viz .filterbar.collapsed .filter-toggle .ft-summary { display:inline; }}
.viz .filter-grid { display:flex; flex-wrap:wrap; align-items:flex-end; gap:18px 26px; }
.viz .fgroup { display:flex; flex-direction:column; gap:7px; }
.viz .fgroup > .flabel { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:var(--muted2); }
.viz .fctl { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.viz .seg { display:inline-flex; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius-md); padding:3px; }
.viz .seg button { border:none; background:none; cursor:pointer; font-size:13px; font-weight:600; color:var(--muted); padding:6px 13px; border-radius:7px; transition:background .15s, color .15s; white-space:nowrap; }
.viz .seg button.is-on { background:var(--ink); color:var(--paper2); box-shadow:var(--shadow-sm); }
.viz .seg button:not(.is-on):hover { color:var(--ink); }
.viz .fchip { border:1px solid var(--border); background:var(--paper2); cursor:pointer; font-size:12.5px; font-weight:600; color:var(--ink2); padding:6px 12px; border-radius:999px; transition:all .15s var(--ease-out); }
.viz .fchip:hover { border-color:var(--border2); }
.viz .fchip.is-on { background:var(--ink); border-color:var(--ink); color:var(--paper2); }
.viz .fselect {
appearance:none; -webkit-appearance:none;
background:var(--paper) url("data:image/svg+xml;utf8,") no-repeat right 12px center;
border:1px solid var(--border); border-radius:var(--radius-md); padding:8px 34px 8px 13px; font-size:13px; font-weight:600; color:var(--ink); cursor:pointer;
}
.viz .fselect:focus-visible { border-color:var(--ink2); }
.viz .filterbar-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--border); flex-wrap:wrap; }
.viz .active-summary { font-size:12.5px; color:var(--muted); }
.viz .active-summary b { color:var(--ink2); font-weight:600; }
.viz .reset-link { font-size:12.5px; font-weight:600; color:var(--rust); cursor:pointer; background:none; border:none; }
.viz .reset-link:hover { text-decoration:underline; }
/* Filtres en colonne gauche — réutilise le squelette .ls-layout/.ls-side des pages de listes.
Les contrôles d'analyse (segments/chips/selects) sont empilés verticalement dans l'aside. */
.viz .ls-side .filter-grid { flex-direction:column; align-items:stretch; gap:18px; }
.viz .ls-side .seg { flex-wrap:wrap; }
.viz .ls-side .fselect { width:100%; }
.viz .ls-side .ls-side-head .reset-link { margin-left:auto; }
.viz .ls-side .filterbar-foot { margin-top:16px; padding-top:14px; border-top:1px dashed var(--border); }
/* ── KPI tendance ── */
.viz .kpi .k-trend { display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700; margin-top:10px; padding:3px 8px; border-radius:999px; }
.viz .kpi .k-trend.up { background:rgba(21,138,64,0.16); color:var(--positive); }
.viz .kpi .k-trend.down { background:rgba(234,78,77,0.18); color:var(--negative); }
.viz .kpi .k-trend.flat { background:rgba(111,101,93,0.16); color:var(--muted); }
.viz .kpi .k-trend svg { width:12px; height:12px; }
.viz .kpi .k-trend.hidden { display:none; }
/* ── Charts ── */
.viz .chart-card { background:var(--paper2); border:1px solid var(--border); border-radius:var(--radius-lg); padding:22px; box-shadow:var(--shadow-sm); }
.viz .chart-head { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:18px; flex-wrap:wrap; }
.viz .chart-head .panel-h { margin-bottom:0; }
.viz svg.chart { width:100%; height:auto; display:block; overflow:visible; }
.viz .grid-line { stroke:var(--border); stroke-width:1; }
.viz .axis-lbl { fill:var(--muted2); font-size:11px; font-family:var(--font-mono); }
.viz .area-fill { opacity:.16; }
.viz .line-path { fill:none; stroke-width:2.5; stroke-linecap:round; stroke-linejoin:round; }
.viz .dot { stroke:var(--paper2); stroke-width:2; }
.viz .legend { display:flex; gap:16px; flex-wrap:wrap; margin-top:14px; }
.viz .legend span { display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--ink2); font-weight:500; }
.viz .legend i { width:11px; height:11px; border-radius:3px; display:inline-block; }
.viz .div-row { display:grid; grid-template-columns:130px 1fr 64px; align-items:center; gap:12px; margin-bottom:13px; }
.viz .div-row .dname { font-size:13px; font-weight:600; text-align:right; color:var(--ink); }
.viz .div-track { position:relative; height:22px; background:var(--paper); border-radius:var(--radius-sm); }
.viz .div-track::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border2); }
.viz .div-bar { position:absolute; top:4px; bottom:4px; border-radius:5px; }
.viz .div-bar.pos { left:50%; background:var(--positive); }
.viz .div-bar.neg { right:50%; background:var(--negative); }
.viz .div-val { font-family:var(--font-mono); font-size:12.5px; font-weight:600; }
.viz .div-val.pos { color:var(--positive); } .viz .div-val.neg { color:var(--negative); }
.viz .donut-wrap { display:flex; align-items:center; gap:26px; flex-wrap:wrap; }
.viz .donut-legend { display:flex; flex-direction:column; gap:9px; flex:1; min-width:160px; }
.viz .donut-legend .dl { display:grid; grid-template-columns:12px 1fr auto; align-items:center; gap:9px; font-size:13px; color:var(--ink); }
.viz .donut-legend .dl i { width:11px; height:11px; border-radius:3px; }
.viz .donut-legend .dl .v { font-family:var(--font-mono); font-weight:600; color:var(--ink2); }
.viz .stage { display:flex; flex-direction:column; gap:8px; }
.viz .st-row { display:grid; grid-template-columns:90px 1fr; align-items:center; gap:14px; }
.viz .st-row .st-lbl { font-size:13px; font-weight:600; text-align:right; color:var(--ink); }
.viz .st-bar-wrap { display:flex; align-items:center; gap:12px; }
.viz .st-bar { height:34px; border-radius:var(--radius-sm); display:flex; align-items:center; padding:0 12px; color:#fff; font-family:var(--font-mono); font-weight:600; font-size:13px; min-width:42px; transition:width .5s var(--ease-out); }
.viz .st-share { font-size:12px; color:var(--muted); white-space:nowrap; }
.viz .st-share b { color:var(--ink2); }
/* Bloc tableau « table-card » — pattern de référence (analyse.html), généralisé
hors du namespace .viz pour servir TOUTES les pages de listes (sélecteur nu
ajouté à côté de .viz, non destructif pour analyse.html). */
.viz .table-card, .table-card { background:var(--paper2); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); overflow:hidden; }
.viz .table-toolbar, .table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 20px; border-bottom:1px solid var(--border); flex-wrap:wrap; }
.viz .table-toolbar .tt-title, .table-toolbar .tt-title { font-size:16px; font-weight:700; display:flex; align-items:center; gap:9px; color:var(--ink); }
.viz .table-toolbar .tt-title .pi, .table-toolbar .tt-title .pi { width:18px; height:18px; color:var(--rust); flex-shrink:0; }
/* Compteur (ex. « 386 tours ») rendu dans le titre du bloc */
.table-toolbar .tt-count { font-family:var(--font-mono); font-weight:600; font-size:13px; color:var(--muted); }
/* Actions à droite de la barre : tri, bascule grille/liste, export */
.table-toolbar .tt-actions { display:flex; align-items:center; gap:10px; margin-left:auto; flex-wrap:wrap; }
.viz .table-scroll, .table-scroll { overflow-x:auto; }
.viz table.data, table.data { width:100%; border-collapse:collapse; font-size:13.5px; min-width:680px; }
.viz table.data th, table.data th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:var(--muted2); font-weight:700; padding:11px 18px; border-bottom:1px solid var(--border); white-space:nowrap; user-select:none; }
.viz table.data th[data-sort], table.data th[data-sort] { cursor:pointer; }
.viz table.data th[data-sort]:hover, table.data th[data-sort]:hover { color:var(--ink); }
.viz table.data th.num, table.data th.num { text-align:right; }
.viz table.data th .sort-ar, table.data th .sort-ar { opacity:.9; font-size:9px; margin-left:3px; }
.viz table.data td, table.data td { padding:13px 18px; border-bottom:1px solid var(--border); color:var(--ink); }
.viz table.data tr:last-child td, table.data tr:last-child td { border-bottom:none; }
.viz table.data tbody tr:hover, table.data tbody tr:hover { background:var(--paper); }
.viz table.data .co, table.data .co { font-weight:600; }
.viz table.data .co a:hover, table.data .co a:hover { color:var(--rust); }
.viz table.data .num, table.data .num { font-family:var(--font-mono); font-weight:600; text-align:right; }
.viz .tag { font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; background:var(--paper); color:var(--ink2); border:1px solid var(--border); }
/* Lignes cliquables (pages de listes : la ligne entière mène à la fiche) */
table.data tbody tr.is-clickable, table.data tbody tr[onclick] { cursor:pointer; }
/* Variante « fit » : tableaux dans des cartes étroites (fiches startup/fond/personne)
— même style que table.data mais sans largeur mini forcée (pas de scroll inutile). */
table.data.fit { min-width:0; font-size:13px; }
table.data.fit th { padding:9px 12px; }
table.data.fit td { padding:10px 12px; }
/* Variante vue grille : la grille de cartes vit dans le bloc, sans scroll horizontal */
.table-card.is-grid { overflow:visible; }
.table-card .tc-body { padding:14px; }
@media(max-width:768px){ .table-card .tc-body { padding:10px; }}
/* Fond légèrement creusé (--paper, ton de la page) sous la grille pour que les
tuiles blanches (--paper2) ressortent, tout en restant dans le bloc. La barre
d'en-tête .table-toolbar garde le blanc de la carte → effet « panneau ». */
.table-card > .startups-grid,
.table-card > .fonds-grid,
.table-card > .list-grid { background:var(--paper); }
.viz .muted-note { font-size:12.5px; color:var(--muted2); padding:18px 4px; text-align:center; }
.viz .skel { color:var(--muted2); }
@media (max-width:980px){ .viz .kpis { grid-template-columns:repeat(2,1fr); } .viz .div-row { grid-template-columns:96px 1fr 54px; }}
@media (max-width:720px){ .viz .kpis, .viz .cols-2 { grid-template-columns:1fr; } .viz .filter-grid { gap:14px 18px; } .viz .st-row { grid-template-columns:64px 1fr; }}
/* ════════════════════════════════════════════════════════════════
68. PAGES DE LISTES — système partagé (filtres latéraux, cartes,
badges, tableau liste, panneau de tags avancés)
Auparavant dupliqué et divergent dans le