/* ════════════════════════════════════════════════════════════════════ bourso.tn - Nouveau design (hybride Nasdaq / Euronext) Quatre apparences : A claire (défaut), B graphique d'abord, C sombre dense, D actualités au centre. Chargé après myceatn.css. Vert et rouge sont réservés aux hausses et aux baisses. ════════════════════════════════════════════════════════════════════ */ /* L'attribut hidden l'emporte toujours sur les classes qui fixent display (.btn, images…) : un élément masqué par le script ne réapparaît jamais (bouton « Réessayer » affiché hors erreur, aperçu vide de l'import). */ [hidden] { display: none !important; } /* ─── 1. Jetons ──────────────────────────────────────────────────────── */ html[data-apparence] { --bx-font: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif; --bx-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --bx-bg: #F3F5F8; --bx-surface: #FFFFFF; --bx-surface-2: #F7F9FB; --bx-border: #E3E8EE; --bx-line: #EDF1F5; --bx-head: #DDE3EA; --bx-text: #0B1A2E; --bx-muted: #5A6B82; --bx-muted-2: #4A5D72; --bx-navy: #08244E; --bx-navy-2: #0D2C5C; --bx-navy-3: #11346B; --bx-navy-line: #23477F; --bx-on-navy: #FFFFFF; --bx-on-navy-muted: #C9D4E3; --bx-on-navy-faint: #8FA7C4; --bx-accent: #0070C9; --bx-accent-h: #00508F; --bx-accent-soft: #EEF4FB; --bx-cyan: #00B4E6; --bx-cyan-soft: #7FD3F5; --bx-up: #0F7B45; --bx-down: #C8102E; --bx-flat: #5A6B82; --bx-up-dk: #5FD39A; --bx-down-dk: #FF5147; /* baisse sur fond marine : rouge franc (pas rose), contraste 4,75:1 */ --bx-live-open: #2BC48A; --bx-live-closed: #E5484D; --bx-max: 1320px; --bx-gutter: 24px; } html[data-apparence="b"] { --bx-bg: #EEF2F6; } html[data-apparence="c"] { --bx-bg: #0A1628; --bx-surface: #0F1E33; --bx-surface-2: #13243D; --bx-border: #1C3150; --bx-line: #1A2C47; --bx-head: #24395A; --bx-text: #E6EDF5; --bx-muted: #8FA7C4; --bx-muted-2: #A9BBD0; --bx-navy: #07111F; --bx-navy-2: #0F1E33; --bx-navy-3: #0F1E33; --bx-navy-line: #1C3150; --bx-accent: #00B4E6; --bx-accent-h: #7FD3F5; --bx-accent-soft: #10263F; --bx-up: #2BC48A; --bx-down: #FF5C6C; --bx-flat: #8FA7C4; --bx-up-dk: #2BC48A; --bx-down-dk: #FF5147; } /* Raccord avec les variables historiques : toutes les pages existantes prennent la palette du nouveau design sans être réécrites. */ html[data-apparence][data-theme] { --bleu-marine: var(--bx-bg); --bleu-ardoise: var(--bx-surface); --surface-card: var(--bx-surface); --bordure: var(--bx-border); --blanc-pur: var(--bx-text); --blanc-casse: var(--bx-text); --gris-texte: var(--bx-muted); --vert-finance: var(--bx-accent); --vert-clair: var(--bx-accent-h); --rouge-corail: var(--bx-down); --theme-bg: var(--bx-bg); --theme-surface: var(--bx-surface); --theme-surface-2: var(--bx-surface-2); --theme-text: var(--bx-text); --theme-muted: var(--bx-muted); --theme-border: var(--bx-border); --theme-hover: var(--bx-accent-soft); --theme-shadow: transparent; --font-corps: var(--bx-font); --font-titres: var(--bx-font); --font-chiffres: var(--bx-mono); --radius: 2px; --radius-lg: 2px; --main-accent-color: var(--bx-accent); } /* ─── 2. Base ────────────────────────────────────────────────────────── */ html[data-apparence] body { font-family: var(--bx-font) !important; background: var(--bx-bg) !important; color: var(--bx-text) !important; } html[data-apparence] h1, html[data-apparence] h2, html[data-apparence] h3, html[data-apparence] .font-heading { font-family: var(--bx-font) !important; letter-spacing: 0; } html[data-apparence] .font-mono, html[data-apparence] .bx-mono { font-family: var(--bx-mono) !important; } html[data-apparence] a:focus-visible, html[data-apparence] button:focus-visible, html[data-apparence] input:focus-visible, html[data-apparence] select:focus-visible, html[data-apparence] textarea:focus-visible, html[data-apparence] [tabindex]:focus-visible { outline: 2px solid var(--bx-accent) !important; outline-offset: 2px; box-shadow: none !important; } .bx-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .bx-skip { position: absolute; left: -9999px; top: 8px; z-index: 200; background: var(--bx-navy); color: #FFF; padding: 8px 14px; } .bx-skip:focus { left: 8px; } .ui-variant-badge { display: none !important; } .bx-wrap { max-width: var(--bx-max); margin: 0 auto; padding: 0 var(--bx-gutter); width: 100%; box-sizing: border-box; } html.bx-drawer-lock, html.bx-drawer-lock body { overflow: hidden; } /* ─── 3. En-tête ─────────────────────────────────────────────────────── */ .bx-header { position: sticky; top: 0; z-index: 60; font-family: var(--bx-font); } .bx-bar { background: #FFFFFF; border-bottom: 1px solid #DDE3EA; } .bx-bar-inner { display: flex; align-items: center; gap: 14px; height: 64px; position: relative; } .bx-logo { display: flex; align-items: center; flex-shrink: 0; } .bx-logo img { height: 24px; width: auto; display: block; } .bx-spacer { flex: 1 1 auto; min-width: 8px; } .bx-burger, .bx-icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; min-width: 38px; padding: 0 9px; background: transparent; border: 1px solid transparent; color: inherit; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; border-radius: 0; } .bx-burger { margin-left: -9px; } .bx-nav { display: flex; align-items: center; gap: 2px; white-space: nowrap; } .bx-nav-link { display: inline-flex; align-items: center; height: 64px; padding: 0 9px; font-size: 14px; font-weight: 500; color: #4A5D72; text-decoration: none; border-bottom: 2px solid transparent; border-top: 2px solid transparent; } .bx-nav-link:hover { color: #0B1A2E; } .bx-nav-link.is-active { color: #0B1A2E; font-weight: 700; border-bottom-color: #0070C9; } /* Sous-menus (Bourse, CEA, Premiers pas) */ .bx-nav-groupe { position: relative; display: inline-flex; } .bx-nav-ouvrir { gap: 5px; background: none; border-left: 0; border-right: 0; cursor: pointer; font-family: inherit; } .bx-nav-ouvrir svg { opacity: .65; transition: transform .15s; } .bx-nav-groupe.is-open .bx-nav-ouvrir svg { transform: rotate(180deg); } .bx-nav-sous { display: none; position: absolute; top: 100%; left: 0; z-index: 60; min-width: 210px; padding: 6px 0; background: var(--bx-surface, #FFFFFF); border: 1px solid var(--bx-border, #E3E8EE); box-shadow: 0 12px 28px rgba(11, 31, 58, .14); } .bx-nav-groupe.is-open .bx-nav-sous { display: block; } @media (hover: hover) { .bx-nav-groupe:hover .bx-nav-sous { display: block; } } .bx-nav-sous a { display: block; padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--bx-text, #0B1A2E) !important; text-decoration: none; white-space: nowrap; } .bx-nav-sous a:hover { background: var(--bx-surface-2, #F7F9FB); } .bx-nav-sous a.is-active { font-weight: 700; color: var(--bx-accent, #0070C9) !important; } .bx-drawer-nav a.is-active { font-weight: 700; } .bx-search { position: relative; display: flex; align-items: center; gap: 8px; flex: 0 1 230px; min-width: 170px; height: 38px; padding: 0 8px 0 11px; background: #F1F4F8; border: 1px solid #DDE3EA; color: #5A6B82; } .bx-search:focus-within { border-color: #0070C9; } html[data-apparence][data-theme] .bx-search .bx-search-input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; outline: none !important; font: inherit; font-size: 13px; color: #0B1A2E !important; padding: 0 !important; box-shadow: none !important; } .bx-search-input::-webkit-search-cancel-button { display: none; } .bx-kbd { font-family: var(--bx-mono); font-size: 11px; color: #4A5D72; border: 1px solid #C9D3DF; padding: 1px 6px; white-space: nowrap; background: transparent; } .bx-search-results.global-search-results { top: calc(100% + 6px); left: 0; right: auto; width: max(100%, 380px); border-radius: 0 !important; background: #FFFFFF !important; border: 1px solid #DDE3EA !important; box-shadow: 0 12px 32px rgba(11,31,58,.14) !important; } .bx-search-trigger { display: none; } .bx-live { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; flex-shrink: 0; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; background: #08244E; color: #FFFFFF; border: 1px solid #08244E; } .bx-live:hover { color: #FFFFFF; background: #11346B; } .bx-live-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--bx-live-closed); } .bx-live.is-open .bx-live-dot { background: var(--bx-live-open); animation: bx-blink 1.4s ease-in-out infinite; } .bx-live.is-closed .bx-live-dot { background: var(--bx-live-closed); animation: none; } @keyframes bx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: reduce) { .bx-live.is-open .bx-live-dot { animation-duration: 3s; } } .bx-install { border-color: #DDE3EA; color: #0B1A2E; } .bx-install:hover { border-color: #0B1A2E; } .bx-install-label { display: none; } .bx-account { display: inline-flex; align-items: center; gap: 8px; height: 38px; flex-shrink: 0; font-size: 14px; font-weight: 600; color: #0B1A2E; text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; } .bx-account.is-active { border-bottom-color: #0070C9; } .bx-avatar { width: 28px; height: 28px; border-radius: 50%; background: #08244E; color: #FFFFFF; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; } .bx-avatar--lg { width: 40px; height: 40px; font-size: 15px; } /* B : en-tête bleu nuit */ .bx-header--b .bx-bar { background: #0B1A2E; border-bottom-color: #0B1A2E; color: #FFFFFF; } .bx-header--b .bx-logo img, .bx-header--c .bx-logo img { filter: brightness(0) invert(1); } .bx-header--b .bx-nav-link { color: #C9D4E3; } .bx-header--b .bx-nav-link:hover, .bx-header--b .bx-nav-link.is-active { color: #FFFFFF; } .bx-header--b .bx-nav-link.is-active { border-bottom-color: #00B4E6; } .bx-header--b .bx-search { background: #11346B; border-color: #2A4A70; color: #8FA7C4; } html[data-apparence][data-theme] .bx-header--b .bx-search .bx-search-input { color: #FFFFFF !important; } .bx-header--b .bx-search-input::placeholder { color: #8FA7C4; } .bx-header--b .bx-kbd { color: #C9D4E3; border-color: #2A4A70; } .bx-header--b .bx-live { background: transparent; border-color: #3E5F86; } .bx-header--b .bx-live:hover { border-color: #C9D4E3; background: transparent; } .bx-header--b .bx-install { border-color: #2A4A70; color: #FFFFFF; } .bx-header--b .bx-account { color: #FFFFFF; } .bx-header--b .bx-avatar { background: #FFFFFF; color: #08244E; } .bx-header--b .bx-account.is-active { border-bottom-color: #00B4E6; } /* C : en-tête sombre */ .bx-header--c .bx-bar { background: #07111F; border-bottom-color: #1A2C47; color: #E6EDF5; } .bx-header--c .bx-nav-link { color: #8FA7C4; } .bx-header--c .bx-nav-link:hover, .bx-header--c .bx-nav-link.is-active { color: #FFFFFF; } .bx-header--c .bx-nav-link.is-active { border-bottom-color: #00B4E6; } .bx-header--c .bx-search { background: #0F1E33; border-color: #1C3150; color: #6F88A8; } html[data-apparence][data-theme] .bx-header--c .bx-search .bx-search-input { color: #E6EDF5 !important; } .bx-header--c .bx-search-input::placeholder { color: #6F88A8; } .bx-header--c .bx-kbd { color: #8FA7C4; border-color: #1C3150; } .bx-header--c .bx-live { background: #00B4E6; border-color: #00B4E6; color: #04121F; } .bx-header--c .bx-live:hover { background: #7FD3F5; color: #04121F; } .bx-header--c .bx-live.is-closed .bx-live-dot { background: #C8102E; } .bx-header--c .bx-install { border-color: #1C3150; color: #E6EDF5; } .bx-header--c .bx-account { color: #E6EDF5; } .bx-header--c .bx-avatar { background: #00B4E6; color: #04121F; } .bx-header--c .bx-account.is-active { border-bottom-color: #00B4E6; } html[data-apparence="c"] .bx-search-results.global-search-results { background: #0F1E33 !important; border-color: #1C3150 !important; } /* D : deux rangées, grande recherche */ .bx-header--d .bx-bar-inner { height: 72px; gap: 22px; } .bx-header--d .bx-logo img { height: 28px; } .bx-header--d .bx-search { flex: 0 1 520px; height: 44px; font-size: 15px; } html[data-apparence][data-theme] .bx-header--d .bx-search .bx-search-input { font-size: 15px; } .bx-header--d .bx-live { background: #FFFFFF; color: #08244E; border-color: #08244E; } .bx-header--d .bx-live:hover { background: #F1F4F8; color: #08244E; } .bx-header--d .bx-search { order: 0; } .bx-navrow { background: #0B1A2E; } .bx-nav--row { height: 46px; gap: 0; } .bx-nav--row .bx-nav-link { height: 46px; padding: 0 16px; font-size: 15px; color: #C9D4E3; border-bottom-width: 3px; } .bx-nav--row .bx-nav-link:hover { color: #FFFFFF; } .bx-nav--row .bx-nav-link.is-active { color: #FFFFFF; border-bottom-color: #00B4E6; } /* Responsive en-tête */ @media (max-width: 1359px) { .bx-header:not(.bx-header--d) .bx-search { display: none; } .bx-header:not(.bx-header--d) .bx-search.is-open { display: flex; position: absolute; left: var(--bx-gutter); right: var(--bx-gutter); top: calc(100% + 8px); flex: none; height: 46px; z-index: 70; box-shadow: 0 10px 28px rgba(11,31,58,.16); background: #FFFFFF; } .bx-header--b .bx-search.is-open { background: #11346B; } .bx-header--c .bx-search.is-open { background: #0F1E33; } .bx-header:not(.bx-header--d) .bx-search-trigger { display: inline-flex; } } @media (max-width: 1179px) { .bx-bar-inner > .bx-nav { display: none; } .bx-navrow { display: none; } } @media (max-width: 899px) { .bx-header--d .bx-search { display: none; } .bx-header--d .bx-search.is-open { display: flex; position: absolute; left: var(--bx-gutter); right: var(--bx-gutter); top: calc(100% + 8px); flex: none; z-index: 70; box-shadow: 0 10px 28px rgba(11,31,58,.16); } .bx-header--d .bx-search-trigger { display: inline-flex; } .bx-header--d .bx-bar-inner { height: 64px; } } @media (max-width: 767px) { html[data-apparence] { --bx-gutter: 16px; } .bx-bar-inner { gap: 8px; height: 58px !important; } .bx-logo img { height: 22px !important; } .bx-account-label { display: none; } .bx-kbd { display: none; } .bx-live { padding: 0 10px; height: 34px; font-size: 13px; } .bx-search-results.global-search-results { width: 100%; } } /* Petits téléphones : logo « bourso.tn » un peu plus petit pour que l'en-tête tienne sur une ligne */ @media (max-width: 420px) { .bx-bar-inner { gap: 6px; } .bx-logo img { height: 18px !important; } .bx-live { padding: 0 8px; } } @media (min-width: 1500px) { .bx-install-label { display: inline; } } /* ─── 4. Menu latéral (tiroir) ───────────────────────────────────────── */ .bx-drawer-backdrop { position: fixed; inset: 0; background: rgba(7,17,31,.45); z-index: 90; } .bx-drawer-backdrop[hidden] { display: none; } .bx-drawer { position: fixed; top: 0; bottom: 0; left: 0; width: min(340px, 88vw); z-index: 95; background: #08244E; color: #FFFFFF; transform: translateX(-102%); transition: transform .22s ease; display: flex; flex-direction: column; font-family: var(--bx-font); visibility: hidden; } .bx-drawer.is-open { transform: none; visibility: visible; } @media (prefers-reduced-motion: reduce) { .bx-drawer { transition: none; } } .bx-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #23477F; } .bx-drawer-head img { height: 22px; filter: brightness(0) invert(1); } .bx-drawer-head .bx-icon-btn { color: #FFFFFF; } .bx-drawer-body { overflow-y: auto; padding: 16px 18px 28px; flex: 1; } .bx-drawer-user { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; } .bx-drawer-user .bx-avatar { background: #FFFFFF; color: #08244E; } .bx-drawer-user b { display: block; font-size: 15px; } .bx-drawer-user span { font-size: 12px; color: #8FA7C4; } .bx-drawer-title { margin: 20px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #8FA7C4; } /* Un trait sépare chaque partie du menu (comme sous le nom de l'utilisateur) */ .bx-drawer-body .bx-drawer-title { margin-top: 16px; padding-top: 16px; border-top: 1px solid #23477F; } .bx-drawer-body > .bx-drawer-title:first-child, .bx-drawer-user + .bx-drawer-title { margin-top: 4px; padding-top: 0; border-top: 0; } .bx-drawer-logout { border-top: 1px solid #23477F; padding-top: 16px; } .bx-drawer-nav { display: flex; flex-direction: column; } .bx-drawer-nav a, .bx-drawer-nav .bx-nav-link { display: block; height: auto; padding: 9px 10px; font-size: 15px; font-weight: 500; color: #C9D4E3 !important; text-decoration: none; border: 0; } .bx-drawer-nav a:hover, .bx-drawer-nav .bx-nav-link.is-active { color: #FFFFFF !important; background: #11346B; } .bx-drawer-cta { display: grid; gap: 8px; } html[data-apparence] .bx-drawer-cta .bx-btn--primary { background: #FFFFFF !important; border-color: #FFFFFF !important; color: var(--bx-navy) !important; } /* sur le fond marine du menu */ /* Déconnexion : même lien dans le menu mobile et dans la colonne de l'espace, de la couleur des autres liens */ .bx-drawer-logout, .bx-side-logout { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 9px 10px; color: #C9D4E3 !important; font-size: 14px; font-weight: 500; text-decoration: none; } .bx-drawer-logout svg, .bx-side-logout svg { width: 18px; height: 18px; flex: 0 0 auto; color: #8FA7C4; } .bx-drawer-logout:hover, .bx-side-logout:hover { color: #FFFFFF !important; background: #0D2C5C; } [data-pwa-install-bloc][hidden] { display: none !important; } @media (display-mode: standalone) { [data-pwa-install-bloc] { display: none !important; } } .bx-drawer .bx-btn--ghost { color: #FFFFFF !important; border-color: #3E5F86; } .bx-drawer .bx-btn--ghost:hover { border-color: #FFFFFF; } /* ─── 5. Bandeau des cours ───────────────────────────────────────────── */ html[data-apparence] body .bx-ticker { display: flex; align-items: stretch; height: 42px; overflow: hidden; font-family: var(--bx-font); background: var(--bx-bandeau, #174B87); color: #FFFFFF; border-bottom: 1px solid var(--bx-bandeau-line, #2E63A3); font-size: 13px; position: relative; z-index: 1; } html[data-apparence] body .bx-ticker-label { display: flex; align-items: center; gap: 8px; padding: 0 18px 0 max(var(--bx-gutter), calc((100vw - var(--bx-max)) / 2 + var(--bx-gutter))); font-weight: 700; white-space: nowrap; border-right: 1px solid #1F2D42; flex-shrink: 0; } html[data-apparence] body .bx-ticker-label small { font-size: 11px; font-weight: 500; color: #8FA7C4; } html[data-apparence] body .bx-ticker-viewport { flex: 1; overflow: hidden; display: flex; align-items: center; min-width: 0; } html[data-apparence] body .bx-ticker .ticker-track { display: flex; align-items: center; white-space: nowrap; } html[data-apparence] body .bx-ticker .ticker-item { display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; height: 42px; text-decoration: none; border-left: 0 !important; border-right: 1px solid var(--bx-bandeau-line, #2E63A3); background: transparent !important; } html[data-apparence] body .bx-ticker .ticker-sym { font-weight: 700; color: #FFFFFF !important; letter-spacing: 0; } html[data-apparence] body .bx-ticker .ticker-prix { font-family: var(--bx-mono); color: #FFFFFF !important; font-weight: 500; } html[data-apparence][data-theme] body .bx-ticker .ticker-var { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; font-size: 13px; font-weight: 600; border-radius: 0; } html[data-apparence][data-theme] body .bx-ticker .ticker-item::before, html[data-apparence][data-theme] body .bx-ticker .ticker-item::after { content: none !important; } html[data-apparence][data-theme] body .bx-ticker .ticker-var.up { color: #5FD39A !important; } html[data-apparence][data-theme] body .bx-ticker .ticker-var.down { color: var(--bx-down-dk) !important; } html[data-apparence][data-theme] body .bx-ticker .ticker-var.flat { color: #8FA7C4 !important; } html[data-apparence] body .bx-ticker .ticker-item:hover .ticker-sym { text-decoration: underline; } html[data-apparence] body .bx-ticker-maj { display: flex; align-items: center; gap: 8px; padding: 0 max(var(--bx-gutter), calc((100vw - var(--bx-max)) / 2 + var(--bx-gutter))) 0 16px; border-left: 1px solid var(--bx-bandeau-line, #2E63A3); white-space: nowrap; flex-shrink: 0; } html[data-apparence] body .bx-ticker .ticker-maj-label { color: #8FA7C4 !important; font-size: 12px; } html[data-apparence] body .bx-ticker .ticker-maj-time { color: #FFFFFF !important; font-family: var(--bx-mono); font-size: 12px; } html[data-apparence="b"] body .bx-ticker, html[data-apparence="d"] body .bx-ticker { background: #FFFFFF; color: #0B1A2E; border-bottom-color: #DDE3EA; } /* Source des cours muette pendant la séance (templates/header.php) : fond teinté ambre, ni rouge ni vert (réservés aux variations) */ .bx-cours-muets { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; background: #FEF3C7; color: #5B3A06; font-size: 13.5px; line-height: 1.45; border-bottom: 1px solid #F3DFA2; } .bx-cours-muets svg { flex-shrink: 0; margin-top: 2px; } @media (min-width: 768px) { .bx-cours-muets { justify-content: center; } } html[data-apparence="c"] .bx-cours-muets { background: #3A2E12; color: #F6E3B0; border-bottom-color: #4D3D18; } html[data-apparence="b"] body .bx-ticker-label, html[data-apparence="d"] body .bx-ticker-label, html[data-apparence="b"] body .bx-ticker-maj, html[data-apparence="d"] body .bx-ticker-maj, html[data-apparence="b"] body .bx-ticker .ticker-item, html[data-apparence="d"] body .bx-ticker .ticker-item { border-color: #DDE3EA; } html[data-apparence="b"] body .bx-ticker .ticker-sym, html[data-apparence="d"] body .bx-ticker .ticker-sym, html[data-apparence="b"] body .bx-ticker .ticker-prix, html[data-apparence="d"] body .bx-ticker .ticker-prix, html[data-apparence="b"] body .bx-ticker .ticker-maj-time, html[data-apparence="d"] body .bx-ticker .ticker-maj-time { color: #0B1A2E !important; } html[data-apparence="b"] body .bx-ticker-label small, html[data-apparence="d"] body .bx-ticker-label small, html[data-apparence="b"] body .bx-ticker .ticker-maj-label, html[data-apparence="d"] body .bx-ticker .ticker-maj-label { color: #5A6B82 !important; } html[data-apparence="b"][data-theme] body .bx-ticker .ticker-var.up, html[data-apparence="d"][data-theme] body .bx-ticker .ticker-var.up { color: #0F7B45 !important; } html[data-apparence="b"][data-theme] body .bx-ticker .ticker-var.down, html[data-apparence="d"][data-theme] body .bx-ticker .ticker-var.down { color: #C8102E !important; } html[data-apparence="b"][data-theme] body .bx-ticker .ticker-var.flat, html[data-apparence="d"][data-theme] body .bx-ticker .ticker-var.flat { color: #5A6B82 !important; } html[data-apparence="c"] body .bx-ticker { background: #0B1728; border-bottom-color: #1A2C47; height: 40px; } html[data-apparence="c"] body .bx-ticker .ticker-item { height: 40px; border-color: #1A2C47; } html[data-apparence="c"] body .bx-ticker-label, html[data-apparence="c"] body .bx-ticker-maj { border-color: #1A2C47; } html[data-apparence="c"][data-theme] body .bx-ticker .ticker-var.up { color: #2BC48A !important; } html[data-apparence="c"][data-theme] body .bx-ticker .ticker-var.down { color: var(--bx-down-dk) !important; } @media (max-width: 767px) { .bx-ticker-label small, html[data-apparence] body .bx-ticker-maj { display: none; } .bx-ticker-label { padding-right: 12px; } } /* ─── 6. Composants communs ──────────────────────────────────────────── */ .bx-page { max-width: var(--bx-max); margin: 0 auto; padding: 26px var(--bx-gutter) 8px; box-sizing: border-box; font-family: var(--bx-font); color: var(--bx-text); } .bx-card { background: var(--bx-surface); border: 1px solid var(--bx-border); padding: 18px 22px; color: var(--bx-text); min-width: 0; } .bx-card--flush { padding: 0; } .bx-card--up { border-top: 4px solid var(--bx-up); } .bx-card--down { border-top: 4px solid var(--bx-down); } .bx-card--navy { border-top: 4px solid var(--bx-navy); } html[data-apparence="c"] .bx-card--navy { border-top-color: var(--bx-accent); } .bx-card--accent { border-top: 4px solid var(--bx-accent); } .bx-card--sky { border-top: 4px solid #4FA3E0; } .bx-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 8px; } .bx-h2 { margin: 0 !important; font-size: 14px !important; font-weight: 700 !important; letter-spacing: .12em; text-transform: uppercase; color: var(--bx-muted-2) !important; line-height: 1.3; } .bx-h2--up { color: var(--bx-up) !important; } .bx-h2--down { color: var(--bx-down) !important; } .bx-sub { font-size: 12px; color: var(--bx-muted); margin: -2px 0 8px; } .bx-more { font-size: 13px; font-weight: 600; color: var(--bx-accent) !important; text-decoration: none; white-space: nowrap; } .bx-more:hover { color: var(--bx-accent-h) !important; text-decoration: underline; } .bx-up { color: var(--bx-up) !important; } .bx-down { color: var(--bx-down) !important; } .bx-flat { color: var(--bx-flat) !important; } .bx-num { font-family: var(--bx-mono); font-variant-numeric: tabular-nums; } .bx-empty { padding: 18px 0; color: var(--bx-muted); font-size: 14px; } .bx-table { width: 100%; border-collapse: collapse; font-size: 14px; } .bx-table th { font-size: 12px; font-weight: 500; color: var(--bx-muted) !important; text-align: left; padding: 6px 0 8px !important; border-bottom: 1px solid var(--bx-head) !important; background: transparent !important; text-transform: none; letter-spacing: 0; } .bx-table td { padding: 10px 0 !important; border-bottom: 1px solid var(--bx-line) !important; vertical-align: middle; color: var(--bx-text); } .bx-table tr:last-child td { border-bottom: 0 !important; } .bx-table th + th, .bx-table td + td { padding-left: 10px !important; } .bx-table .r { text-align: right; } .bx-table .bx-val { font-weight: 600; color: var(--bx-text) !important; text-decoration: none; } .bx-table .bx-val:hover { color: var(--bx-accent) !important; } .bx-table .bx-val small { display: block; font-size: 12px; font-weight: 400; color: var(--bx-muted); } .bx-table tr[data-bx-href] { cursor: pointer; } .bx-table tr[data-bx-href]:hover td { background: var(--bx-surface-2); } .bx-table--dense { font-size: 13px; } .bx-table--dense td { padding: 7px 0 !important; } .bx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; font: inherit; font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; border-radius: 0; border: 1px solid transparent; white-space: nowrap; } .bx-btn--primary { background: var(--bx-navy); color: #FFFFFF !important; border-color: var(--bx-navy); } .bx-btn--primary:hover { background: #11346B; } html[data-apparence="c"] .bx-btn--primary { background: var(--bx-accent); color: #04121F !important; border-color: var(--bx-accent); } .bx-btn--blue { background: var(--bx-accent); color: #FFFFFF !important; border-color: var(--bx-accent); } .bx-btn--blue:hover { background: var(--bx-accent-h); } .bx-btn--ghost { background: transparent; color: var(--bx-text) !important; border-color: #C9D3DF; } .bx-btn--ghost:hover { border-color: var(--bx-text); } .bx-btn--block { width: 100%; } .bx-btn[hidden] { display: none !important; } .bx-ranges { display: flex; gap: 6px; flex-wrap: wrap; } .bx-range { font: inherit; font-size: 12px; font-weight: 600; padding: 4px 11px; cursor: pointer; border-radius: 0; background: transparent; color: var(--bx-muted-2); border: 1px solid #D3DBE5; } .bx-range.is-active { background: var(--bx-navy); color: #FFFFFF; border-color: var(--bx-navy); } html[data-apparence="c"] .bx-range { border-color: #1C3150; color: #8FA7C4; } html[data-apparence="c"] .bx-range.is-active { background: #00B4E6; color: #04121F; border-color: #00B4E6; } .bx-chart { position: relative; height: 190px; } .bx-chart canvas { width: 100% !important; height: 100% !important; } .bx-chart-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--bx-muted); font-size: 13px; } .bx-grid { display: grid; gap: 22px; } .bx-grid-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); } .bx-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bx-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bx-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .bx-stack { display: flex; flex-direction: column; gap: 22px; min-width: 0; } .bx-mt { margin-top: 22px; } @media (max-width: 899px) { .bx-grid-2-1, .bx-grid-3 { grid-template-columns: minmax(0, 1fr); } .bx-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .bx-grid-2, .bx-grid-4 { grid-template-columns: minmax(0, 1fr); } .bx-card { padding: 16px; } } /* Statut de séance, chiffres-clés */ .bx-status { background: var(--bx-navy); color: #FFFFFF; padding: 14px 16px; } html[data-apparence="c"] .bx-status { background: #07111F; border: 1px solid #1C3150; } .bx-status-time { font-size: 12px; color: #8FA7C4; font-family: var(--bx-mono); } .bx-status-label { font-size: 20px; font-weight: 700; margin-top: 2px; display: flex; align-items: center; gap: 10px; } .bx-status-sub { font-size: 13px; color: #C9D4E3; margin-top: 4px; } .bx-seance-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--bx-live-closed); flex-shrink: 0; } .is-open > .bx-seance-dot, .is-open .bx-seance-dot { background: var(--bx-live-open); animation: bx-blink 1.4s ease-in-out infinite; } .bx-live-link { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--bx-accent) !important; text-decoration: none; } .bx-live-link span:first-child { display: inline-flex; align-items: center; gap: 8px; } .bx-live-link:hover { text-decoration: underline; } .bx-kv { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 8px 0; border-bottom: 1px solid var(--bx-line); } .bx-kv:last-child { border-bottom: 0; } .bx-kv b { font-family: var(--bx-mono); font-weight: 600; } /* Actualités */ .bx-news-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--bx-line); text-decoration: none; } .bx-news-row:last-child { border-bottom: 0; } .bx-news-time { font-family: var(--bx-mono); font-size: 12px; color: var(--bx-muted); padding-top: 2px; } .bx-news-title { font-size: 15px; font-weight: 600; color: var(--bx-text); line-height: 1.35; } .bx-news-row:hover .bx-news-title { color: var(--bx-accent); } .bx-news-meta { font-size: 12px; color: var(--bx-muted); margin-top: 4px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .bx-tag { font-size: 11px; font-weight: 600; color: var(--bx-accent); border: 1px solid var(--bx-head); padding: 1px 6px; } .bx-news-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; } @media (max-width: 767px) { .bx-news-cols { grid-template-columns: minmax(0, 1fr); } } /* Outils */ .bx-tools { display: flex; flex-direction: column; gap: 12px; } .bx-tools--row { flex-direction: row; } .bx-tools--row > * { flex: 1; } @media (max-width: 767px) { .bx-tools--row { flex-direction: column; } } .bx-tool { display: block; background: var(--bx-surface); border: 1px solid var(--bx-border); padding: 16px 20px; text-decoration: none; color: var(--bx-text) !important; } .bx-tool b { display: block; font-size: 15px; } .bx-tool span { display: block; font-size: 13px; color: var(--bx-muted); margin-top: 3px; } .bx-tool:hover { border-color: var(--bx-accent); } .bx-tool--hl { background: var(--bx-accent); border-color: var(--bx-accent); color: #FFFFFF !important; } .bx-tool--hl span { color: #D6E8F7; } .bx-tool--hl:hover { background: var(--bx-accent-h); } html[data-apparence="c"] .bx-tool--hl { color: #04121F !important; } html[data-apparence="c"] .bx-tool--hl span { color: #04121F; } /* ─── 7. Accueil ─────────────────────────────────────────────────────── */ .bx-hero { font-family: var(--bx-font); } .bx-hero-inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 32px; padding-top: 34px; padding-bottom: 34px; } .bx-eyebrow { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; color: var(--bx-accent); display: flex; align-items: center; gap: 8px; } .bx-h1 { margin: 10px 0 0 !important; font-size: 38px !important; line-height: 1.15 !important; font-weight: 700 !important; color: var(--bx-text) !important; } .bx-index-card { background: var(--bx-surface-2); border: 1px solid var(--bx-border); padding: 20px 24px; margin-top: 18px; } .bx-index-top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .bx-index-name { font-size: 15px; font-weight: 600; color: var(--bx-muted-2); } .bx-index-value { font-family: var(--bx-mono); font-size: 34px; font-weight: 600; color: var(--bx-text); } .bx-index-var { font-size: 16px; font-weight: 600; } .bx-index-side { margin-left: auto; font-size: 13px; color: var(--bx-muted); } .bx-index-side b { font-family: var(--bx-mono); color: var(--bx-text); } .bx-index-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 14px 0 8px; flex-wrap: wrap; } .bx-index-tabs { display: flex; gap: 6px; } .bx-index-state { font-size: 12px; color: var(--bx-muted); } /* A : bandeau clair */ .bx-hero--a { background: #FFFFFF; border-bottom: 1px solid #DDE3EA; } /* B : bandeau bleu nuit, graphique d'abord */ .bx-hero--dark { background: #08244E; color: #FFFFFF; } .bx-hero--dark .bx-h1, .bx-hero--dark .bx-index-value { color: #FFFFFF !important; } .bx-hero--dark .bx-eyebrow { color: #7FD3F5; } .bx-hero--dark .bx-index-card { background: #0D2C5C; border-color: #23477F; } .bx-hero--dark .bx-index-name, .bx-hero--dark .bx-index-side { color: #C9D4E3; } .bx-hero--dark .bx-index-side b { color: #FFFFFF; } .bx-hero--dark .bx-index-state { color: #8FA7C4; } .bx-hero--dark .bx-up { color: #5FD39A !important; } .bx-hero--dark .bx-down { color: var(--bx-down-dk) !important; } .bx-hero--dark .bx-range { border-color: #2A4A70; color: #C9D4E3; } .bx-hero--dark .bx-range.is-active { background: #00B4E6; border-color: #00B4E6; color: #08244E; } .bx-hero--dark .bx-card { background: #0D2C5C; border-color: #23477F; color: #FFFFFF; } .bx-hero--dark .bx-table th { color: #8FA7C4 !important; border-bottom-color: #23477F !important; } .bx-hero--dark .bx-table td { color: #FFFFFF; border-bottom-color: #1C3A5E !important; } .bx-hero--dark .bx-table .bx-val { color: #FFFFFF !important; } .bx-hero--dark .bx-table .bx-val small, .bx-hero--dark .bx-sub, .bx-hero--dark .bx-muted { color: #8FA7C4 !important; } .bx-hero--dark .bx-table tr[data-bx-href]:hover td { background: #11346B; } .bx-hero--dark .bx-more { color: #7FD3F5 !important; } .bx-hero--dark .bx-active-title { color: #FFFFFF; } .bx-active-title { font-size: 18px; font-weight: 700; color: var(--bx-text); } .bx-b-hero { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; padding-top: 30px; padding-bottom: 34px; } .bx-idx-list { display: flex; flex-direction: column; gap: 10px; } .bx-idx-btn { font: inherit; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 13px 16px; cursor: pointer; background: transparent; border: 1px solid #23477F; color: #FFFFFF; border-radius: 0; } .bx-idx-btn.is-active { background: #0D2C5C; border-color: #00B4E6; } .bx-idx-btn span:first-child { font-size: 13px; font-weight: 600; color: #C9D4E3; } .bx-idx-btn span:last-child { display: flex; justify-content: space-between; gap: 10px; } .bx-idx-btn b { font-family: var(--bx-mono); font-size: 17px; font-weight: 600; } .bx-b-hero .bx-index-card { margin-top: 0; padding: 22px 26px; } .bx-b-hero .bx-index-value { font-size: 44px; } .bx-b-hero .bx-chart { height: 240px; } .bx-strip { background: #F7F9FB; border-bottom: 1px solid #DDE3EA; } .bx-strip-inner { display: flex; align-items: center; gap: 22px; min-height: 58px; font-size: 14px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; } .bx-strip-sep { width: 1px; align-self: stretch; background: #DDE3EA; } .bx-strip-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; } .bx-strip .bx-live { background: var(--bx-accent); border-color: var(--bx-accent); margin-left: auto; } /* C : tuiles de chiffres */ .bx-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .bx-tile { background: var(--bx-surface); border: 1px solid var(--bx-border); padding: 14px 18px; } .bx-tile-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bx-muted); font-weight: 600; } .bx-tile-value { display: flex; align-items: baseline; gap: 10px; margin-top: 6px; flex-wrap: wrap; } .bx-tile-value b { font-family: var(--bx-mono); font-size: 22px; font-weight: 600; color: var(--bx-text); } .bx-tile-value span { font-size: 13px; font-weight: 600; } .bx-c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .bx-c-head .bx-h1 { margin: 0 !important; font-size: 30px !important; } .bx-live-band { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 16px; padding: 11px 0; border: 1px solid var(--bx-accent); color: var(--bx-accent) !important; font-size: 14px; font-weight: 700; text-decoration: none; } .bx-live-band:hover { background: var(--bx-accent-soft); } @media (max-width: 1023px) { .bx-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* D : trois colonnes */ .bx-d-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr) 320px; gap: 22px; align-items: start; } .bx-une-title { display: block; margin-top: 12px; font-size: 26px; line-height: 1.25; font-weight: 700; color: var(--bx-text) !important; text-decoration: none; } .bx-une-title:hover { color: var(--bx-accent) !important; } .bx-une-text { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--bx-muted-2); } html[data-apparence="d"] body { font-family: 'Source Sans 3', var(--bx-font) !important; } html[data-apparence="d"] .bx-news-title { font-size: 16px; } @media (max-width: 1179px) { .bx-d-grid { grid-template-columns: minmax(0, 1fr) 320px; } .bx-d-left { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .bx-d-grid { grid-template-columns: minmax(0, 1fr); } .bx-d-left { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 899px) { .bx-hero-inner, .bx-b-hero { grid-template-columns: minmax(0, 1fr); } .bx-idx-list { flex-direction: row; overflow-x: auto; } .bx-idx-btn { min-width: 180px; } .bx-strip .bx-live { margin-left: 0; } } @media (max-width: 639px) { .bx-h1 { font-size: 28px !important; } .bx-index-value { font-size: 28px !important; } .bx-index-side { margin-left: 0; width: 100%; } .bx-strip-sep { display: none; } .bx-strip-inner { gap: 10px 16px; } } /* ─── 8. Espace utilisateur (barre latérale bleu nuit) ───────────────── */ .bx-espace { display: flex; align-items: stretch; min-height: calc(100vh - 106px); font-family: var(--bx-font); } .bx-side { width: 244px; flex-shrink: 0; background: #08244E; color: #FFFFFF; padding: 22px 16px; box-sizing: border-box; display: flex; flex-direction: column; } html[data-apparence="c"] .bx-side { background: #07111F; border-right: 1px solid #1A2C47; } .bx-side-title { font-size: 12px; letter-spacing: .1em; color: #8FA7C4; font-weight: 600; padding: 0 14px 10px; text-transform: uppercase; } .bx-side-user { display: flex; align-items: center; gap: 10px; padding: 0 10px 16px; margin-bottom: 10px; border-bottom: 1px solid #23477F; } .bx-side-user .bx-avatar { background: #FFFFFF; color: #08244E; width: 36px; height: 36px; font-size: 14px; } .bx-side-user b { display: block; font-size: 14px; color: #FFFFFF; } .bx-side-user span { font-size: 12px; color: #8FA7C4; } .bx-side-nav { display: flex; flex-direction: column; gap: 2px; } .bx-side-link { display: flex; align-items: center; gap: 12px; padding: 11px 14px; color: #C9D4E3 !important; font-size: 14px; font-weight: 500; text-decoration: none; } .bx-side-link svg { color: #8FA7C4; flex-shrink: 0; } .bx-side-link:hover { color: #FFFFFF !important; background: #0D2C5C; } .bx-side-link.is-active { background: #11346B; color: #FFFFFF !important; font-weight: 700; } .bx-side-link.is-active svg { color: #7FD3F5; } /* Alertes : badge bleu (alertes actives) ; pastille rouge seulement pour les déclenchements non consultés */ .bx-side-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: var(--bx-accent); color: #FFFFFF; padding: 1px 6px; } html[data-apparence="c"] .bx-side-badge { color: #07111F; } .bx-side-pastille { margin-left: auto; display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 1; background: var(--bx-down); color: #FFFFFF; box-shadow: 0 0 0 2px #08244E; } html[data-apparence="c"] .bx-side-pastille { box-shadow: 0 0 0 2px #07111F; } .bx-side-badge + .bx-side-pastille { margin-left: -6px; } .bx-drawer-nav .bx-side-badge, .bx-drawer-nav .bx-side-pastille { margin-left: 8px; vertical-align: 1px; } .bx-drawer-nav .bx-side-badge + .bx-side-pastille { margin-left: 4px; } .bx-side-block { margin-top: 22px; padding: 16px 14px 0; border-top: 1px solid #23477F; } .bx-side-block .bx-side-title { padding: 0 0 10px; } .bx-side .bx-btn--ghost { color: #FFFFFF !important; border-color: #3E5F86; height: 36px; font-size: 13px; } .bx-side-logout { padding: 11px 14px; } .bx-espace-main { flex: 1; min-width: 0; padding: 26px 32px 40px; box-sizing: border-box; } .bx-espace-main > .min-h-screen { min-height: 0 !important; } .bx-espace-main > div[class*="max-w-"] { max-width: none !important; padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important; } @media (max-width: 899px) { .bx-espace { flex-direction: column; min-height: 0; } .bx-side { width: auto; padding: 10px var(--bx-gutter); flex-direction: row; align-items: center; gap: 4px; overflow-x: auto; } .bx-side-user, .bx-side-title, .bx-side-block { display: none; } .bx-side-nav { flex-direction: row; gap: 2px; } .bx-side-link { white-space: nowrap; padding: 9px 12px; } .bx-side-logout { margin-top: 0; white-space: nowrap; padding: 9px 12px; } .bx-espace-main { padding: 20px var(--bx-gutter) 32px; } } /* Console sur mobile : la bande de liens laisse place à un bouton qui ouvre le menu de gauche sur l'Administration */ .bx-adm-menu-mobile { display: none; } .bx-drawer-nav--admin a { display: flex !important; align-items: center; gap: 10px; } .bx-drawer-nav--admin svg { color: #8FA7C4; flex-shrink: 0; } .bx-drawer-nav a.is-active { background: #11346B; color: #FFFFFF !important; font-weight: 700; } @media (max-width: 899px) { .bx-espace.is-admin .bx-side { display: none; } .bx-adm-menu-mobile { display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px var(--bx-gutter); border: 0; background: #08244E; color: #C9D4E3; font: inherit; font-size: 14px; text-align: left; cursor: pointer; } .bx-adm-menu-mobile b { color: #FFFFFF; font-weight: 700; margin-left: auto; } } /* Console d'administration (dans l'espace, section réservée à l'administrateur) */ .bx-side-title--admin { margin-top: 18px; padding-top: 16px; border-top: 1px solid #23477F; } .bx-admin { min-width: 0; } .bx-admin-page { max-width: none; } .bx-admin-onglets { display: flex; gap: 0; margin: 4px 0 22px; border-bottom: 1px solid var(--bx-border); overflow-x: auto; scrollbar-width: none; } .bx-admin-onglets::-webkit-scrollbar { display: none; } .bx-admin-onglet { display: inline-flex; align-items: center; gap: 7px; padding: 10px 16px; margin-bottom: -1px; white-space: nowrap; font-size: 14px; font-weight: 500; color: var(--bx-muted) !important; text-decoration: none; border-bottom: 2px solid transparent; } .bx-admin-onglet:hover { color: var(--bx-text) !important; } .bx-admin-onglet.is-active { color: var(--bx-text) !important; font-weight: 700; border-bottom-color: var(--bx-accent); } .bx-admin-compte { font-size: 11px; font-weight: 700; line-height: 1; padding: 3px 6px; background: var(--bx-accent-soft); color: var(--bx-accent); } /* Tableau de bord de la console */ .bx-adm-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; } .bx-adm-tete p { margin: 4px 0 0; color: var(--bx-muted); font-size: 14px; } .bx-adm-alertes { display: grid; gap: 8px; margin-bottom: 18px; } .bx-adm-alerte { display: flex; align-items: center; gap: 12px; padding: 11px 14px; font-size: 14px; background: var(--bx-surface); border: 1px solid var(--bx-border); color: var(--bx-text); } .bx-adm-alerte b { font-weight: 700; } .bx-adm-alerte a { margin-left: auto; white-space: nowrap; font-weight: 600; color: var(--bx-accent) !important; text-decoration: none; } .bx-adm-alerte.is-grave { border-color: color-mix(in srgb, var(--bx-down) 45%, var(--bx-border)); } .bx-adm-alerte.is-grave::before, .bx-adm-alerte.is-attention::before { content: ""; width: 8px; height: 8px; flex-shrink: 0; background: var(--bx-down); } .bx-adm-alerte.is-attention::before { background: #D98E04; } .bx-adm-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--bx-border); border: 1px solid var(--bx-border); margin-bottom: 22px; } .bx-adm-kpi { background: var(--bx-surface); padding: 16px 18px; min-width: 0; color: inherit !important; text-decoration: none; } a.bx-adm-kpi:hover { background: var(--bx-surface-2); } .bx-adm-kpi span { display: block; font-size: 12px; color: var(--bx-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } .bx-adm-kpi b { display: block; font-size: 26px; font-weight: 700; color: var(--bx-text); margin: 6px 0 2px; font-variant-numeric: tabular-nums; } .bx-adm-kpi small { display: block; font-size: 12px; color: var(--bx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-adm-kpi small.is-bad { color: var(--bx-down); font-weight: 600; } .bx-adm-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .bx-adm-carte { background: var(--bx-surface); border: 1px solid var(--bx-border); min-width: 0; } .bx-adm-carte.is-large { grid-column: 1 / -1; } .bx-adm-carte > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border-bottom: 1px solid var(--bx-border); } .bx-adm-carte > header h2 { margin: 0; font-size: 15px !important; font-weight: 700 !important; color: var(--bx-text) !important; } .bx-adm-carte > header a { font-size: 13px; font-weight: 600; color: var(--bx-accent) !important; text-decoration: none; white-space: nowrap; } .bx-adm-liste { list-style: none; margin: 0; padding: 0; } .bx-adm-liste li { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--bx-border); font-size: 13px; color: var(--bx-text); min-width: 0; } .bx-adm-liste li:last-child { border-bottom: 0; } .bx-adm-liste li > span:first-child { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-adm-liste li a { color: var(--bx-text) !important; text-decoration: none; } .bx-adm-liste li a:hover { color: var(--bx-accent) !important; } .bx-adm-liste .bx-adm-meta { color: var(--bx-muted); font-size: 12px; white-space: nowrap; font-variant-numeric: tabular-nums; } .bx-adm-vide { padding: 16px; font-size: 13px; color: var(--bx-muted); margin: 0; } .bx-adm-etat { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 7px; white-space: nowrap; background: var(--bx-surface-2); color: var(--bx-muted); border: 1px solid var(--bx-border); } .bx-adm-etat.is-ok { color: var(--bx-text); } .bx-adm-etat.is-ko { color: var(--bx-down); border-color: color-mix(in srgb, var(--bx-down) 40%, var(--bx-border)); } .bx-adm-etat.is-encours { color: var(--bx-accent); } .bx-param { background: var(--bx-surface-2); border: 1px solid var(--bx-border); padding: 14px 16px; min-width: 0; } .bx-param-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .bx-param-tete label { font-size: 14px; font-weight: 600; color: var(--bx-text); cursor: help; } .bx-param-aide { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--bx-muted); } .bx-adm-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; } .bx-adm-actions form { margin: 0; } @media (max-width: 1199px) { .bx-adm-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { .bx-adm-grille { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 1023px) { .bx-side-title--admin { display: none; } } @media (max-width: 520px) { .bx-adm-kpis { grid-template-columns: minmax(0, 1fr); } } /* Console : suivi des portefeuilles (liste triable, consultation en lecture seule) */ .bx-adm-recherche { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; } .bx-adm-recherche .form-input { flex: 1 1 280px; min-width: 0; } .bx-adm-compteur { margin-left: auto; font-size: 13px; color: var(--bx-muted); white-space: nowrap; } .bx-adm-defile { overflow-x: auto; } .bx-adm-tri { color: inherit !important; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .bx-adm-tri:hover, .bx-adm-tri.is-actif { color: var(--bx-text) !important; } .bx-adm-tri-fleche { font-size: 12px; color: var(--bx-accent); } .bx-adm-ligne-lien { cursor: pointer; } .bx-adm-pf-user { display: block; font-weight: 600; white-space: nowrap; } .bx-adm-pf-table td .pf-sym { display: block; } .pf-table.bx-adm-pf-table th, .pf-table.bx-adm-pf-table td { padding-left: 8px; padding-right: 8px; } .pf-table.bx-adm-pf-table th { white-space: normal; line-height: 1.25; vertical-align: bottom; } @media (min-width: 721px) { .bx-adm-pf-table th.r .bx-adm-tri { justify-content: flex-end; text-align: right; } } .bx-adm-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 4px 0 18px; font-size: 13px; color: var(--bx-muted); } .bx-adm-lecture-seule { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 18px; background: var(--bx-accent-soft); border: 1px solid color-mix(in srgb, var(--bx-accent) 40%, var(--bx-border)); color: var(--bx-text); font-size: 14px; } .bx-adm-lecture-seule b { font-weight: 700; } .bx-adm-lecture-seule span { color: var(--bx-muted); font-size: 13px; } .bx-adm-lecture-seule a { margin-left: auto; font-weight: 600; white-space: nowrap; color: var(--bx-accent) !important; text-decoration: none; } .bx-adm-tri-mobile { display: none; } @media (max-width: 720px) { .bx-adm-tri-mobile { display: flex; gap: 8px; flex: 1 1 100%; min-width: 0; max-width: 100%; } .bx-adm-recherche .bx-adm-tri-mobile .form-input { flex: 1 1 0; width: auto; min-width: 0; } .bx-adm-pf-user { white-space: normal; } .bx-adm-compteur { margin-left: 0; } .bx-adm-lecture-seule a { margin-left: 0; } } /* Tableau de bord */ .bx-welcome { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); background: var(--bx-surface); border: 1px solid var(--bx-border); } .bx-welcome > div { padding: 24px 26px; min-width: 0; } .bx-welcome > div + div { border-left: 1px solid var(--bx-border); } .bx-hello { font-size: 14px; color: var(--bx-muted); } .bx-bigval { font-family: var(--bx-mono); font-size: 38px; font-weight: 600; margin-top: 6px; color: var(--bx-text); line-height: 1.1; } .bx-bigval small { font-size: 18px; color: var(--bx-muted); } .bx-perf { display: grid; gap: 4px; margin-top: 10px; font-size: 14px; } .bx-minis { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; } .bx-mini { background: var(--bx-bg); padding: 12px 14px; } .bx-mini span { display: block; font-size: 12px; color: var(--bx-muted); } .bx-mini b { display: block; font-family: var(--bx-mono); font-size: 16px; font-weight: 600; margin-top: 2px; } .bx-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; } .bx-pos-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .bx-pos-card { display: block; background: var(--bx-surface); border: 1px solid var(--bx-border); border-top: 3px solid var(--bx-flat); padding: 12px 14px; text-decoration: none; color: var(--bx-text) !important; } .bx-pos-card.is-up { border-top-color: var(--bx-up); } .bx-pos-card.is-down { border-top-color: var(--bx-down); } .bx-pos-card:hover { border-color: var(--bx-accent); } .bx-pos-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .bx-pos-top b { font-size: 15px; } .bx-pos-top span { font-size: 12px; font-weight: 600; } .bx-pos-sub { font-size: 12px; color: var(--bx-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-pos-bottom { display: flex; justify-content: space-between; margin-top: 10px; gap: 8px; } .bx-pos-bottom b { font-family: var(--bx-mono); font-size: 15px; font-weight: 600; } .bx-pos-bottom span { font-weight: 700; font-size: 14px; } .bx-alert-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--bx-line); } .bx-alert-row:last-child { border-bottom: 0; } .bx-alert-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--bx-accent); margin-top: 6px; flex-shrink: 0; } .bx-alert-row.is-hit .bx-alert-dot { background: var(--bx-down); } .bx-alert-txt { flex: 1; min-width: 0; font-size: 14px; } .bx-alert-txt small { display: block; font-size: 12px; color: var(--bx-muted); margin-top: 2px; } .bx-pill { font-size: 11px; font-weight: 600; padding: 1px 6px; border: 1px solid var(--bx-head); color: var(--bx-accent); white-space: nowrap; } .bx-pill--hit { color: var(--bx-down); border-color: #F1C3CB; } .bx-tx-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 14px; padding: 9px 0; border-bottom: 1px solid var(--bx-line); } .bx-tx-row:last-child { border-bottom: 0; } .bx-tx-row > span:first-child { font-family: var(--bx-mono); font-size: 12px; color: var(--bx-muted); } .bx-tx-row small { font-size: 12px; color: var(--bx-muted); } @media (max-width: 899px) { .bx-welcome { grid-template-columns: minmax(0, 1fr); } .bx-welcome > div + div { border-left: 0; border-top: 1px solid var(--bx-border); } .bx-pos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .bx-pos-grid { grid-template-columns: minmax(0, 1fr); } .bx-bigval { font-size: 30px; } .bx-welcome > div { padding: 18px; } } /* ─── 9. Sélecteur d'apparence ───────────────────────────────────────── */ .bx-app-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .bx-app-tile { display: block; padding: 6px; border: 1px solid #2A4A70; text-decoration: none; color: #FFFFFF !important; font-size: 12px; position: relative; } .bx-app-tile:hover { border-color: #7FD3F5; } .bx-app-tile.is-active { border: 2px solid #4FA3E0; padding: 5px; } .bx-app-thumb svg { display: block; width: 100%; height: auto; } .bx-app-name { display: flex; align-items: center; gap: 5px; margin-top: 6px; color: #8FA7C4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bx-app-name b { color: #FFFFFF; } .bx-app-tile.is-active::after { content: ""; position: absolute; right: 6px; bottom: 8px; width: 12px; height: 12px; border-radius: 50%; background: #4FA3E0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 8px no-repeat; } /* Version claire (pied de page, paramètres) */ .bx-footer .bx-app-tile, .bx-app-grid--large .bx-app-tile { border-color: var(--bx-border); color: var(--bx-text) !important; background: var(--bx-surface); } .bx-footer .bx-app-name, .bx-app-grid--large .bx-app-name { color: var(--bx-muted); } .bx-footer .bx-app-name b, .bx-app-grid--large .bx-app-name b { color: var(--bx-text); } .bx-footer .bx-app-tile.is-active, .bx-app-grid--large .bx-app-tile.is-active { border-color: var(--bx-accent); } .bx-footer .bx-app-tile.is-active::after, .bx-app-grid--large .bx-app-tile.is-active::after { background-color: var(--bx-accent); } .bx-app-grid--mini { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .bx-app-grid--mini .bx-app-tile { padding: 4px; font-size: 11px; } .bx-app-grid--mini .bx-app-tile.is-active { padding: 3px; } .bx-app-grid--mini .bx-app-name { margin-top: 4px; } .bx-app-grid--mini .bx-app-tile.is-active::after { display: none; } .bx-app-grid--large { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .bx-app-grid--large .bx-app-tile { padding: 14px; font-size: 14px; } .bx-app-grid--large .bx-app-tile.is-active { padding: 13px; } .bx-app-grid--large .bx-app-thumb { display: block; border: 1px solid var(--bx-border); } .bx-app-grid--large .bx-app-name { font-size: 16px; margin-top: 12px; } .bx-app-grid--large .bx-app-desc { display: block; font-size: 13px; line-height: 1.5; color: var(--bx-muted); margin-top: 4px; white-space: normal; } .bx-app-grid--large .bx-app-tile.is-active::after { right: 14px; bottom: auto; top: 22px; width: 18px; height: 18px; background-size: 11px; } @media (max-width: 639px) { .bx-app-grid--large { grid-template-columns: minmax(0, 1fr); } } /* ─── 10. Pied de page ───────────────────────────────────────────────── */ .bx-footer { margin-top: 48px; background: var(--bx-surface); border-top: 1px solid var(--bx-border); font-family: var(--bx-font); color: var(--bx-text); } html[data-apparence="b"] .bx-footer { background: #0B1A2E; border-top-color: #0B1A2E; } html[data-apparence="c"] .bx-footer { background: #07111F; border-top-color: #1A2C47; } .bx-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.5fr; gap: 32px; padding: 40px 0 28px; } .bx-footer-logo { height: 26px; width: auto; display: block; } .bx-footer p { font-size: 14px; color: var(--bx-muted); line-height: 1.55; margin: 12px 0; } .bx-footer h4 { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--bx-muted-2); } .bx-footer-h4-gap { margin-top: 22px !important; } .bx-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .bx-footer ul a, .bx-footer-guide { font-size: 14px; color: var(--bx-text) !important; text-decoration: none; } .bx-footer ul a:hover, .bx-footer-guide:hover { color: var(--bx-accent) !important; text-decoration: underline; } .bx-footer-guide { display: inline-block; margin-top: 10px; font-size: 13px; color: var(--bx-accent) !important; } .bx-footer-social { display: flex; gap: 8px; } .bx-footer-social a { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--bx-border); color: var(--bx-muted-2); } /* Couleurs des réseaux */ .bx-footer-social a[href*="facebook"] { color: #1877F2; } .bx-footer-social a[href*="linkedin"] { color: #0A66C2; } .bx-footer-social a[href*="instagram"] { color: #E4405F; } .bx-footer-social a:hover { border-color: currentColor; } .bx-footer-social svg { width: 15px; height: 15px; fill: currentColor; } .bx-footer-disclaimer { font-size: 13px; color: var(--bx-muted); line-height: 1.55; padding: 16px 0; border-top: 1px solid var(--bx-border); } .bx-footer-disclaimer b { color: var(--bx-text); } .bx-footer-bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--bx-muted); padding: 14px 0 22px; border-top: 1px solid var(--bx-border); } .bx-footer-installed { color: var(--bx-up) !important; } html[data-apparence="b"] .bx-footer { --bx-surface: #13233A; --bx-border: #1F2D42; --bx-text: #FFFFFF; --bx-muted: #8FA7C4; --bx-muted-2: #C9D4E3; --bx-accent: #7FD3F5; } html[data-apparence="b"] .bx-footer-logo { filter: brightness(0) invert(1); } html[data-apparence="b"] .bx-footer .bx-btn--primary { background: #FFFFFF; color: #0B1A2E !important; border-color: #FFFFFF; } html[data-apparence="c"] .bx-footer-logo { filter: brightness(0) invert(1); } @media (max-width: 1023px) { .bx-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bx-footer-about, .bx-footer-tools { grid-column: span 3; } } @media (max-width: 639px) { .bx-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } .bx-footer-about, .bx-footer-tools { grid-column: span 2; } } /* ─── 11. Pages existantes : composants harmonisés ───────────────────── */ html[data-apparence] .card, html[data-apparence] .sidebar-marche .card, html[data-apparence] .market-stat-card, html[data-apparence] .home-action-card { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--bx-border) !important; background: var(--bx-surface) !important; } html[data-apparence] .card-header { background: var(--bx-surface) !important; border-bottom: 1px solid var(--bx-border) !important; color: var(--bx-muted-2) !important; font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; border-radius: 0 !important; } html[data-apparence] .rounded-lg, html[data-apparence] .rounded-xl, html[data-apparence] .rounded-2xl, html[data-apparence] .rounded-md { border-radius: 2px !important; } html[data-apparence] .shadow, html[data-apparence] .shadow-lg, html[data-apparence] .shadow-xl, html[data-apparence] .shadow-md, html[data-apparence] .shadow-sm { box-shadow: none !important; } html[data-apparence] .btn { border-radius: 0 !important; font-family: var(--bx-font); font-weight: 600; box-shadow: none !important; } html[data-apparence] .btn-primary { background: var(--bx-navy) !important; border-color: var(--bx-navy) !important; color: #FFFFFF !important; } html[data-apparence] .btn-primary:hover { background: #11346B !important; } html[data-apparence="c"] .btn-primary { background: var(--bx-accent) !important; border-color: var(--bx-accent) !important; color: #04121F !important; } html[data-apparence] .btn-outline:hover, html[data-apparence] .btn-ghost:hover { border-color: var(--bx-text) !important; background: transparent !important; } html[data-apparence] input:not([type="checkbox"]):not([type="radio"]):not(.bx-search-input), html[data-apparence] select, html[data-apparence] textarea, html[data-apparence] .form-input { border-radius: 0 !important; } html[data-apparence] .table-cours th { font-family: var(--bx-font); font-size: 12px; font-weight: 500; text-transform: none; letter-spacing: 0; } html[data-apparence] .table-cours td { font-variant-numeric: tabular-nums; } html[data-apparence] .var-pos, html[data-apparence] .text-green-400, html[data-apparence] .text-green-500, html[data-apparence] .text-emerald-400 { color: var(--bx-up) !important; } html[data-apparence] .var-neg, html[data-apparence] .text-red-400, html[data-apparence] .text-red-500 { color: var(--bx-down) !important; } html[data-apparence] .var-neu { color: var(--bx-flat) !important; } html[data-apparence] .text-finance, html[data-apparence] .hover\:text-finance:hover { color: var(--bx-accent) !important; } html[data-apparence] .bg-finance { background-color: var(--bx-accent) !important; } html[data-apparence] .border-finance, html[data-apparence] .hover\:border-finance:hover, html[data-apparence] .focus\:border-finance:focus { border-color: var(--bx-accent) !important; } html[data-apparence] .badge { border-radius: 0 !important; } html[data-apparence] .societe-nom { color: var(--bx-text) !important; font-weight: 600; } html[data-apparence] .societe-sym { color: var(--bx-muted) !important; } html[data-apparence] .company-logo { border-radius: 4px !important; background: #fff !important; border-color: var(--bx-border) !important; } html[data-apparence] .company-logo-sm { width: 30px; height: 30px; } html[data-apparence] .company-logo-md { width: 40px; height: 40px; } html[data-apparence] .company-logo-lg { width: 64px; height: 64px; } html[data-apparence] .company-logo img { padding: 3px; } html[data-apparence] .bg-ardoise { background: var(--bx-surface) !important; } html[data-apparence] .border-gray-700, html[data-apparence] .border-gray-800, html[data-apparence] .border-slate-700 { border-color: var(--bx-border) !important; } html[data-apparence] .hover\:bg-gray-700:hover, html[data-apparence] .hover\:bg-gray-800:hover { background: var(--bx-surface-2) !important; } html[data-apparence] .text-or { color: #B7791F !important; } html[data-apparence] .nav-live-badge { border-radius: 0 !important; } html[data-apparence] .global-search-feature { display: none !important; } html[data-apparence] .sidebar-marche .card-header { font-size: 12px; } html[data-apparence] .footer { display: none; } html[data-apparence] .toast { border-radius: 0 !important; } /* ─── 12. Ajustements de densité ─────────────────────────────────────── */ .bx-table td.r, .bx-table th.r { white-space: nowrap; } .bx-table td:first-child { max-width: 0; width: 100%; } .bx-table .bx-val { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-d-left .bx-index-card, .bx-card > .bx-index-card { background: transparent; border: 0; padding: 0; margin: 0; } .bx-d-left .bx-index-value { font-size: 28px; } .bx-d-left .bx-index-top { gap: 4px 12px; } .bx-d-left .bx-index-side { margin-left: 0; width: 100%; } .bx-d-left .bx-chart { height: 130px; } .bx-d-left .bx-range { padding: 4px 8px; } .bx-d-grid .bx-table { font-size: 13px; } /* ─── 13. Espace : pages existantes dans la nouvelle mise en page ────── */ .bx-espace-main .mon-espace-nav { display: none !important; } .bx-espace-main main.parametres-page { padding: 0 !important; min-height: 0 !important; background: transparent !important; } .bx-espace-main main.parametres-page > div { max-width: none !important; } .bx-espace-main h1 { font-size: 26px !important; font-weight: 700 !important; color: var(--bx-text) !important; } /* Portefeuille : avec la barre latérale, la colonne d'aperçus passe sous le tableau tant que l'écran est étroit. */ @media (min-width: 1180px) and (max-width: 1599px) { .bx-espace-main .pf-workspace { grid-template-columns: minmax(0, 1fr); } .bx-espace-main .pf-content-layout, .bx-espace-main .pf-side-panels { grid-column: auto; grid-row: auto; position: static; } .bx-espace-main .pf-side-panels { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 1.25rem; } } html[data-apparence] .bx-espace-main .pf-insight-card, html[data-apparence] .bx-espace-main .pf-cash-card, html[data-apparence] .bx-espace-main .pf-pv-card { border-radius: 0 !important; background: var(--bx-surface) !important; border-color: var(--bx-border) !important; } html[data-apparence] .pf-insight-title, html[data-apparence] .pf-collapse-summary { color: var(--bx-text) !important; } .bx-idx-row.is-active td { background: var(--bx-accent-soft); } .bx-idx-row.is-active .bx-val { color: var(--bx-accent) !important; } /* text-finance sert à la fois d'accent et de « hausse » : marqué var-pos, il reste vert. */ html[data-apparence] .var-pos.text-finance, html[data-apparence] .text-finance.var-pos { color: var(--bx-up) !important; } html[data-apparence] .bg-finance.text-black, html[data-apparence] .bg-finance .text-black { color: #FFFFFF !important; } html[data-apparence] input[type="range"], html[data-apparence] input[type="checkbox"], html[data-apparence] input[type="radio"] { accent-color: var(--bx-accent); } /* Résultats de recherche */ html[data-apparence] .global-search-item { color: var(--bx-text) !important; border-bottom: 1px solid var(--bx-line); } html[data-apparence] .global-search-item:hover, html[data-apparence] .global-search-item.active { background: var(--bx-accent-soft) !important; } html[data-apparence] .global-search-price { color: var(--bx-text) !important; font-family: var(--bx-mono) !important; font-weight: 600; } html[data-apparence] .global-search-logo { border-radius: 2px !important; } /* Champs de formulaire : les largeurs Tailwind (w-16, w-20…) priment sur le width:100% de .form-input, sinon le champ numérique écrase le curseur voisin (simulateur). */ html[data-apparence] .form-input.w-16 { width: 4rem; } html[data-apparence] .form-input.w-20 { width: 5rem; } html[data-apparence] .form-input.w-24 { width: 6rem; } html[data-apparence] .form-input.w-28 { width: 7rem; } html[data-apparence] .form-input.w-32 { width: 8rem; } html[data-apparence] .form-input.w-40 { width: 10rem; } html[data-apparence] .flex > .form-input[class*=" w-"]:not(.w-full) { flex: 0 0 auto; } html[data-apparence] .flex > .range-input.flex-1 { min-width: 0; } /* Curseurs (simulateur) : piste fine, poignée bleu nuit, sans halo. */ html[data-apparence] .range-input { height: 4px; border-radius: 0; background: var(--bx-head); } html[data-apparence] .range-input::-webkit-slider-runnable-track { height: 4px; border-radius: 0; background: var(--bx-head); } html[data-apparence] .range-input::-moz-range-track { height: 4px; border-radius: 0; background: var(--bx-head); } html[data-apparence] .range-input::-webkit-slider-thumb { width: 18px; height: 18px; margin-top: -7px; border-radius: 50%; background: var(--bx-navy); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--bx-navy); } html[data-apparence] .range-input::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--bx-navy); border: 2px solid #FFFFFF; box-shadow: 0 0 0 1px var(--bx-navy); } html[data-apparence="c"] .range-input::-webkit-slider-thumb { background: var(--bx-accent); box-shadow: 0 0 0 1px var(--bx-accent); border-color: #0A1628; } html[data-apparence="c"] .range-input::-moz-range-thumb { background: var(--bx-accent); box-shadow: 0 0 0 1px var(--bx-accent); border-color: #0A1628; } /* Formulaires simples (contact…) */ .bx-form { display: flex; flex-direction: column; gap: 16px; } .bx-field { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--bx-text); } .bx-field .form-input { font-weight: 400; font-family: var(--bx-font); } .bx-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; } /* Les précisions entre parenthèses dans un en-tête de carte restent en casse normale. */ html[data-apparence] .card-header .text-xs, html[data-apparence] .card-header .font-normal { text-transform: none; letter-spacing: 0; } html[data-apparence] .grid > * { min-width: 0; } /* ─── Notifications push (Paramètres → Notifications, Live) ─────────────── */ .bx-push-etat { font-size: 14px; margin: 0 0 14px; color: var(--bx-muted); } .bx-push-etat[data-ton="ok"] { color: var(--bx-text); font-weight: 600; } .bx-push-etat[data-ton="alerte"] { color: var(--bx-down); } .bx-push-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 6px; } .bx-push-prefs { border: 0; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--bx-border); } .bx-push-ligne { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--bx-border); cursor: pointer; } .bx-push-ligne:last-child { border-bottom: 0; } .bx-push-ligne input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--bx-accent); order: 2; } .bx-push-ligne > span { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; } .bx-push-ligne b { font-size: 14px; color: var(--bx-text); font-weight: 600; } .bx-push-ligne small { font-size: 12.5px; color: var(--bx-muted); } @media (max-width: 560px) { .bx-push-ligne { flex-wrap: wrap; } .bx-push-ligne select { width: 100% !important; } } [data-push-panneau] [hidden] { display: none !important; } /* Logos pleins (carré avec leur propre fond) : toute la case, sans marge ni fond blanc */ html .company-logo.company-logo--plein, html[data-apparence] .company-logo.company-logo--plein, html .bx-lg.bx-lg--plein { background: var(--fond) !important; border-color: transparent !important; } .company-logo.company-logo--plein img, .bx-lg.bx-lg--plein img { padding: 0 !important; background: transparent !important; object-fit: contain; } /* ─── Portefeuille : Synthèse, Plus-values réalisées, Import de relevé ─────────── */ .pf-page { min-width: 0; } .pf-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .pf-sous { margin: 4px 0 0; font-size: 14px; color: var(--bx-muted); } .pf-onglets { margin-bottom: 18px; } .pf-pos { color: var(--bx-up); } .pf-neg { color: var(--bx-down); } .pf-neu { color: var(--bx-muted); } .pf-filtres { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .pf-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--bx-border); background: var(--bx-surface); } .pf-seg a { padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--bx-muted) !important; text-decoration: none; border-right: 1px solid var(--bx-border); } .pf-seg a:last-child { border-right: 0; } .pf-seg a:hover { color: var(--bx-text) !important; } .pf-seg a.is-on { background: var(--bx-navy); color: #FFFFFF !important; } .pf-seg--petit a { padding: 5px 10px; font-size: 12px; } .pf-dates { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--bx-muted); } .pf-dates label { display: inline-flex; align-items: center; gap: 6px; } .pf-dates .form-input { width: auto; padding: 6px 8px; font-size: 13px; } .pf-kpis { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--bx-border); border: 1px solid var(--bx-border); margin-bottom: 18px; } .pf-kpi { background: var(--bx-surface); padding: 16px 18px; min-width: 0; } .pf-kpi > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bx-muted); } .pf-kpi > b { display: block; margin: 6px 0 3px; font-size: 21px; font-weight: 700; color: var(--bx-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .pf-kpi > b small { font-size: 13px; font-weight: 500; color: var(--bx-muted); } .pf-kpi > small { display: block; font-size: 12px; color: var(--bx-muted); } .pf-kpi--fort > b { font-size: 28px; } .pf-carte { background: var(--bx-surface); border: 1px solid var(--bx-border); margin-bottom: 18px; min-width: 0; } .pf-carte-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--bx-border); } .pf-carte-tete h2 { margin: 0; font-size: 16px !important; font-weight: 700 !important; color: var(--bx-text) !important; } .pf-vide { padding: 30px 18px; text-align: center; } .pf-vide p { margin: 0 0 8px; } .pf-histo { position: relative; height: 280px; padding: 14px 18px; } .pf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .pf-table th { padding: 10px 12px; text-align: left; font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bx-muted); border-bottom: 1px solid var(--bx-border); background: var(--bx-surface-2); white-space: nowrap; } .pf-table td { padding: 11px 12px; border-bottom: 1px solid var(--bx-border); color: var(--bx-text); font-variant-numeric: tabular-nums; vertical-align: middle; } .pf-table .r { text-align: right; white-space: nowrap; } .pf-table tfoot td { font-weight: 700; background: var(--bx-surface-2); border-bottom: 0; } .pf-table tbody tr:hover { background: var(--bx-surface-2); } .pf-lien { color: var(--bx-text) !important; font-weight: 600; text-decoration: none; } .pf-lien:hover { color: var(--bx-accent) !important; } .pf-sym { color: var(--bx-muted); font-size: 11.5px; } .pf-alerte { display: inline-block; padding: 1px 6px; font-size: 11px; font-weight: 600; color: var(--bx-down); border: 1px solid color-mix(in srgb, var(--bx-down) 40%, transparent); } .pf-note { margin: 0; padding: 12px 18px; font-size: 12.5px; color: var(--bx-muted); } @media (max-width: 1023px) { .pf-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-kpi--fort, .pf-kpis > .pf-kpi:nth-child(4):last-child { grid-column: 1 / -1; } } /* Tableaux en cartes sur téléphone : une carte par ligne, libellé à gauche et valeur à droite */ @media (max-width: 720px) { .pf-resp thead { display: none; } .pf-resp, .pf-resp tbody, .pf-resp tfoot, .pf-resp tr, .pf-resp td { display: block; width: 100%; } .pf-resp tr { padding: 10px 14px; border-bottom: 1px solid var(--bx-border); } .pf-resp td { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 4px 0; border: 0; text-align: right; } .pf-resp td[data-label]::before { content: attr(data-label); flex: 0 0 auto; font-size: 12px; font-weight: 600; color: var(--bx-muted); text-align: left; } .pf-resp td:first-child { display: block; padding-bottom: 6px; text-align: left; font-size: 15px; } .pf-resp td:first-child::before { display: none; } .pf-resp td:empty { display: none; } .pf-histo { height: 230px; padding: 10px; } .pf-kpi--fort > b { font-size: 24px; } } /* Import de relevé */ .pfi-form { padding: 18px; display: grid; gap: 14px; } /* Import : barre d'étapes (document, analyse, vérification, validation) */ .pfi-etapes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 16px; padding: 0; list-style: none; } .pfi-etapes li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--bx-muted); } .pfi-etapes li + li::before { content: ""; width: 28px; height: 1px; background: var(--bx-border); } .pfi-etapes i { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border: 1px solid var(--bx-border); border-radius: 50%; font-style: normal; font-size: 12px; font-weight: 700; background: var(--bx-surface); } .pfi-etapes li.is-active { color: var(--bx-text); font-weight: 600; } .pfi-etapes li.is-active i { color: #FFFFFF; background: var(--bx-accent); border-color: var(--bx-accent); } .pfi-etapes li.is-faite i { color: var(--bx-accent); background: var(--bx-accent-soft); border-color: transparent; } @media (max-width: 560px) { .pfi-etapes li:not(.is-active) span { display: none; } .pfi-etapes li + li::before { width: 16px; } } /* Import : tuiles de choix du document */ .pfi-tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pfi-tuile { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 14px 10px; border: 1px solid var(--bx-border); border-radius: 8px; background: var(--bx-surface); color: var(--bx-text); text-align: center; cursor: pointer; font: inherit; } .pfi-tuile svg { width: 26px; height: 26px; margin-bottom: 4px; fill: none; stroke: var(--bx-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pfi-tuile b { font-size: 13.5px; font-weight: 700; } .pfi-tuile small { font-size: 12px; color: var(--bx-muted); } .pfi-tuile:hover { border-color: var(--bx-accent); } .pfi-tuile:focus { outline: none; } .pfi-tuile:focus-visible { outline: 2px solid var(--bx-accent); outline-offset: 2px; } .pfi-tuile.is-choisie { border-color: var(--bx-accent); background: var(--bx-accent-soft); box-shadow: inset 0 0 0 1px var(--bx-accent); } .pfi-tuile.is-choisie svg { stroke: var(--bx-accent); } .pfi-tuile.is-choisie b { color: var(--bx-accent); } @media (max-width: 640px) { .pfi-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pfi-depot-ico svg { width: 28px; height: 28px; fill: none; stroke: var(--bx-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .pfi-apercu { max-width: 100%; max-height: 160px; margin: 10px auto 0; border: 1px solid var(--bx-border); } .pfi-apercu:not([hidden]) { display: block; } .pfi-apercu[hidden] { display: none; } .pfi-astuce { display: flex; align-items: flex-start; gap: 8px; margin: 0; font-size: 13.5px; color: var(--bx-muted-2); } .pfi-astuce svg { flex: none; width: 17px; height: 17px; margin-top: 1px; fill: none; stroke: var(--bx-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pfi-pied { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 14px; border-top: 1px solid var(--bx-border); } .pfi-donnees { flex: 1 1 320px; min-width: 0; } .pfi-donnees summary { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--bx-muted); cursor: pointer; list-style: none; } .pfi-donnees summary::-webkit-details-marker { display: none; } .pfi-donnees summary:hover { color: var(--bx-text); } .pfi-donnees summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .pfi-donnees p { margin: 8px 0 0; max-width: 680px; font-size: 12.5px; line-height: 1.55; color: var(--bx-muted); } .pfi-depot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 120px; padding: 18px; border: 2px dashed var(--bx-border); background: var(--bx-surface-2); text-align: center; cursor: pointer; } .pfi-depot.is-survol, .pfi-depot:hover { border-color: var(--bx-accent); } .pfi-depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .pfi-depot b { font-size: 15px; color: var(--bx-text); } .pfi-depot small { font-size: 12.5px; color: var(--bx-muted); } .pfi-ou { text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--bx-muted); } .pfi-champ { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--bx-text); } .pfi-champ--court { max-width: 320px; } .pfi-ligne { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .pfi-confidentialite { padding: 0; } .pfi-erreur { margin: 0; padding: 10px 12px; font-size: 13.5px; color: var(--bx-down); border: 1px solid color-mix(in srgb, var(--bx-down) 40%, var(--bx-border)); background: color-mix(in srgb, var(--bx-down) 6%, var(--bx-surface)); } .pfi-resume { font-size: 13px; color: var(--bx-muted); } .pfi-legende { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 10px 18px; font-size: 12.5px; color: var(--bx-muted); border-bottom: 1px solid var(--bx-border); } .pfi-statut { display: inline-block; padding: 2px 8px; font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid var(--bx-border); } .pfi-statut.is-nouveau { color: var(--bx-accent); border-color: color-mix(in srgb, var(--bx-accent) 45%, var(--bx-border)); } .pfi-statut.is-verifier { color: #B7791F; border-color: color-mix(in srgb, #B7791F 45%, var(--bx-border)); } .pfi-statut.is-existe { color: var(--bx-muted); } .pfi-tableau-cadre { overflow-x: auto; } .pfi-table { min-width: 1080px; } .pfi-table td { padding: 7px 8px; } .pfi-table .form-input { width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px; } .pfi-table td:nth-child(3) .form-input { min-width: 128px; } .pfi-table td:nth-child(4) .form-input { min-width: 112px; } .pfi-table .pfi-valeur { min-width: 190px; } .pfi-table input.r { text-align: right; min-width: 86px; } .pfi-table tr.is-off td:not(:first-child) { opacity: .5; } .pfi-remarques { min-width: 180px; font-size: 12px; color: #B7791F; } .pfi-lu { display: block; margin-top: 3px; font-size: 11.5px; color: var(--bx-muted); } .pfi-suppr { width: 28px; height: 28px; border: 1px solid var(--bx-border); background: none; color: var(--bx-muted); font-size: 16px; line-height: 1; cursor: pointer; } .pfi-suppr:hover { color: var(--bx-down); } .pfi-actions-bas { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; } .pfi-total { font-size: 13px; color: var(--bx-muted); } .pfi-sous-titre { margin: 8px 18px 10px; font-size: 14px !important; font-weight: 700 !important; color: var(--bx-text) !important; } .pfi-valider { padding: 16px 18px; display: grid; gap: 12px; } @media (max-width: 720px) { .pfi-table { min-width: 0; } .pfi-table thead { display: none; } .pfi-table, .pfi-table tbody, .pfi-table tr, .pfi-table td { display: block; width: 100%; } .pfi-table tr { position: relative; padding: 12px 14px; border-bottom: 1px solid var(--bx-border); } .pfi-table td { display: grid; grid-template-columns: 110px 1fr; align-items: center; gap: 8px; padding: 4px 0; border: 0; } .pfi-table td[data-label]::before { content: attr(data-label); font-size: 12px; font-weight: 600; color: var(--bx-muted); } .pfi-table td:last-child { position: absolute; top: 10px; right: 12px; display: block; width: auto; padding: 0; } .pfi-table input.r { text-align: left; } } /* Synthèse du portefeuille : bandeau, actions, choix du portefeuille */ .pf-tete-actions { display: flex; flex-wrap: wrap; gap: 8px; } .pf-selecteur { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: -6px 0 16px; } .pf-sel-choix { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--bx-muted); } .pf-sel-choix .form-input { width: auto; min-width: 200px; padding: 6px 10px; font-size: 14px; font-weight: 600; color: var(--bx-text); } .pf-sel-info { font-size: 12.5px; color: var(--bx-muted); } .pf-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--bx-border); background: var(--bx-surface); color: var(--bx-text); } .pf-dialog::backdrop { background: rgba(7, 17, 31, .5); } .pf-dialog-corps { display: grid; gap: 12px; padding: 18px; } .pf-dialog-corps h3 { margin: 0; font-size: 16px; font-weight: 700; } .pf-dialog-corps label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; } .pf-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; } .pf-hero { display: grid; grid-template-columns: minmax(240px, 1fr) 2.4fr; gap: 1px; background: var(--bx-border); border: 1px solid var(--bx-border); margin-bottom: 20px; } .pf-hero > div { background: var(--bx-surface); min-width: 0; } .pf-hero-total { padding: 20px 22px; background: var(--bx-navy) !important; color: #FFFFFF; } .pf-hero-total > span { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8FA7C4; } .pf-hero-total > b { display: block; margin: 8px 0 6px; font-size: 32px; font-weight: 700; letter-spacing: -.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .pf-hero-total > b small { font-size: 15px; font-weight: 500; color: #8FA7C4; } .pf-hero-jour { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; } .pf-hero-jour span { color: #8FA7C4; font-weight: 500; } .pf-hero-total .pf-pos { color: #5FD39A; } .pf-hero-total .pf-neg { color: var(--bx-down-dk); } .pf-hero-total .pf-neu { color: #C9D4E3; } .pf-hero-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .pf-hero-grille > div { padding: 18px 20px; border-left: 1px solid var(--bx-border); min-width: 0; } .pf-hero-grille > div:first-child { border-left: 0; } .pf-hero-grille > div > span { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--bx-muted); } .pf-hero-grille b { display: block; margin: 8px 0 4px; font-size: 20px; font-weight: 700; color: var(--bx-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .pf-hero-grille small { display: block; font-size: 12.5px; color: var(--bx-muted); } .pf-lien-bouton { padding: 0; border: 0; background: none; color: var(--bx-accent); font: inherit; font-weight: 600; cursor: pointer; } .pf-lien-bouton:hover { text-decoration: underline; } @media (max-width: 1199px) { .pf-hero { grid-template-columns: minmax(0, 1fr); } .pf-hero-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-hero-grille > div:nth-child(3) { border-left: 0; } .pf-hero-grille > div:nth-child(n+3) { border-top: 1px solid var(--bx-border); } } @media (max-width: 520px) { .pf-hero-total > b { font-size: 27px; } .pf-hero-grille b { font-size: 17px; } .pf-hero-grille > div { padding: 14px; } .pf-sel-choix .form-input { min-width: 0; max-width: 60vw; } } /* Positions ouvertes : une ligne compacte par position sur téléphone */ .pf-pos-tete-mobile { display: none; } @media (max-width: 760px) { .portfolio-positions-wrap { overflow: visible !important; } .portfolio-positions-table, .portfolio-positions-table tbody, .portfolio-positions-table tfoot { display: block; width: 100%; min-width: 0 !important; } .portfolio-positions-table thead { display: none; } /* Une ligne par position en trois colonnes à deux étages : titre / quantité, cours / PRU, valeur / plus-value. Le reste (jour, capital investi, poids, vendre) est dans la fiche ouverte au toucher. */ .pf-pos-tete-mobile { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, 1.3fr); gap: 0 10px; padding: 8px 14px; border-bottom: 1px solid var(--bx-border); font-size: 11.5px; font-weight: 600; color: var(--bx-muted); } .pf-pos-tete-mobile span + span { text-align: right; } .portfolio-positions-table tbody tr { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .8fr) minmax(0, .72fr) minmax(0, .58fr); grid-template-areas: "val cours valo valo" "qte pru pv pvp"; gap: 1px 10px; padding: 9px 14px; border-bottom: 1px solid var(--bx-border); align-items: baseline; } .portfolio-positions-table tbody td { display: block; padding: 0 !important; border: 0; width: auto !important; min-width: 0; font-size: 13.5px; text-align: right !important; white-space: nowrap; } .portfolio-positions-table tbody td.col-valeur { grid-area: val; text-align: left !important; overflow: hidden; } .portfolio-positions-table tbody td.col-valeur .company-logo { display: none; } .portfolio-positions-table tbody td.col-valeur .societe-link-logo, .portfolio-positions-table tbody td.col-valeur .flex-col { min-width: 0; overflow: hidden; } .portfolio-positions-table tbody td.col-valeur .societe-nom { display: block; overflow: hidden; text-overflow: ellipsis; font-size: 13.5px; font-weight: 600; } .portfolio-positions-table tbody td.col-valeur .societe-sym { display: none; } .portfolio-positions-table tbody td[data-label="Cours"] { grid-area: cours; } .portfolio-positions-table tbody td[data-label="Valeur"] { grid-area: valo; } .portfolio-positions-table tbody td[data-label="Quantité"] { grid-area: qte; text-align: left !important; } .portfolio-positions-table tbody td[data-label="PRU"] { grid-area: pru; } .portfolio-positions-table tbody td[data-label="Plus-value"] { grid-area: pv; } .portfolio-positions-table tbody td[data-label="Plus-value %"] { grid-area: pvp; } .portfolio-positions-table tbody td[data-label="Quantité"], .portfolio-positions-table tbody td[data-label="PRU"] { font-size: 12px; } .portfolio-positions-table tbody td[data-label="Plus-value"], .portfolio-positions-table tbody td[data-label="Plus-value %"] { font-size: 11.5px; letter-spacing: -.01em; } .portfolio-positions-table tbody td[data-label="Quantité"], .portfolio-positions-table tbody td[data-label="PRU"] { color: var(--bx-muted) !important; } .portfolio-positions-table tbody td[data-label="Jour"], .portfolio-positions-table tbody td[data-label="Capital investi"], .portfolio-positions-table tbody td[data-label="Poids"], .portfolio-positions-table tbody td.sell-cell { display: none; } .portfolio-positions-table tfoot tr { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 14px; padding: 12px 14px; } .portfolio-positions-table tfoot td { display: block; padding: 0 !important; text-align: left !important; } .portfolio-positions-table tfoot td:empty { display: none; } } /* Import : suivi de la file d'attente et derniers relevés */ .pfi-suivi-corps { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; } .pfi-suivi-corps b { font-size: 15px; color: var(--bx-text); } .pfi-suivi-corps .pf-sous { margin: 4px 0 0; } .pfi-suivi-note { margin: 8px 0 0; font-size: 12.5px; color: var(--bx-muted); } .pfi-suivi.is-erreur { border-color: color-mix(in srgb, var(--bx-down) 45%, var(--bx-border)); } .pfi-suivi.is-erreur b { color: var(--bx-down); } .pfi-suivi-actions { padding: 0 18px 16px; justify-content: flex-start; } .pfi-roue { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 2px; border-radius: 50%; border: 3px solid var(--bx-border); border-top-color: var(--bx-accent); animation: pfiTourne .9s linear infinite; } .pfi-roue[hidden] { display: none; } @keyframes pfiTourne { to { transform: rotate(360deg); } } .pfi-histo { list-style: none; margin: 0; padding: 0; } .pfi-histo li { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 18px; border-bottom: 1px solid var(--bx-border); font-size: 13.5px; } .pfi-histo li:last-child { border-bottom: 0; } .pfi-histo-nom { flex: 1 1 200px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--bx-text); } .pfi-histo small { color: var(--bx-muted); } .pfi-histo .pfi-histo-suppr:hover { color: var(--bx-down) !important; border-color: var(--bx-down) !important; } .pfi-statut.is-erreur { color: var(--bx-down); border-color: color-mix(in srgb, var(--bx-down) 45%, var(--bx-border)); } /* Bouton « Importer un relevé » bien visible */ .pf-btn-import { display: inline-flex; align-items: center; gap: 7px; background: var(--bx-accent) !important; border-color: var(--bx-accent) !important; color: #FFFFFF !important; } .pf-btn-import:hover { background: var(--bx-accent-h) !important; } .pf-btn-import svg { width: 16px; height: 16px; } .pf-onglets .bx-admin-onglet[href$="import-releve"] { display: inline-flex; align-items: center; gap: 6px; color: var(--bx-accent) !important; font-weight: 700; } .pf-onglets .bx-admin-onglet svg { width: 15px; height: 15px; flex-shrink: 0; } /* Choix du portefeuille : boutons */ .pf-sel-boutons { display: inline-flex; flex-wrap: wrap; gap: 8px; } .pf-sel-bouton { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border: 1px solid var(--bx-border); background: var(--bx-surface); color: var(--bx-muted); font: 600 15.5px var(--bx-font, inherit); cursor: pointer; } .pf-sel-bouton:hover { color: var(--bx-text); border-color: var(--bx-muted); } .pf-sel-bouton.is-on { background: var(--bx-navy); border-color: var(--bx-navy); color: #FFFFFF; cursor: default; } .pf-sel-ajout { padding: 8px 12px; border: 1px dashed var(--bx-border); background: none; color: var(--bx-accent); font: 600 13px var(--bx-font, inherit); cursor: pointer; } .pf-sel-ajout:hover { border-color: var(--bx-accent); } .pf-sel-gerer { font-size: 12.5px; color: var(--bx-muted); } html[data-apparence="c"] .pf-sel-bouton.is-on { background: var(--bx-text); border-color: var(--bx-text); color: var(--bx-bg); } /* Onglet Importer : libellé court sur mobile pour que les trois onglets tiennent */ .pf-onglet-suite { margin-left: -2px; white-space: nowrap; } @media (max-width: 520px) { .pf-onglet-suite, .pf-onglets .pf-beta { display: none; } .pf-onglets .bx-admin-onglet { padding-left: 10px; padding-right: 10px; } } /* Menu « ⋯ » de gestion des portefeuilles */ .pf-sel-menu { position: relative; } .pf-sel-plus { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--bx-border); background: var(--bx-surface); color: var(--bx-muted); cursor: pointer; list-style: none; } .pf-sel-plus::-webkit-details-marker { display: none; } .pf-sel-plus::marker { content: ''; } .pf-sel-plus:hover, .pf-sel-menu[open] > .pf-sel-plus { color: var(--bx-text); border-color: var(--bx-muted); } .pf-sel-plus svg { width: 18px; height: 18px; } .pf-sel-menu-liste { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; display: grid; min-width: 230px; padding: 6px 0; border: 1px solid var(--bx-border); background: var(--bx-surface); box-shadow: 0 14px 36px rgba(8, 20, 40, .18); } .pf-sel-menu-liste > button { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 14px; border: 0; background: none; color: var(--bx-text); font: 500 14px var(--bx-font, inherit); text-align: left; cursor: pointer; } .pf-sel-menu-liste > button:hover, .pf-sel-menu-liste > button:focus-visible { background: var(--bx-accent-soft); } .pf-sel-menu-liste > button small { font-size: 12px; color: var(--bx-muted); } .pf-sel-menu-titre { padding: 6px 14px 8px; font-size: 12px; font-weight: 600; color: var(--bx-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pf-sel-menu-sep { height: 1px; margin: 6px 0; background: var(--bx-border); } .pf-sel-menu-liste .pf-sel-info { padding: 8px 14px; } /* Import : barre de progression et explications du suivi */ .pfi-progression { display: flex; align-items: center; gap: 10px; margin: 12px 0 4px; max-width: 520px; } .pfi-progression[hidden] { display: none; } .pfi-progression-piste { flex: 1; height: 10px; border-radius: 5px; background: var(--bx-surface-2); border: 1px solid var(--bx-border); overflow: hidden; } .pfi-progression-piste i { display: block; height: 100%; width: 0; background: var(--bx-accent); transition: width .6s ease; } .pfi-progression > span:last-child { min-width: 42px; text-align: right; font-size: 13px; font-weight: 700; color: var(--bx-text); font-variant-numeric: tabular-nums; } .pfi-suivi-note p { margin: 8px 0 0; } .pfi-suivi-note b { color: var(--bx-text); } /* Liste des actualités : logo de la société devant le titre */ .actu-ligne { display: flex; align-items: flex-start; gap: 14px; } .actu-ligne-logo { flex: 0 0 auto; margin-top: 2px; } .actu-ligne-corps { flex: 1; min-width: 0; } .actu-ligne-liens { padding-left: 54px; } @media (max-width: 640px) { .actu-ligne { gap: 10px; } html[data-apparence] .actu-ligne-logo.company-logo-md { width: 32px; height: 32px; } .actu-ligne-liens { padding-left: 42px; } } .pfi-statut.is-fonds { color: var(--bx-accent); } .pfi-table tr.is-bloquee td, #pfiTable tr.is-bloquee td { background: rgba(200, 16, 46, .06); } #pfiTable tr.is-bloquee .pfi-remarques { color: var(--bx-down); } /* Portefeuille : placements en SICAV / FCP */ .pf-hero-grille.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1199px) { .pf-hero-grille.is-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pf-hero-grille.is-5 > div:nth-child(5) { border-left: 0; } } .pf-fonds { margin: 0 0 24px; } .pf-fonds-defile { overflow-x: auto; } .pf-fonds-tete { padding: 18px 20px 6px; } .pf-fonds-tete h2 { margin: 0 0 4px; font-size: 17px; font-weight: 700; color: var(--bx-text); } .pf-fonds td small { display: block; font-size: 12px; color: var(--bx-muted); } .pf-fonds-type { letter-spacing: .04em; } /* Import de portefeuille : mention bêta, deux façons d’importer ; remise à zéro */ .pf-beta { display: inline-block; margin-left: 6px; padding: 1px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: middle; color: var(--bx-accent); border: 1px solid currentColor; border-radius: 3px; line-height: 1.5; } .pf-btn-import .pf-beta { color: inherit; } .pfi-choix { padding: 18px 20px; } .pfi-choix-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } .pfi-choix-grille h3 { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--bx-text); } .pfi-choix-grille p { margin: 0 0 6px; font-size: 14px; color: var(--bx-muted-2); } .pfi-choix-note { margin: 12px 0 0; } @media (max-width: 720px) { .pfi-choix-grille { grid-template-columns: minmax(0, 1fr); } } .pf-raz-alerte { margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--bx-down); color: var(--bx-text); font-size: 14px; } .pf-raz-alerte b { color: var(--bx-down); } .pf-btn-danger { background: var(--bx-down); border: 1px solid var(--bx-down); color: #FFFFFF; } .pf-btn-danger:disabled { opacity: .45; cursor: not-allowed; } /* Barre de navigation du bas (téléphone) : Tableau de bord, Portefeuilles, Calendrier, Alertes */ .bx-bnav { display: none; } @media (max-width: 899px) { .bx-bnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: flex; background: var(--bx-surface); border-top: 1px solid var(--bx-border); padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); box-shadow: 0 -2px 12px rgba(11, 26, 46, .06); } .bx-bnav-lien { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px 4px; color: var(--bx-muted) !important; text-decoration: none !important; font-size: 11px; font-weight: 600; } .bx-bnav-lien.is-on { color: var(--bx-accent) !important; } .bx-bnav-icone { position: relative; display: inline-flex; } .bx-bnav-icone svg { width: 22px; height: 22px; } .bx-bnav-lib { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-bnav-badge { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--bx-accent); color: #FFFFFF; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .bx-bnav-badge.is-nouveau { background: var(--bx-down); } body:has(.bx-bnav) { padding-bottom: calc(62px + env(safe-area-inset-bottom)); } body:has(.bx-bnav) .toast-container { bottom: calc(70px + env(safe-area-inset-bottom)); } } /* Accueil : logo de la société devant le titre dans les lignes Actualités et Agenda */ .bx-news-corps { display: flex; align-items: flex-start; gap: 10px; min-width: 0; } .bx-news-corps > span:last-child { min-width: 0; } .bx-news-logo { flex: 0 0 auto; width: 28px; height: 28px; margin-top: 1px; } html[data-apparence] .bx-news-logo.company-logo-sm { width: 28px; height: 28px; } /* Accueil : logo et nom de la valeur dans « Valeurs les plus actives » */ .bx-table .bx-val.bx-val-logo { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; } .bx-val-logo > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bx-val-logo .bx-news-logo { margin-top: 0; width: 24px; height: 24px; } html[data-apparence] .bx-val-logo .bx-news-logo.company-logo-sm { width: 24px; height: 24px; } /* Fiche société : cases des indicateurs et boutons d'onglets plus contrastés. Onglet actif en bleu (le vert est réservé aux hausses). */ html[data-apparence] { --bx-border-fort: #B8C4D2; --bx-fond-case: #EDF1F6; } html[data-apparence="c"] { --bx-border-fort: #2E4870; --bx-fond-case: #172A45; } html[data-apparence] .cours-stat { background: var(--bx-fond-case) !important; border: 1px solid var(--bx-border-fort) !important; border-radius: 6px; } html[data-apparence] .cours-stat-label { color: var(--bx-muted-2) !important; letter-spacing: .05em; } html[data-apparence] .cours-stat-val { color: var(--bx-text) !important; font-size: 1.0625rem; } html[data-apparence] .societe-quick-tabs .btn { background: var(--bx-fond-case) !important; border: 1px solid var(--bx-border-fort) !important; color: var(--bx-text) !important; border-radius: 6px; } html[data-apparence] .societe-quick-tabs .btn:hover { border-color: var(--bx-accent) !important; color: var(--bx-accent) !important; background: var(--bx-accent-soft) !important; } html[data-apparence] .societe-detail-tabs .tab-btn { background: var(--bx-fond-case) !important; border: 1px solid var(--bx-border-fort) !important; color: var(--bx-text) !important; font-weight: 600; border-radius: 6px; } html[data-apparence] .societe-detail-tabs .tab-btn:hover { border-color: var(--bx-accent) !important; color: var(--bx-accent) !important; background: var(--bx-accent-soft) !important; } html[data-apparence] .societe-detail-tabs .tab-btn.active { background: var(--bx-accent) !important; border-color: var(--bx-accent) !important; color: #FFFFFF !important; } html[data-apparence="c"] .societe-detail-tabs .tab-btn.active { color: #07111F !important; } /* Plus haut / plus bas (séance et 52 semaines) : ce ne sont ni des hausses ni des baisses, couleur neutre. */ html[data-apparence] .cours-stat-val .var-pos, html[data-apparence] .cours-stat-val .var-neg { color: var(--bx-text) !important; } html[data-apparence] .cours-stat-val.text-xs { font-size: .9375rem; white-space: nowrap; } /* Fiche société : informations détaillées (onglets en boutons à gauche, listes et tableaux au style du site) */ html[data-apparence] .sd { padding: 16px 18px 18px; } .sd-onglets { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } html[data-apparence] .sd-onglet { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--bx-border); border-radius: 4px; background: var(--bx-surface); color: var(--bx-text); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; } html[data-apparence] .sd-onglet em { font-style: normal; font-family: var(--bx-mono); font-size: 12px; font-weight: 500; color: var(--bx-muted); } html[data-apparence] .sd-onglet:hover { border-color: var(--bx-navy); } html[data-apparence] .sd-onglet.is-actif { background: var(--bx-navy); border-color: var(--bx-navy); color: #FFFFFF; } html[data-apparence] .sd-onglet.is-actif em { color: #B5D4F4; } html[data-apparence] .sd-onglet.is-vide:not(.is-actif) { color: var(--bx-muted); font-weight: 500; } .sd-onglet:focus { outline: none; } .sd-onglet:focus-visible { outline: 2px solid var(--bx-accent); outline-offset: 2px; } .sd-panneau[hidden] { display: none !important; } .sd-liste { list-style: none; margin: 0; padding: 0; } .sd-liste > li { border-top: 1px solid var(--bx-line); } .sd-liste > li:first-child { border-top: 0; } .sd-actu { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 4px 14px; align-items: baseline; padding: 11px 6px; } .sd-actu:hover, .sd-doc:hover { background: var(--bx-surface-2); } .sd-date { font-family: var(--bx-mono); font-size: 12px; color: var(--bx-muted); white-space: nowrap; } html[data-apparence] .sd-actu-txt > a:first-child { color: var(--bx-text); font-weight: 600; font-size: 14.5px; text-decoration: none; } html[data-apparence] .sd-actu-txt > a:first-child:hover { color: var(--bx-accent); text-decoration: underline; } .sd-actu-txt p { margin: 3px 0 0; font-size: 13px; line-height: 1.5; color: var(--bx-muted); } html[data-apparence] .sd-source { display: inline-block; margin-top: 4px; font-size: 12px; color: var(--bx-accent); text-decoration: none; } html[data-apparence] .sd-source:hover { text-decoration: underline; } .sd-tag { font-size: 11px; padding: 1px 7px; border: 1px solid var(--bx-border); border-radius: 3px; color: var(--bx-muted); white-space: nowrap; } .sd-doc { display: flex; align-items: center; gap: 12px; padding: 10px 6px; } .sd-doc-ico { flex: 0 0 auto; color: var(--bx-accent); line-height: 0; } .sd-doc-txt { flex: 1; min-width: 0; } .sd-doc-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--bx-text); overflow-wrap: anywhere; } .sd-doc-txt small { display: block; margin-top: 2px; font-size: 12px; color: var(--bx-muted); } html[data-apparence] .sd-doc-btn { flex: 0 0 auto; padding: 6px 12px; font-size: 13px; } .sd-doc-indispo { flex: 0 0 auto; font-size: 12px; color: var(--bx-muted); } /* Document cité dans un e-mail « nouveau document » : fond teinté et mention « Nouveau » */ .sd-doc.is-signale, .sd-doc.is-signale:hover { background: var(--bx-accent-soft); border-radius: 6px; } .sd-doc-nouveau { display: inline-block; margin-right: 4px; padding: 1px 6px; border-radius: 3px; font-size: 11px; font-weight: 700; color: var(--bx-accent); background: var(--bx-surface); vertical-align: 1px; } .sd-muted { color: var(--bx-muted); } .sd-vide { margin: 0; padding: 22px 8px; text-align: center; font-size: 14px; color: var(--bx-muted); } .sd-note { margin: 10px 0 0; font-size: 12px; line-height: 1.55; color: var(--bx-muted); } .sd-note--haut { margin: 0 0 10px; } html[data-apparence] .sd-note a { color: var(--bx-accent); } .sd-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px; margin: 0 0 14px; } .sd-cases--4 { margin: 14px 0 0; } .sd-case { padding: 9px 12px; border: 1px solid var(--bx-border); border-radius: 4px; background: var(--bx-surface-2); } .sd-case span { display: block; font-size: 11.5px; color: var(--bx-muted); } .sd-case b { display: block; margin-top: 2px; font-family: var(--bx-mono); font-size: 14px; font-weight: 600; color: var(--bx-text); overflow-wrap: anywhere; } .sd-case small { display: block; font-size: 11px; color: var(--bx-muted); } /* Tableaux : lignes alternées, ligne et colonne survolées surlignées (lecture au croisement) */ .sd-defile { overflow-x: auto; border: 1px solid var(--bx-border); border-radius: 4px; } html[data-apparence] .sd-table { width: 100%; border-collapse: collapse; font-size: 13.5px; } html[data-apparence] .sd-table th, html[data-apparence] .sd-table td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--bx-line); text-align: left; white-space: nowrap; color: var(--bx-text); background: transparent; } html[data-apparence] .sd-table thead th { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--bx-muted); background: var(--bx-surface-2); border-bottom-color: var(--bx-border); } html[data-apparence] .sd-table tbody th { font-weight: 600; } html[data-apparence] .sd-table .n { text-align: right; font-family: var(--bx-mono); } html[data-apparence] .sd-table .is-dernier { font-weight: 700; } html[data-apparence] .sd-table tbody tr:last-child > * { border-bottom: 0; } html[data-apparence] .sd-table .is-colonne { background: var(--bx-accent-soft) !important; } html[data-apparence] .sd-table tbody tr:hover > * { background: var(--bx-accent-soft); } html[data-apparence] .sd-table tbody tr:hover > .is-colonne { background: color-mix(in srgb, var(--bx-accent) 16%, var(--bx-surface)) !important; } html[data-apparence] .sd-table a { color: var(--bx-accent); } html[data-apparence] .sd-table .bx-up { color: var(--bx-up); } html[data-apparence] .sd-table .bx-down { color: var(--bx-down); } html[data-apparence] .sd-table .sd-muted { color: var(--bx-muted); } /* Recommandations : couleurs neutres (le vert et le rouge restent réservés aux hausses et aux baisses) */ .sd-consensus { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin: 0 0 12px; } .sd-consensus-titre { font-size: 13px; font-weight: 600; color: var(--bx-text); } .sd-consensus-barre { display: flex; width: 180px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--bx-line); } .sd-consensus-detail { font-size: 12.5px; color: var(--bx-muted); } .sd-consensus-barre .sd-reco-achat_fort { background: var(--bx-navy); } .sd-consensus-barre .sd-reco-achat { background: var(--bx-accent); } .sd-consensus-barre .sd-reco-conserver { background: #B8C4D2; } .sd-consensus-barre .sd-reco-vente { background: #5A6B82; } .sd-consensus-barre .sd-reco-vente_forte { background: #2C3E55; } .sd-reco { display: inline-block; padding: 2px 9px; border-radius: 3px; font-size: 12px; font-weight: 600; border: 1px solid var(--bx-border); color: var(--bx-text); background: var(--bx-surface); } .sd-reco.sd-reco-achat_fort, .sd-reco.sd-reco-achat { background: var(--bx-accent-soft); border-color: transparent; color: var(--bx-accent-h); } .sd-reco.sd-reco-conserver { background: var(--bx-surface-2); } .sd-graphe { margin-top: 14px; } html[data-apparence] .sd-graphe .bx-btn svg { width: 16px; height: 16px; } .sd-graphe-outils { display: flex; justify-content: flex-end; margin: 10px 0 6px; } @media (max-width: 640px) { html[data-apparence] .sd { padding: 14px 12px 16px; } .sd-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -12px; margin-right: -12px; padding: 0 12px; } .sd-onglets::-webkit-scrollbar { display: none; } html[data-apparence] .sd-onglet { flex: 0 0 auto; } .sd-actu { grid-template-columns: minmax(0, 1fr) auto; } .sd-actu .sd-date { grid-column: 1 / -1; } .sd-doc { flex-wrap: wrap; } .sd-doc-txt { flex-basis: calc(100% - 40px); } html[data-apparence] .sd-doc-btn { margin-left: 32px; } html[data-apparence] .sd-table th, html[data-apparence] .sd-table td { padding: 8px 10px; } html[data-apparence] .sd-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--bx-surface); } } /* Fiche société : en-tête sur bandeau marine (nom, cours, variation, actions) puis cases des indicateurs */ html[data-apparence] .soc-entete { padding: 0 !important; overflow: hidden; } html[data-apparence] .soc-bandeau { background: var(--bx-navy); color: var(--bx-on-navy); padding: 20px 22px; } .soc-bandeau-haut { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } html[data-apparence] .soc-bandeau-logo .company-logo { width: 64px; height: 64px; background: #FFFFFF !important; border-color: #FFFFFF !important; } .soc-bandeau-nom { flex: 1; min-width: 200px; } html[data-apparence] .soc-bandeau-nom h1 { color: var(--bx-on-navy) !important; font-size: 26px; font-weight: 700; line-height: 1.15; margin: 0; } html[data-apparence] .soc-bandeau-meta, html[data-apparence] .soc-bandeau-meta span { color: var(--bx-on-navy-muted) !important; } .soc-bandeau-meta { display: flex; flex-wrap: wrap; margin-top: 6px; font-size: 13px; } .soc-bandeau-meta > * + *::before { content: '·'; margin: 0 8px; color: var(--bx-on-navy-faint); } html[data-apparence] .soc-bandeau-meta a { color: var(--bx-on-navy-muted) !important; text-decoration: none; } html[data-apparence] .soc-bandeau-meta a:hover { color: var(--bx-on-navy) !important; text-decoration: underline; } .soc-bandeau-cours { margin-left: auto; text-align: right; } .soc-bandeau-courbe { flex: 1 1 auto; display: flex; justify-content: center; line-height: 0; color: var(--bx-on-navy-muted); } /* au milieu, entre le nom et le cours */ .soc-bandeau-courbe ~ .soc-bandeau-cours { margin-left: 0; } .soc-bandeau-nom:has(+ .soc-bandeau-courbe) { flex: 0 1 auto; } .soc-courbe-sous { display: none; line-height: 0; } @media (max-width: 900px) { .soc-bandeau-courbe { display: none; } .soc-bandeau-nom:has(+ .soc-bandeau-courbe) { flex: 1; } .soc-bandeau-courbe ~ .soc-bandeau-cours { margin-left: auto; } .soc-bandeau-cours { width: fit-content; } .soc-courbe-sous { display: block; margin-top: 8px; } .soc-courbe-sous svg { display: block; width: 100%; height: 34px; } } .soc-courbe-seance.is-hausse { color: var(--bx-up-dk); } .soc-courbe-seance.is-baisse { color: var(--bx-down-dk); } /* Tracé de gauche à droite à l'affichage (comme les courbes des indices) */ .soc-courbe-seance polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: soc-trace .8s linear .15s forwards; } @keyframes soc-trace { to { stroke-dashoffset: 0; } } @media (prefers-reduced-motion: reduce) { .soc-courbe-seance polyline { animation: none; stroke-dashoffset: 0; } } html[data-apparence] .soc-bandeau .cours-principal { color: var(--bx-on-navy) !important; font-family: var(--bx-mono); font-size: 40px; font-weight: 600; line-height: 1; } html[data-apparence] .soc-bandeau #cours-variation { font-size: 15px; margin-top: 6px; font-family: var(--bx-mono); font-weight: 600; } html[data-apparence] .soc-bandeau .var-pos, html[data-apparence] .soc-bandeau .text-green-400 { color: var(--bx-up-dk) !important; } html[data-apparence] .soc-bandeau .var-neg, html[data-apparence] .soc-bandeau .text-red-400 { color: var(--bx-down-dk) !important; } html[data-apparence] .soc-bandeau .var-neu, html[data-apparence] .soc-bandeau .text-gray-400 { color: var(--bx-on-navy-muted) !important; } .soc-bandeau-bas { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--bx-navy-line); } .soc-bandeau-actions { display: flex; gap: 8px; flex-wrap: wrap; } html[data-apparence] .soc-bandeau .btn { background: transparent !important; color: var(--bx-on-navy) !important; border: 1px solid var(--bx-navy-line) !important; border-radius: 6px; } html[data-apparence] .soc-bandeau .btn:hover { border-color: var(--bx-on-navy) !important; } html[data-apparence] .soc-bandeau .btn.btn-primary { background: var(--bx-on-navy) !important; color: var(--bx-navy) !important; border-color: var(--bx-on-navy) !important; } .soc-bandeau-ref { font-size: 12px; } html[data-apparence] .soc-bandeau-ref, html[data-apparence] .soc-bandeau-ref span { color: var(--bx-on-navy-muted) !important; } html[data-apparence] .soc-cases { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 0 !important; padding: 16px 22px 0; } html[data-apparence] .soc-cases .soc-case-52 { font-size: .875rem; white-space: nowrap; } html[data-apparence] .soc-entete .societe-quick-tabs { margin-top: 0 !important; padding: 14px 22px 18px; } @media (max-width: 1439px) { html[data-apparence] .soc-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px) { html[data-apparence] .soc-bandeau { padding: 16px; } html[data-apparence] .soc-bandeau-logo .company-logo { width: 52px; height: 52px; } html[data-apparence] .soc-bandeau-nom h1 { font-size: 21px; } .soc-bandeau-cours { margin-left: 0; text-align: left; width: fit-content; flex: 0 0 auto; } .soc-bandeau-courbe ~ .soc-bandeau-cours { margin-left: 0; } html[data-apparence] .soc-bandeau .cours-principal { font-size: 32px; } html[data-apparence] .soc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 14px 16px 0; } .soc-bandeau-meta { gap: 2px 14px; } .soc-bandeau-meta > * + *::before { content: none; } html[data-apparence] .soc-cases .soc-case-52 { white-space: normal; } html[data-apparence] .soc-entete .societe-quick-tabs { padding: 12px 16px 16px; } } /* Calendrier : même présentation, plus lisible (quadrillage visible, numéros foncés, pastilles plus marquées). */ html[data-apparence] .cal-lisible { --cal-ligne: #D3DBE5; } html[data-apparence="c"] .cal-lisible { --cal-ligne: #24395A; } html[data-apparence] .cal-lisible .border-white\/5, html[data-apparence] .cal-lisible .border-white\/10 { border-color: var(--cal-ligne) !important; } html[data-apparence] .cal-lisible .text-gray-400 { color: var(--bx-text) !important; } html[data-apparence] .cal-lisible .grid > div > div > span.rounded-full { font-size: 13px; font-weight: 600; } html[data-apparence] .cal-lisible span.rounded.border { font-size: 11px !important; font-weight: 600; padding: 2px 6px; } html[data-apparence]:not([data-apparence="c"]) .cal-lisible .bg-blue-900\/40 { background: #DBEAFE !important; color: #1E40AF !important; border-color: #60A5FA !important; } html[data-apparence]:not([data-apparence="c"]) .cal-lisible .bg-purple-900\/40 { background: #EDE9FE !important; color: #5B21B6 !important; border-color: #A78BFA !important; } html[data-apparence]:not([data-apparence="c"]) .cal-lisible .bg-yellow-900\/40 { background: #FEF3C7 !important; color: #92400E !important; border-color: #F59E0B !important; } html[data-apparence]:not([data-apparence="c"]) .cal-lisible .bg-green-900\/40 { background: #DCFCE7 !important; color: #166534 !important; border-color: #4ADE80 !important; } html[data-apparence]:not([data-apparence="c"]) .cal-lisible .bg-red-900\/40 { background: #FEE2E2 !important; color: #991B1B !important; border-color: #F87171 !important; } html[data-apparence]:not([data-apparence="c"]) .cal-lisible .bg-cyan-900\/40 { background: #CFFAFE !important; color: #155E75 !important; border-color: #22D3EE !important; } /* Accueil : attente des premières cotations de la séance (pré-ouverture) */ .bx-attente { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 22px 12px; text-align: center; } .bx-attente b { font-size: 15px; font-weight: 600; color: var(--bx-text); } .bx-attente span { font-size: 13px; color: var(--bx-muted); line-height: 1.5; } .bx-card--navy .bx-attente b { color: var(--bx-on-navy); } .bx-card--navy .bx-attente span { color: var(--bx-on-navy-muted); } /* Graphiques d'indices : infobulle (assets/js/indice-graphe.js) */ .bx-tip { position: absolute; z-index: 5; pointer-events: none; opacity: 0; min-width: 150px; padding: 9px 12px; background: var(--bx-surface); border: 1px solid var(--bx-border-fort, var(--bx-border)); border-radius: 8px; box-shadow: 0 4px 14px rgba(11, 26, 46, .12); transition: opacity .12s, left .06s, top .06s; } .bx-tip-titre { font-size: 12px; color: var(--bx-muted); margin-bottom: 3px; white-space: nowrap; } .bx-tip-val { font-family: var(--bx-mono); font-size: 17px; font-weight: 600; color: var(--bx-text); line-height: 1.25; } .bx-tip-var { font-family: var(--bx-mono); font-size: 13px; font-weight: 600; margin-top: 2px; white-space: nowrap; } .bx-tip-ref { font-size: 11px; color: var(--bx-muted); white-space: nowrap; } /* Courbe des devises : police du site plutôt que la chasse fixe */ .dev .bx-tip-val, .dev .bx-tip-var { font-family: var(--bx-font); font-variant-numeric: tabular-nums; } /* Barre du bas : cinq onglets (téléphone) */ @media (max-width: 420px) { .bx-bnav-lien { font-size: 10px; } .bx-bnav-icone svg { width: 21px; height: 21px; } } /* Bouton « Précédent » au-dessus de la barre du bas (téléphone uniquement) */ .bx-retour { display: none; } @media (max-width: 899px) { .bx-retour:not([hidden]) { position: fixed; left: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); z-index: 899; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--bx-border-fort, var(--bx-border)); background: var(--bx-surface); color: var(--bx-text); box-shadow: 0 2px 10px rgba(11, 26, 46, .15); } .bx-retour svg { width: 20px; height: 20px; } } /* Listes d'actions : pas d'effet (cadre, surbrillance au toucher) sur le nom après un clic */ .table-cours a, .bx-table a, .table-cours tr, .bx-table tr { -webkit-tap-highlight-color: transparent; } .table-cours a:focus, .table-cours a:focus-visible, .bx-table a.bx-val:focus, .bx-table a.bx-val:focus-visible { outline: none !important; box-shadow: none !important; } /* Liste des actions (téléphone) : valeur, cours et variation du jour, sans défilement horizontal */ @media (max-width: 639px) { #tableau-cours { min-width: 0 !important; width: 100%; } #tableau-cours th[data-sort="variation_abs"], #tableau-cours td[data-col="variation_abs"], #tableau-cours th[data-sort="volume"], #tableau-cours td[data-col="volume"] { display: none; } #tableau-cours th, #tableau-cours td { padding-left: 8px !important; padding-right: 8px !important; } #tableau-cours .col-valeur .text-xs { display: none; } #tableau-cours { table-layout: fixed; } #tableau-cours thead th:first-child { width: 50%; } #tableau-cours th[data-sort="cours_actuel"] { width: 26%; } #tableau-cours th[data-sort="variation_pct"] { width: 24%; } #tableau-cours .societe-link { min-width: 0; gap: 6px; } #tableau-cours .societe-link > div { min-width: 0; overflow: hidden; } #tableau-cours .company-logo { flex: 0 0 auto; width: 26px; height: 26px; } #tableau-cours .societe-nom { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } #tableau-cours td[data-col="cours_actuel"] { font-size: 13.5px; } #tableau-cours td[data-col="cours_actuel"] { white-space: nowrap; text-align: right; } #tableau-cours th[data-sort="variation_pct"], #tableau-cours td[data-col="variation_pct"] { display: table-cell !important; text-align: right; white-space: nowrap; } #tableau-cours .badge-var { font-size: 11.5px; padding: 2px 6px; } } /* Onglets des marchés (téléphone) : défilent au lieu d'élargir la page */ @media (max-width: 639px) { .marches-onglets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .marches-onglets::-webkit-scrollbar { display: none; } .marches-onglets .tab-btn { white-space: nowrap; flex: 0 0 auto; } } /* Menu latéral ouvert : la barre du bas et le bouton Précédent ne le recouvrent pas */ html.bx-drawer-lock .bx-retour, html.bx-drawer-lock .bx-bnav { display: none !important; } /* Actualités : fil par jour (actualites.php) */ .af-tete { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px 24px; flex-wrap: wrap; margin: 0 0 14px; } .af-sous { margin: 4px 0 0; font-size: 13px; color: var(--bx-muted); } .af-recherche { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } html[data-apparence] .af-recherche input, html[data-apparence] .af-recherche select { height: 38px; padding: 0 10px; border: 1px solid var(--bx-border); border-radius: 4px; background: var(--bx-surface); color: var(--bx-text); font: inherit; font-size: 14px; } .af-recherche input { width: 240px; } .af-recherche select { max-width: 220px; } .af-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 16px; } html[data-apparence] .af-filtres a { padding: 6px 12px; border: 1px solid var(--bx-border); border-radius: 4px; background: var(--bx-surface); color: var(--bx-text); font-size: 13px; font-weight: 600; text-decoration: none; } html[data-apparence] .af-filtres a:hover { border-color: var(--bx-navy); } html[data-apparence] .af-filtres a.is-on { background: var(--bx-navy); border-color: var(--bx-navy); color: #FFFFFF; } html[data-apparence] .af-filtres a.af-effacer { border-color: transparent; background: none; color: var(--bx-accent); font-weight: 500; } .af-jour { margin: 0 0 16px; } .af-jour-titre { margin: 0 0 6px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .05em; text-transform: uppercase; color: var(--bx-muted) !important; } .af-liste { list-style: none; margin: 0; padding: 0; border: 1px solid var(--bx-border); border-radius: 6px; background: var(--bx-surface); overflow: hidden; } .af-ligne { display: grid; grid-template-columns: 44px 36px minmax(0, 1fr) auto; gap: 4px 12px; align-items: start; padding: 11px 14px; } .af-ligne + .af-ligne { border-top: 1px solid var(--bx-line); } .af-ligne:hover { background: var(--bx-accent-soft); } .af-heure { padding-top: 2px; font-size: 12px; color: var(--bx-muted); } .af-logo { line-height: 0; } .af-logo .company-logo { width: 32px; height: 32px; } .af-logo-vide { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid var(--bx-border); border-radius: 6px; background: var(--bx-surface); font: 700 10.5px var(--bx-mono); color: var(--bx-navy); } .af-corps { min-width: 0; } html[data-apparence] .af-titre { display: block; color: var(--bx-text); font-size: 14.5px; font-weight: 600; line-height: 1.4; text-decoration: none; } html[data-apparence] .af-titre:hover { color: var(--bx-accent); text-decoration: underline; } .af-resume { margin: 2px 0 0; font-size: 13px; line-height: 1.45; color: var(--bx-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .af-meta { display: block; margin-top: 3px; font-size: 12px; color: var(--bx-muted); } html[data-apparence] .af-meta a { color: var(--bx-accent); text-decoration: none; } html[data-apparence] .af-meta a:hover { text-decoration: underline; } .af-tag { margin-top: 2px; padding: 2px 8px; border-radius: 3px; font-size: 11px; font-weight: 700; white-space: nowrap; } /* Couleurs neutres : le vert et le rouge restent réservés aux hausses et aux baisses */ .af-tag--resultats { background: #EEF4FB; color: #00508F; } .af-tag--assemblees { background: #F1EFE8; color: #444441; } .af-tag--dividendes { background: #EEEDFE; color: #3C3489; } .af-tag--communiques { background: #F1F4F8; color: #4A5D72; } .af-tag--seance { background: #FAEEDA; color: #633806; } .af-tag--esg { background: #ECEFF4; color: #3B4A63; } .af-pages { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; } .af-pages div { display: flex; gap: 8px; } @media (max-width: 640px) { .af-recherche { width: 100%; } .af-recherche input { flex: 1 1 100%; width: auto; } .af-recherche select { flex: 1; max-width: none; } .af-filtres { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 0 16px; } .af-filtres::-webkit-scrollbar { display: none; } html[data-apparence] .af-filtres a { flex: 0 0 auto; } .af-ligne { grid-template-columns: 32px minmax(0, 1fr); padding: 10px 12px; } .af-heure { display: none; } .af-tag { grid-column: 2; justify-self: start; margin-top: 4px; } } /* Lisibilité des lignes (choix 1 + 3, réparti par page pour ne pas surcharger) : - grands tableaux de cours et de portefeuille (liste des actions, dividendes, watchlist, portefeuilles) : en-tête marine et ligne surlignée au survol ; - tableaux courts (accueil, indices, tableau de bord, console) : une ligne sur deux légèrement teintée. */ :root { --bx-ligne-alt: #F3F6FB; --bx-ligne-survol: #E4EEFA; } html[data-apparence="c"], html.dark { --bx-ligne-alt: #13243D; --bx-ligne-survol: #1A3152; } html[data-apparence] .table-cours thead th, html[data-apparence] .pf-table thead th { background: var(--bx-entete-tableau) !important; color: var(--bx-entete-tableau-texte) !important; border-bottom: 1px solid var(--bx-entete-tableau-trait) !important; } /* En-tête des grands tableaux : bleu-gris clair, texte marine (mode sombre : marine) */ html[data-apparence] { --bx-entete-tableau: #E6EDF6; --bx-entete-tableau-texte: #08244E; --bx-entete-tableau-trait: #CFDAE7; } html[data-apparence="c"], html.dark { --bx-entete-tableau: #13243D; --bx-entete-tableau-texte: #C9D4E3; --bx-entete-tableau-trait: #1F3554; } html[data-apparence] .table-cours thead th a, html[data-apparence] .table-cours thead th button, html[data-apparence] .pf-table thead th a, html[data-apparence] .pf-table thead th button { color: inherit !important; } html[data-apparence] .table-cours tbody tr:hover > td, html[data-apparence] .pf-table tbody tr:hover > td { background: var(--bx-ligne-survol) !important; } html[data-apparence] .bx-table td:first-child, html[data-apparence] .bx-table th:first-child { padding-left: 8px !important; } html[data-apparence] .bx-table td:last-child, html[data-apparence] .bx-table th:last-child { padding-right: 8px !important; } /* « Mon espace ▾ » (en-tête) et carte « Votre espace » (menu latéral) */ .bx-compte .bx-account { background: none; border: 0; cursor: pointer; font: inherit; } .bx-compte-chevron { transition: transform .15s; } .bx-compte.is-open .bx-compte-chevron { transform: rotate(180deg); } html[data-apparence] .bx-compte-sous { left: auto; right: 0; min-width: 220px; } html[data-apparence] .bx-compte-sous:has(.bx-compte-offre) { width: 330px; padding: 0; } .bx-compte-offre { padding: 12px 14px 14px; } .bx-compte-f { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; } .bx-compte-f + .bx-compte-f { border-top: 1px solid var(--bx-line); } .bx-compte-ic { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; background: var(--bx-accent-soft); color: var(--bx-accent); } .bx-compte-f b { display: block; font-size: 13.5px; font-weight: 700; color: var(--bx-text); } .bx-compte-f small { display: block; margin-top: 1px; font-size: 12.5px; line-height: 1.4; color: var(--bx-muted); white-space: normal; } .bx-compte-cta { display: flex; align-items: center; gap: 12px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--bx-line); } html[data-apparence] .bx-compte-sous .bx-compte-cta a.bx-btn { display: inline-flex; padding: 8px 14px; color: #FFFFFF !important; background: var(--bx-navy); border-color: var(--bx-navy); } html[data-apparence] .bx-compte-sous a.bx-compte-lien { display: inline; padding: 0; color: var(--bx-accent) !important; font-weight: 600; } html[data-apparence] .bx-compte-sous a.bx-compte-lien:hover { background: none; text-decoration: underline; } html[data-apparence] .bx-compte-sous a.bx-compte-sortie { border-top: 1px solid var(--bx-line); } .bx-drawer-offre { margin: 0 0 12px; padding: 4px 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); } .bx-drawer-offre .bx-compte-f + .bx-compte-f { border-top-color: rgba(255, 255, 255, .12); } .bx-drawer-offre .bx-compte-ic { background: rgba(255, 255, 255, .12); color: #FFFFFF; } .bx-drawer-offre .bx-compte-f b { color: #FFFFFF; } .bx-drawer-offre .bx-compte-f small { color: #B5C7DE; } /* Actualité : sociétés citées par une dépêche ou un communiqué (actualite.php) */ .act-concernees { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 0 16px; font-size: 13px; color: var(--bx-muted); } .act-concernees > span { margin-right: 4px; font-weight: 600; } /* Actualité : résumé « En bref » rédigé à partir du document officiel */ .act-enbref { margin: 18px 0 20px; } .act-enbref-titre { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bx-muted); } .act-enbref-texte { margin: 0; font-size: 17px; line-height: 1.7; color: var(--bx-text); } .act-enbref-note { margin: 8px 0 0; font-size: 12.5px; color: var(--bx-muted); } .act-enbref-texte strong { font-weight: 700; color: var(--bx-text); } .act-enbref-texte p { margin: 0 0 12px; } .act-enbref-texte p:last-child { margin-bottom: 0; } /* Colonne de l'espace : un trait sépare Mon espace, Administration et Application */ .bx-side-title--admin, .bx-side-block .bx-side-title { margin-top: 14px; padding-top: 16px; border-top: 1px solid #23477F; } .bx-side-logout { border-top: 1px solid #23477F; padding-top: 16px; } /* Fenêtres de confirmation et de message (bx.js : bxConfirmer, bxMessage, data-confirmer) */ .bx-dlg { width: min(420px, calc(100vw - 32px)); padding: 20px 20px 16px; border: 1px solid var(--bx-border); border-radius: 12px; background: var(--bx-surface); color: var(--bx-text); font-family: var(--bx-font); } .bx-dlg::backdrop { background: rgba(7, 17, 31, .5); } .bx-dlg-titre { margin: 0 0 8px !important; outline: none; font-size: 17px !important; font-weight: 700 !important; color: var(--bx-text) !important; } .bx-dlg-texte { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--bx-text); white-space: pre-line; } .bx-dlg-pied { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; } .bx-dlg-pied [hidden] { display: none; } /* Menu « ⋯ » du portefeuille : case à cocher (e-mail des dividendes à intégrer) */ .pf-sel-menu-liste .pf-sel-case { display: flex; align-items: flex-start; gap: 10px; white-space: normal; text-align: left; } .pf-sel-case small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--bx-muted); } .pf-sel-coche { flex: 0 0 auto; width: 16px; height: 16px; margin-top: 2px; border: 1.5px solid var(--bx-border-fort, var(--bx-muted)); border-radius: 4px; background: var(--bx-surface); } .pf-sel-case[aria-checked="true"] .pf-sel-coche { border-color: var(--bx-accent); background: var(--bx-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 12px no-repeat; } /* Pied de page : liens et réseaux aux couleurs du site, même avec l'ancien thème clair (myceatn.css) */ html[data-apparence] .bx-footer ul a { color: var(--bx-text) !important; } html[data-apparence] .bx-footer ul a:hover { color: var(--bx-accent) !important; } html[data-apparence] .bx-footer .bx-footer-guide { color: var(--bx-accent) !important; } html[data-apparence] .bx-footer-social a { color: var(--bx-muted-2) !important; } html[data-apparence] .bx-footer-social a[href*="facebook"] { color: #1877F2 !important; } html[data-apparence] .bx-footer-social a[href*="linkedin"] { color: #0A66C2 !important; } html[data-apparence] .bx-footer-social a[href*="instagram"] { color: #E4405F !important; } html[data-apparence] .bx-footer-social a[href*="twitter"], html[data-apparence] .bx-footer-social a[href*="x.com"] { color: var(--bx-text) !important; } /* Simulateur CEA : onglet choisi en marine, texte blanc (lisible), l'autre en gris */ html[data-apparence] .tab-btn[role="tab"] { border: 1px solid transparent; } html[data-apparence] .tab-btn[role="tab"][aria-selected="true"] { background: var(--bx-navy) !important; color: #FFFFFF !important; } html[data-apparence] .tab-btn[role="tab"][aria-selected="false"] { background: transparent !important; color: var(--bx-muted) !important; } html[data-apparence] .tab-btn[role="tab"][aria-selected="false"]:hover { color: var(--bx-text) !important; } /* Actualités : lignes plus lisibles, logos plus grands (fil par jour, actualites.php) */ .af-ligne { grid-template-columns: 52px 52px minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; padding: 14px 18px; } .af-heure { padding-top: 0; font-size: 13px; } html[data-apparence] .af-logo .company-logo, .af-logo-vide { width: 48px; height: 48px; border-radius: 8px !important; } html[data-apparence] .af-logo .company-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; } .af-logo-vide { font-size: 13px; } html[data-apparence] .af-titre { font-size: 16.5px; line-height: 1.45; } .af-resume { margin-top: 3px; font-size: 14px; } .af-meta { margin-top: 5px; font-size: 13px; } .af-tag { align-self: center; padding: 4px 10px; font-size: 12px; } .af-jour-titre { font-size: 13px !important; margin-bottom: 8px !important; } @media (max-width: 640px) { .af-ligne { grid-template-columns: 44px minmax(0, 1fr); gap: 4px 12px; padding: 12px 14px; } html[data-apparence] .af-logo .company-logo, .af-logo-vide { width: 44px; height: 44px; } html[data-apparence] .af-titre { font-size: 15.5px; } } /* Bilan de séance (includes/bilan_seance.php, bilanHtml) : vert pour les hausses, rouge pour les baisses */ .bl { margin: 4px 0 18px; } .bl-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; } .bl-case { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border: 1px solid var(--bx-border); border-radius: 10px; background: var(--bx-surface-2); } .bl-lbl { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bx-muted); } .bl-case b { font-size: 21px; font-weight: 700; color: var(--bx-text); white-space: nowrap; } .bl-case b small { font-size: 13px; color: var(--bx-muted); } .bl-note { font-size: 12.5px; color: var(--bx-muted); } .bl-var { display: inline-block; font: 700 13.5px var(--bx-mono); white-space: nowrap; color: var(--bx-muted); } .bl-var.is-up { color: var(--bx-up); } .bl-var.is-down { color: var(--bx-down); } .bl-repartition { margin: 18px 0 4px; } .bl-barre { display: flex; height: 10px; overflow: hidden; border-radius: 5px; background: var(--bx-surface-2); } .bl-barre span { display: block; height: 100%; } .bl-barre .is-up { background: var(--bx-up); } .bl-barre .is-down { background: var(--bx-down); } .bl-barre .is-flat { background: var(--bx-border-fort, #B8C4D2); } .bl-legende { display: flex; justify-content: space-between; gap: 10px; margin-top: 7px; font-size: 13.5px; color: var(--bx-muted); } .bl-legende b { color: var(--bx-text); } .bl-legende .is-up b { color: var(--bx-up); } .bl-legende .is-down b { color: var(--bx-down); } .bl-listes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-top: 18px; } .bl-liste { border: 1px solid var(--bx-border); border-radius: 10px; overflow: hidden; } html .bl-liste h3 { margin: 0 !important; padding: 10px 14px; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .04em; text-transform: uppercase; color: var(--bx-text) !important; background: var(--bx-surface-2); border-bottom: 1px solid var(--bx-border); } .bl-liste ol { list-style: none; margin: 0; padding: 0; } .bl-liste li + li { border-top: 1px solid var(--bx-line); } .bl-liste a { display: flex; align-items: center; gap: 10px; padding: 9px 14px; color: var(--bx-text); text-decoration: none; } .bl-liste a:hover { background: var(--bx-ligne-survol, var(--bx-surface-2)); } .bl-nom { flex: 1; min-width: 0; display: flex; flex-direction: column; } .bl-nom b { overflow: hidden; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; } .bl-nom small { font-size: 11.5px; color: var(--bx-muted); } .bl-val { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .bl-val b { font-size: 13.5px; } /* Menu du haut : au survol, le lien passe en bleu, sur un fond bleu très léger, et un trait bleu se dessine dessous */ html[data-apparence] .bx-header .bx-nav-link { position: relative; transition: color .15s ease, background-color .15s ease; } html[data-apparence] .bx-header .bx-nav-link::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: -2px; height: 2px; border-radius: 2px; background: var(--bx-accent, #0070C9); transform: scaleX(0); transform-origin: center; transition: transform .2s ease; } html[data-apparence] .bx-header .bx-nav-link:hover { color: var(--bx-accent, #0070C9); background: color-mix(in srgb, var(--bx-accent, #0070C9) 7%, transparent); } html[data-apparence] .bx-header .bx-nav-link:hover::after { transform: scaleX(1); } html[data-apparence] .bx-header .bx-nav-link.is-active::after { display: none; } /* Sous-menus : ligne survolée en bleu */ html[data-apparence] .bx-nav-sous a { transition: color .15s ease, background-color .15s ease; } html[data-apparence] .bx-nav-sous a:hover { color: var(--bx-accent, #0070C9) !important; background: var(--bx-accent-soft, #EAF3FB); } @media (prefers-reduced-motion: reduce) { html[data-apparence] .bx-header .bx-nav-link, html[data-apparence] .bx-header .bx-nav-link::after, html[data-apparence] .bx-nav-sous a { transition: none; } } /* Page Marchés : en-tête compact et barre d'outils sur une ligne (marches.php) */ .mk-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; } html[data-apparence] .mk-titre { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.25; } .mk-meta { margin: 2px 0 0; font-size: 13px; color: var(--bx-muted); } .mk-meta .font-mono { color: var(--bx-text); font-weight: 600; } .mk-barre { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 14px; padding: 8px; border: 1px solid var(--bx-border); border-radius: 10px; background: var(--bx-surface); } .mk-seg { display: inline-flex; padding: 3px; border-radius: 8px; background: var(--bx-surface-2); border: 1px solid var(--bx-border); } html[data-apparence] .mk-seg a, html[data-apparence] .mk-seg button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 0; border-radius: 6px; background: none; color: var(--bx-muted-2) !important; font: 600 13px var(--bx-font); text-decoration: none; cursor: pointer; white-space: nowrap; } html[data-apparence] .mk-seg a:hover, html[data-apparence] .mk-seg button:hover { color: var(--bx-accent) !important; } html[data-apparence] .mk-seg a.is-on, html[data-apparence] .mk-seg button.active { background: var(--bx-navy); color: #FFFFFF !important; } .mk-outils { display: flex; flex: 1 1 320px; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; } html[data-apparence] .mk-champ { height: 36px; padding: 0 10px; border: 1px solid var(--bx-border); border-radius: 8px; background: var(--bx-surface); color: var(--bx-text); font: 13.5px var(--bx-font); } html[data-apparence] .mk-champ:focus { border-color: var(--bx-accent); outline: none; } .mk-recherche { width: 200px; } html[data-apparence] .mk-outil { display: inline-flex; align-items: center; height: 36px; padding: 0 12px; border: 1px solid var(--bx-border); border-radius: 8px; background: var(--bx-surface); color: var(--bx-text) !important; font: 600 13px var(--bx-font); text-decoration: none; cursor: pointer; } html[data-apparence] .mk-outil:hover { border-color: var(--bx-accent); color: var(--bx-accent) !important; } @media (max-width: 760px) { .mk-barre { padding: 6px; } .mk-seg { overflow-x: auto; max-width: 100%; } .mk-outils { flex-basis: 100%; justify-content: stretch; } .mk-outils .mk-champ { flex: 1 1 140px; } .mk-recherche { width: auto; } } /* Bandeau des cours : même bleu marine que le bandeau de la fiche société */ html[data-apparence] { --bx-bandeau: var(--bx-navy); --bx-bandeau-line: var(--bx-navy-line); } html[data-apparence="c"] { --bx-bandeau: #0B1728; --bx-bandeau-line: #1A2C47; } /* Message bref après un enregistrement (bx.js : bxToast) */ .bx-toast { position: fixed; left: 50%; bottom: 24px; z-index: 130; max-width: min(560px, calc(100vw - 32px)); margin: 0; padding: 11px 18px; border-radius: 8px; background: var(--bx-navy, #08244E); color: #FFFFFF; font: 500 14px var(--bx-font); text-align: center; transform: translateX(-50%); opacity: 0; pointer-events: none; transition: opacity .2s; } .bx-toast.is-vis { opacity: 1; } .bx-toast.is-erreur { background: #8A1C14; } /* Actualités : la date du jour suffit (titre de chaque groupe), plus de colonne des heures */ .af-ligne { grid-template-columns: 52px minmax(0, 1fr) auto; } @media (max-width: 640px) { .af-ligne { grid-template-columns: 44px minmax(0, 1fr); } } /* Nom de la société dans les tableaux : aucun effet au survol (la ligne entière est déjà surlignée) */ html[data-theme] table .societe-link:hover, html[data-theme] table .societe-link:focus, html[data-theme] table .col-valeur a:hover, html[data-theme] table .col-valeur a:focus { background: transparent !important; box-shadow: none !important; transform: none !important; color: inherit !important; text-decoration: none !important; } html[data-theme] table .societe-link:hover .societe-nom, html[data-theme] table .col-valeur a:hover .societe-nom { text-decoration: none !important; } /* Actualités, option G : une carte par actualité, peu espacées (toute la carte mène à l'actualité) */ .af-liste { border: 0; border-radius: 0; background: none; overflow: visible; display: flex; flex-direction: column; gap: 0; } .af-liste > .af-ligne { border-radius: 0; } .af-liste > .af-ligne + .af-ligne { margin-top: -1px; } .af-liste > .af-ligne:first-child { border-radius: 8px 8px 0 0; } .af-liste > .af-ligne:last-child { border-radius: 0 0 8px 8px; } .af-liste > .af-ligne:only-child { border-radius: 8px; } .af-liste > .af-ligne:hover { z-index: 1; } .af-ligne { position: relative; border: 1px solid var(--bx-border); border-radius: 8px; background: var(--bx-surface); align-items: start; transition: border-color .15s, background-color .15s; } .af-ligne + .af-ligne { border-top: 1px solid var(--bx-border); } .af-ligne:hover { border-color: color-mix(in srgb, var(--bx-accent) 45%, var(--bx-border)); background: color-mix(in srgb, var(--bx-accent-soft) 50%, var(--bx-surface)); } html[data-apparence] .af-titre::after { content: ''; position: absolute; inset: 0; } html[data-apparence] .af-titre:hover { text-decoration: none; } html[data-apparence] .af-ligne:hover .af-titre { color: var(--bx-accent); } html[data-apparence] .af-meta a { position: relative; z-index: 1; } .af-resume { -webkit-line-clamp: 2; } .af-tag { align-self: start; margin-top: 2px; } /* Bilan de séance publié par bourso.tn : icône de courbe à la place des initiales */ .af-logo-bourso { background: var(--bx-accent-soft); border-color: transparent; color: var(--bx-accent); } /* Pied de page (apparences claires) : liens et titres en bleu foncé */ html[data-apparence]:not([data-apparence="b"]):not([data-apparence="c"]):not(.dark) .bx-footer ul a, html[data-apparence]:not([data-apparence="b"]):not([data-apparence="c"]):not(.dark) .bx-footer h4 { color: var(--bx-navy) !important; } html[data-apparence]:not([data-apparence="b"]):not([data-apparence="c"]):not(.dark) .bx-footer ul a:hover { color: var(--bx-accent) !important; } /* Fiche société : les six chiffres de la séance dans un seul bandeau, sur une ligne */ html[data-apparence] .soc-cases { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.2fr) minmax(0, 1.4fr); gap: 0; margin: 0 !important; padding: 0; border: 1px solid var(--bx-border-fort); border-top: 0; border-radius: 0; background: var(--bx-fond-case); overflow: hidden; } html[data-apparence] .soc-cases .cours-stat { padding: 11px 14px !important; border: 0 !important; border-radius: 0; background: transparent !important; min-width: 0; } html[data-apparence] .soc-cases .cours-stat + .cours-stat { box-shadow: -1px 0 0 var(--bx-border-fort); } html[data-apparence] .soc-cases .cours-stat-label { margin: 0 0 3px; font-size: 11px; } html[data-apparence] .soc-cases .cours-stat-val { font-size: 1rem; white-space: nowrap; } html[data-apparence] .soc-cases .soc-case-52 { font-size: .8125rem; } .soc-52-barre { position: relative; display: block; height: 4px; margin-top: 7px; border-radius: 2px; background: var(--bx-border-fort); } .soc-52-barre i { position: absolute; top: 50%; width: 8px; height: 8px; border-radius: 50%; background: var(--bx-accent); transform: translate(-50%, -50%); } @media (max-width: 1240px) { html[data-apparence] .soc-cases { grid-template-columns: repeat(3, minmax(0, 1fr)); } html[data-apparence] .soc-cases .cours-stat:nth-child(n+4) { border-top: 1px solid var(--bx-border-fort) !important; } html[data-apparence] .soc-cases .cours-stat:nth-child(4) { box-shadow: none; } } @media (max-width: 640px) { html[data-apparence] .soc-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } html[data-apparence] .soc-cases .cours-stat:nth-child(n+3) { border-top: 1px solid var(--bx-border-fort) !important; } html[data-apparence] .soc-cases .cours-stat:nth-child(odd) { box-shadow: none; } html[data-apparence] .soc-cases .cours-stat:nth-child(4) { box-shadow: -1px 0 0 var(--bx-border-fort); } html[data-apparence] .soc-cases .cours-stat { padding: 9px 12px !important; } html[data-apparence] .soc-cases .soc-case-52 { white-space: nowrap; font-size: .75rem; } } /* Accueil : actualités en cartes, comme la page Actualités (index.php, bxNews) */ .af-liste--accueil .af-ligne { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 4px 12px; padding: 11px 14px; } html[data-apparence] .af-liste--accueil .af-logo .company-logo, .af-liste--accueil .af-logo-vide { width: 40px; height: 40px; } html[data-apparence] .af-liste--accueil .af-titre { font-size: 15px; } .af-liste--accueil .af-resume { -webkit-line-clamp: 1; font-size: 13.5px; } .af-liste--accueil .af-meta { font-size: 12.5px; } .af-liste--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .af-liste.af-liste--2 > .af-ligne { margin-top: 0; border-radius: 8px; } @media (max-width: 767px) { .af-liste--2 { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 640px) { .af-liste--accueil .af-ligne { grid-template-columns: 40px minmax(0, 1fr); } } /* Portefeuilles : envois par e-mail du portefeuille affiché (includes/portefeuille_outils.php, pfSelecteur) */ .pf-sel-emails { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; margin: 2px 0 0; font-size: 13px; color: var(--bx-muted); } .pf-sel-emails svg { width: 16px; height: 16px; flex: none; color: var(--bx-accent); } .pf-sel-emails b { font-weight: 600; color: var(--bx-text); } html[data-apparence] .pf-sel-emails a { color: var(--bx-accent); font-weight: 600; text-decoration: none; } html[data-apparence] .pf-sel-emails a:hover { text-decoration: underline; } html[data-apparence] .pf-sel-lien { padding: 0; border: 0; background: none; color: var(--bx-accent); font: inherit; font-weight: 600; cursor: pointer; } html[data-apparence] .pf-sel-lien:hover { text-decoration: underline; } /* ── Messages lisibles dans les thèmes clairs ── Beaucoup de messages (connexion, mot de passe, inscription, simulateur, alertes, espace) gardent les classes de l'ancien thème sombre : texte vert, rouge, jaune ou bleu très clair sur un fond presque transparent, illisible sur fond blanc. Dans les thèmes clairs, ces couleurs deviennent foncées sur un fond pâle de la même teinte. Les bandeaux sombres (en-têtes marine) gardent leurs couleurs claires. */ html[data-apparence]:not([data-apparence="c"]) :is(.text-green-100, .text-green-200, .text-green-300, .text-emerald-200, .text-emerald-300):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { color: #166534 !important; } html[data-apparence]:not([data-apparence="c"]) :is(.text-red-100, .text-red-200, .text-red-300, .text-rose-300):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { color: #991B1B !important; } html[data-apparence]:not([data-apparence="c"]) :is(.text-yellow-200, .text-yellow-300, .text-amber-200, .text-amber-300, .text-orange-300):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { color: #92400E !important; } html[data-apparence]:not([data-apparence="c"]) :is(.text-blue-200, .text-blue-300, .text-sky-300, .text-cyan-300):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { color: #1E40AF !important; } html[data-apparence]:not([data-apparence="c"]) :is(.bg-green-900\/20, .bg-green-900\/30, .bg-green-900\/40, .bg-green-900\/50, .bg-emerald-900\/30, .bg-emerald-900\/40):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { background-color: #F0FDF4 !important; } html[data-apparence]:not([data-apparence="c"]) :is(.bg-red-900\/20, .bg-red-900\/30, .bg-red-900\/40, .bg-red-900\/50):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { background-color: #FEF2F2 !important; } html[data-apparence]:not([data-apparence="c"]) :is(.bg-yellow-900\/20, .bg-yellow-900\/30, .bg-yellow-900\/40, .bg-amber-900\/20, .bg-amber-900\/30, .bg-amber-900\/40):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { background-color: #FFFBEB !important; } html[data-apparence]:not([data-apparence="c"]) :is(.bg-blue-900\/20, .bg-blue-900\/30, .bg-blue-900\/40, .bg-cyan-900\/30, .bg-cyan-900\/40):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { background-color: #EFF6FF !important; } html[data-apparence]:not([data-apparence="c"]) :is(.border-green-500\/30, .border-green-500\/40, .border-green-600, .border-green-700\/50, .border-green-800\/40, .border-emerald-500\/30):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { border-color: #86EFAC !important; } html[data-apparence]:not([data-apparence="c"]) :is(.border-red-500\/30, .border-red-500\/40, .border-red-700\/30, .border-red-700\/50, .border-red-800\/40):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { border-color: #FCA5A5 !important; } html[data-apparence]:not([data-apparence="c"]) :is(.border-yellow-700\/30, .border-yellow-500\/30, .border-yellow-500\/40, .border-amber-500\/30, .border-amber-700\/30):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { border-color: #FCD34D !important; } html[data-apparence]:not([data-apparence="c"]) :is(.border-blue-500\/30, .border-blue-800\/40, .border-cyan-500\/30):not(:is(.bx-hero--dark, .soc-bandeau, .bx-navy-zone) *) { border-color: #93C5FD !important; } /* Lecture des courbes au doigt (assets/js/lecture-graphe.js) : ligne fixe au-dessus du graphique, sur mobile seulement */ .bx-lecture { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 12px; min-height: 30px; padding: 4px 2px 6px; margin: 0 0 4px; border-bottom: 1px dashed var(--bx-line); font-size: 13px; color: var(--bx-text); } .bx-lecture-invite { font-size: 12px; color: var(--bx-muted); } .bx-lecture .bx-lec-date { font-size: 12px; color: var(--bx-muted); } .bx-lecture .bx-lec-val { font-family: var(--bx-mono, monospace); font-size: 16px; font-weight: 700; } .bx-lecture .bx-lec-var { font-family: var(--bx-mono, monospace); font-size: 13px; font-weight: 600; } .bx-lecture .bx-lec-plus { font-size: 12px; color: var(--bx-muted); } /* Info-bulle de la fiche société (ECharts) reprise dans la ligne : l'essentiel seulement */ .bx-lecture .ech-tip { min-width: 0; padding: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; } .bx-lecture .ech-tip-date, .bx-lecture .ech-tip-prix { margin: 0; } .bx-lecture .ech-tip-grille { display: none; } /* ─── Page Devises (devises.php, assets/js/devises.js) ─────────────────────────────────────────────── */ /* Police du site partout, chiffres de même largeur (colonnes alignées) ; les variations d'une devise ne sont ni un gain ni une perte : couleur neutre, jamais de vert ni de rouge */ .dev, .dev .dev-input, .dev .dev-select, .dev-axe { font-family: var(--bx-font); font-variant-numeric: tabular-nums; } .dev .bx-card { margin-bottom: 16px; } .dev-tete { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; } .dev-h1 { margin: 0 !important; } .dev-paire { position: relative; flex: 0 0 auto; width: 64px; height: 40px; } .dev-paire .dev-drapeau:last-child { position: absolute; left: 26px; top: 0; box-shadow: 0 0 0 3px var(--bx-bg, #F3F5F8); } .dev-drapeau { display: inline-block; flex: 0 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(11, 26, 46, .08); vertical-align: middle; } .dev-intro { margin: 6px 0 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; } .dev-intro-val { font-size: 22px; font-weight: 600; color: var(--bx-text); } .dev-titre { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--bx-text); } .dev-muet { color: var(--bx-muted); font-weight: 400; } .dev-note { margin: 12px 0 0; font-size: 13px; color: var(--bx-muted); } .dev-var { font-size: 13px; color: var(--bx-muted); white-space: nowrap; } .dev-mini { display: block; color: var(--bx-accent); } /* Euro et dollar en tête de la page générale */ .dev-vedettes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 0 0 16px; } html[data-apparence] .dev-vedette { display: flex; flex-direction: column; gap: 10px; margin: 0 !important; color: var(--bx-text); text-decoration: none; transition: border-color .15s; } html[data-apparence] .dev-vedette:hover { border-color: var(--bx-accent); } .dev-vedette-tete { display: flex; align-items: center; gap: 10px; } .dev-vedette-tete > span { display: flex; flex-direction: column; font-size: 13px; } .dev-vedette-tete strong { font-size: 15px; font-weight: 600; } .dev-vedette-val { font-size: 28px; font-weight: 600; line-height: 1.1; } .dev-vedette-val small { font-size: 14px; font-weight: 500; color: var(--bx-muted); } .dev-vedette-pied { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; } /* Convertisseur : deux champs, chacun avec sa devise (drapeau) ; bouton d'inversion au milieu, dessous sur téléphone */ .dev-conv-ligne { display: flex; align-items: flex-end; gap: 12px; } .dev-conv-ligne.is-inverse { flex-direction: row-reverse; } .dev-champ { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .dev-devise { display: flex; align-items: center; gap: 8px; min-height: 34px; font-size: 14px; font-weight: 500; color: var(--bx-text); } .dev-devise-drapeau { line-height: 0; } html[data-apparence] .dev-select { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0 28px 0 8px; border: 1px solid var(--bx-border); border-radius: 8px; background-color: var(--bx-surface); color: var(--bx-text); font-size: 14px; font-weight: 500; } html[data-apparence] .dev-input { width: 100%; height: 56px; padding: 0 16px; border: 1px solid var(--bx-border); border-radius: 10px; background: var(--bx-surface-2); color: var(--bx-text); font-size: 24px; font-weight: 600; } html[data-apparence] .dev-input:focus { outline: 2px solid var(--bx-accent); outline-offset: 1px; border-color: transparent; } .dev-inverser { flex: 0 0 auto; width: 44px; height: 44px; margin-bottom: 6px; border-radius: 50%; border: 1px solid var(--bx-border); background: var(--bx-surface); color: var(--bx-text); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; } .dev-inverser:hover { background: var(--bx-surface-2); } @media (max-width: 640px) { .dev-conv-ligne, .dev-conv-ligne.is-inverse { flex-direction: column; align-items: stretch; } .dev-conv-ligne.is-inverse { flex-direction: column-reverse; } .dev-inverser { align-self: center; margin: 0; transform: rotate(90deg); } } /* Courbe : ligne de lecture fixe au-dessus (jamais d'info-bulle sur la courbe) */ .dev-lecture { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; padding: 0 0 10px; margin: 0 0 6px; border-bottom: 1px dashed var(--bx-line); min-height: 34px; } .dev-lecture-date { font-size: 13px; color: var(--bx-muted); } .dev-lecture-val { font-size: 22px; font-weight: 600; color: var(--bx-text); } .dev-lecture-var { font-size: 13px; color: var(--bx-muted); } .dev-graphe { position: relative; min-height: 220px; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .dev-svg { display: block; cursor: crosshair; } .dev-grille { stroke: var(--bx-line); stroke-width: 1; } .dev-axe { fill: var(--bx-muted); font-size: 11px; } .dev-ligne { fill: none; stroke: var(--bx-accent); stroke-width: 2; stroke-linejoin: round; } .dev-aire { fill: var(--bx-accent); fill-opacity: .08; stroke: none; } .dev-repere { stroke: var(--bx-muted); stroke-width: 1; stroke-dasharray: 3 3; } .dev-pastille { fill: var(--bx-accent); stroke: var(--bx-surface); stroke-width: 2; } .dev-chargement { margin: 0; padding: 80px 0; text-align: center; color: var(--bx-muted); font-size: 14px; } .dev-periodes { margin-top: 10px; } .dev-reperes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin: 0; } .dev-reperes div { background: var(--bx-surface-2); border-radius: 10px; padding: 12px 14px; } .dev-reperes dt { font-size: 13px; color: var(--bx-muted); } .dev-reperes dd { margin: 4px 0 0; font-size: 18px; font-weight: 600; color: var(--bx-text); } .dev-reperes dd small { font-size: 13px; font-weight: 500; color: var(--bx-muted); } /* Liste des devises : drapeau, nom, mini-courbe 30 jours, cours */ .dev-liste { list-style: none; margin: 0; padding: 0; } .dev-liste li + li { border-top: 1px solid var(--bx-line); } html[data-apparence] .dev-liste a { display: grid; grid-template-columns: 32px minmax(0, 1fr) 96px auto; align-items: center; gap: 14px; padding: 12px 4px; color: var(--bx-text); text-decoration: none; border-radius: 8px; } html[data-apparence] .dev-liste a:hover { background: var(--bx-surface-2); } .dev-liste-nom { display: flex; flex-direction: column; min-width: 0; font-size: 13px; } .dev-liste-nom strong { font-size: 15px; font-weight: 600; } .dev-liste-nom .dev-muet { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dev-liste-mini { line-height: 0; } .dev-liste-val { display: flex; flex-direction: column; align-items: flex-end; font-size: 16px; font-weight: 600; } .dev-liste-val .dev-var { font-size: 12px; font-weight: 400; } @media (max-width: 640px) { html[data-apparence] .dev-liste a { grid-template-columns: 32px minmax(0, 1fr) auto; } .dev-liste-mini { display: none; } } .dev-texte p { margin: 0 0 8px; font-size: 14px; line-height: 1.6; }