/* ============================================================ L'Action Privilégiée — "Le Pupitre" design system Shared stylesheet for all pages. Ported from the 2026-07 design comps. Palette: navy ink + cream paper + gold accent. Fonts (IBM Plex) are loaded per-page via in . ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #16233d; /* primary dark: text, strong borders, ticker/tools bg */ --ink-hover: #0f1a30; --paper: #f4f2ec; /* page background (cream) */ --card: #fbfaf7; /* raised card / console background */ --panel: #eef1f6; /* inset panel / table zebra / console header */ --gold: #b07d1a; /* kickers, links on hover */ --gold-bright: #d3a12e; /* numbers, accent underlines, star glyphs */ --muted: #4a5568; --muted-2: #5a6577; --muted-3: #7a8296; --green: #2f7d52; --green-bright:#5fb07f; --link: #2a5bd7; --red: #c0392b; --line: rgba(22, 35, 61, .12); --line-2: rgba(22, 35, 61, .18); --line-3: rgba(22, 35, 61, .28); --serif: 'IBM Plex Serif', Georgia, 'Times New Roman', serif; --sans: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', 'SF Mono', Consolas, monospace; --maxw: 1160px; --maxw-wide: 1280px; } html, body { max-width: 100%; overflow-x: hidden; } body { font-family: var(--sans); background: var(--paper); color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: inherit; } /* ── Layout containers ─────────────────────────────────────── */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 40px; } .wrap-wide { max-width: var(--maxw-wide); margin: 0 auto; padding: 0 40px; } /* ── Typographic helpers ───────────────────────────────────── */ .kicker { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); } h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; } .serif { font-family: var(--serif); } .mono { font-family: var(--mono); } .tnum { font-variant-numeric: tabular-nums; } /* ── Rates ticker (top band) ───────────────────────────────── */ .ticker { background: var(--ink); color: #eef1f6; } .ticker-inner { max-width: var(--maxw); margin: 0 auto; padding: 8px 40px; display: flex; align-items: center; gap: 26px; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; flex-wrap: wrap; } .ticker-label { color: #8b97ad; font-weight: 600; letter-spacing: .16em; } .ticker-item { display: flex; gap: 8px; } .ticker-item .lbl { color: #9aa6bc; } .ticker-item .val { color: var(--green-bright); font-weight: 600; } .ticker-item .val.gold { color: var(--gold-bright); } .ticker-mail { margin-left: auto; color: #9aa6bc; text-decoration: none; } .ticker-mail:hover { color: #eef1f6; } .ticker-date { color: #5f6b82; } /* ── Header / nav ──────────────────────────────────────────── */ .site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 30; } .site-header-inner { max-width: var(--maxw-wide); margin: 0 auto; padding: 16px 40px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .brand { font-family: var(--serif); font-weight: 600; font-size: 20px; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; color: var(--ink); } .main-nav { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 9px 15px; font-size: 13px; font-weight: 500; color: var(--muted); white-space: nowrap; } .main-nav a { text-decoration: none; transition: color .14s; } .main-nav a:hover { color: var(--gold); } .main-nav a.active { color: var(--ink); font-weight: 600; } /* ── Buttons ───────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: 7px; background: var(--ink); color: #fff; text-decoration: none; font-weight: 600; font-size: 14.5px; padding: 13px 22px; border-radius: 8px; border: none; cursor: pointer; transition: background .16s; } .btn:hover { background: var(--ink-hover); } .btn-outline { display: inline-flex; align-items: center; gap: 7px; background: transparent; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 14px; padding: 12px 20px; border: 1.5px solid var(--ink); border-radius: 8px; transition: background .16s, color .16s; } .btn-outline:hover { background: var(--ink); color: #fff; } .pill { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 12px; color: var(--muted-2); border: 1px solid var(--line-2); border-radius: 99px; padding: 8px 13px; } .pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green-bright); display: inline-block; } /* ── Cards / panels ────────────────────────────────────────── */ .panel { border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); } .panel-inset { border: 1px solid var(--line-2); border-radius: 11px; background: var(--card); } .section-band { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tools-band { background: var(--ink); color: #eef1f6; } /* ── Chips (filters) ───────────────────────────────────────── */ .chip { display: inline-flex; align-items: center; font-family: var(--sans); font-size: 13px; font-weight: 500; padding: 7px 14px; border-radius: 99px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink); cursor: pointer; transition: background .14s, color .14s; } .chip:hover { background: var(--panel); } .chip.active { background: var(--ink); color: #fff; } /* Type badges (share types) */ .type-badge { font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 3px 10px; white-space: nowrap; border: 1px solid; } .type-reset { color: var(--muted-2); background: var(--panel); border-color: var(--line-2); } .type-var { color: var(--green); background: #e7f2ec; border-color: rgba(47,125,82,.3); } .type-perp { color: var(--gold); background: #f7efdf; border-color: rgba(176,125,26,.35); } /* ── Data table ────────────────────────────────────────────── */ .data-frame { border: 1.5px solid var(--ink); border-radius: 12px; overflow: hidden; background: var(--card); } .data-scroll { overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; font-variant-numeric: tabular-nums; } .data-table thead th { background: var(--ink); color: #eef1f6; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 13px 18px; text-align: right; white-space: nowrap; position: sticky; top: 0; z-index: 2; } .data-table thead th.left { text-align: left; } .data-table td { padding: 13px 18px; text-align: right; } .data-table td.left { text-align: left; } .data-table tbody tr.row { border-bottom: 1px solid rgba(22,35,61,.09); transition: background .12s; } .data-table tbody tr.row:hover { background: var(--panel); } .data-table .num { font-family: var(--mono); } .data-table .dim { color: var(--muted-2); } /* Issuer group header rows */ .group-head td { background: var(--panel); border-top: 1.5px solid var(--line-2); } .group-code { font-family: var(--mono); font-weight: 600; font-size: 14px; } .group-name { font-family: var(--serif); font-weight: 600; font-size: 16px; color: var(--link); margin-left: 8px; } .group-count { font-family: var(--mono); font-size: 12px; color: var(--muted-3); margin-left: 8px; } .group-meta { font-weight: 600; font-size: 13px; color: var(--link); } .group-desc { font-size: 13px; color: var(--muted-2); } /* ── Search input ──────────────────────────────────────────── */ .search { width: 100%; height: 44px; padding: 0 15px; border: 1.5px solid var(--line-3); border-radius: 9px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: var(--card); outline: none; transition: border-color .12s, box-shadow .12s; } .search:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,125,26,.14); } input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(176,125,26,.14); } /* ── Chart frame (Plotly mounts) ───────────────────────────── */ .chart-frame { border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); overflow: hidden; } .chart-frame-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 14px 18px; border-bottom: 1.5px solid var(--ink); background: var(--panel); } .chart-frame-title { font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-2); } .chart-mount { padding: 20px 18px; } /* ── Prose (methodologie / glossaire) ──────────────────────── */ .prose { max-width: 760px; } .prose p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 16px; } .prose h2 { font-size: 26px; margin: 40px 0 14px; } .prose h3 { font-size: 19px; margin: 26px 0 8px; } .prose a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; } .prose ul, .prose ol { margin: 0 0 16px 22px; } .prose li { font-size: 16px; line-height: 1.7; color: var(--muted); margin-bottom: 6px; } /* ── Footer ────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--line); margin-top: 52px; } .site-footer-inner { max-width: var(--maxw); margin: 0 auto; padding: 26px 40px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .site-footer .brand-sm { font-family: var(--serif); font-weight: 600; font-size: 15px; } .site-footer .sources { font-family: var(--mono); font-size: 12px; color: var(--muted-2); } .site-footer a { color: var(--link); } /* ── Responsive ────────────────────────────────────────────── */ @media (max-width: 900px) { .wrap, .wrap-wide { padding: 0 22px; } .ticker-inner, .site-header-inner, .site-footer-inner { padding-left: 22px; padding-right: 22px; } } @media (max-width: 720px) { .site-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; } .main-nav { justify-content: flex-start; } .ticker-mail { margin-left: 0; } .wrap, .wrap-wide { padding: 0 16px; } .ticker-inner, .site-header-inner, .site-footer-inner { padding-left: 16px; padding-right: 16px; } .data-table { font-size: 12px; } .data-table thead th, .data-table td { padding: 10px 10px; } }