/* ============================================================ RideCom Ops — design system ============================================================ */ :root { /* surfaces — Onyx (noir mat chaud) */ --bg: #0A0A0C; --bg-elev: #0F0F12; --surface: #141317; --surface-2: #1B1A1F; --border: #262319; --border-strong:#38331F; /* text — crème chaud */ --text: #F1ECE0; --text-dim: #A8A091; --text-muted: #6C6558; /* semantic */ --accent: #E4B062; --accent-dim: #8A6B3D; --pos: #3DDC97; --pos-dim: rgba(61,220,151,.12); --neg: #F26D6D; --neg-dim: rgba(242,109,109,.12); --warn: #F5C95C; --warn-dim: rgba(245,201,92,.14); --info: #6FB7FF; /* shop accents */ --shop-ca-fr: #4F8DF7; --shop-ca-en: #27C5A8; --shop-world: #B57BEC; /* typo */ --font-ui: "Schibsted Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --font-serif: Georgia, "Times New Roman", serif; /* radii */ --r-sm: 6px; --r: 10px; --r-lg: 14px; /* shadows */ --sh-card: 0 1px 0 rgba(255,255,255,.02) inset, 0 8px 24px -12px rgba(0,0,0,.6); } /* ---- Thème clair (bascule via data-theme="light" sur ) ------------- */ :root[data-theme="light"] { --bg: #F3F1EA; --bg-elev: #FBFAF6; --surface: #FFFFFF; --surface-2: #F1EDE3; --border: #E4DECF; --border-strong: #CFC6AE; --text: #201C15; --text-dim: #5B554A; --text-muted: #928B7A; --accent: #B07D1F; --accent-dim: #C9A560; --pos: #1F9D5F; --pos-dim: rgba(31,157,95,.12); --neg: #CF4141; --neg-dim: rgba(207,65,65,.12); --warn: #B9781A; --warn-dim: rgba(185,120,26,.15); --info: #2F6FB0; --sh-card: 0 1px 0 rgba(0,0,0,.02) inset, 0 8px 24px -14px rgba(30,25,15,.18); } /* Le rail reste sombre dans les deux thèmes (pont de commandement). On rétablit les tokens sombres sur la sidebar pour que ses textes restent lisibles. */ :root[data-theme="light"] .sidebar { --bg-elev: #0F0F12; --surface: #141317; --surface-2: #1B1A1F; --border: #262319; --border-strong: #38331F; --text: #F1ECE0; --text-dim: #A8A091; --text-muted: #6C6558; --accent: #E4B062; --accent-dim: #8A6B3D; background: #0F0F12; border-right-color: #262319; } *,*::before,*::after { box-sizing: border-box; } html,body { height:100%; margin:0; } body { font-family: var(--font-ui); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.45; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01","cv11"; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* ============================================================ App shell ============================================================ */ .app { display: grid; grid-template-columns: 224px 1fr; min-height: 100vh; } /* ---- sidebar ---- */ .sidebar { background: var(--bg-elev); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .brand { padding: 18px 18px 10px; display: flex; align-items: center; gap: 10px; } .brand-mark { width: 28px; height: 28px; border-radius: 7px; background: linear-gradient(135deg, var(--accent), #C8923F); color: #1A1306; display:grid; place-items:center; font-weight: 800; font-size: 14px; letter-spacing: -.02em; } .brand-name { font-weight: 700; font-size: 15px; letter-spacing: -0.01em; } .brand-sub { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .nav-section { padding: 14px 12px 4px; font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); } .nav { display: flex; flex-direction: column; padding: 4px 8px; gap: 1px; } .nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: var(--r-sm); color: var(--text-dim); font-size: 13.5px; font-weight: 500; border: 1px solid transparent; transition: background .12s, color .12s; } .nav a:hover { color: var(--text); background: var(--surface); } .nav a.active { color: var(--text); background: var(--surface); border-color: var(--border); box-shadow: inset 2px 0 0 var(--accent); } .nav a .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity:.6; } .nav a .shop-dot { width:8px; height:8px; border-radius:2px; } .sidebar-footer { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 11px; color: var(--text-muted); display: flex; gap: 8px; align-items: center; justify-content: space-between; } .health-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--pos); box-shadow: 0 0 0 3px rgba(61,220,151,.15); } /* ---- topbar ---- */ .topbar { position: sticky; top: 0; z-index: 5; background: rgba(10,10,12,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .page-title h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -0.02em; } .page-title .crumb { font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 2px; } .topbar-actions { display: flex; align-items: center; gap: 10px; } /* ---- main ---- */ main.content { padding: 22px 24px 60px; min-width: 0; } /* ============================================================ Date range picker ============================================================ */ .range { display: inline-flex; align-items: stretch; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; } .range button { background: transparent; border: 0; color: var(--text-dim); font-size: 12.5px; padding: 7px 11px; font-weight: 500; border-right: 1px solid var(--border); transition: background .1s, color .1s; } .range button:last-child { border-right: 0; } .range button:hover { color: var(--text); background: var(--surface-2); } .range button.active { color: var(--bg); background: var(--accent); font-weight: 600; } .range-custom { display: flex; align-items: center; gap: 6px; padding: 0 11px; font-size: 12px; color: var(--text-dim); border-right: 1px solid var(--border); } .range-custom input { background: transparent; border: 0; color: var(--text); font-family: var(--font-mono); font-size: 12px; width: 100px; outline: 0; } .granularity { display: inline-flex; border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } .granularity button { background: transparent; border:0; color: var(--text-dim); font-size: 12px; padding: 7px 10px; border-right: 1px solid var(--border); } .granularity button:last-child { border-right: 0; } .granularity button.active { color: var(--text); background: var(--surface-2); } /* ============================================================ Cards / KPI ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--sh-card); } .card-pad { padding: 16px; } .card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); } .card-head h3 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: -0.005em; } .card-head .sub { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .1em; } .kpi { padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); display: flex; flex-direction: column; gap: 6px; min-width: 0; position: relative; overflow: hidden; } .kpi.compact { padding: 12px 14px; } .kpi-label { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .09em; font-weight: 500; display: flex; align-items: center; gap: 6px; } .kpi-value { font-size: 22px; font-weight: 600; letter-spacing: -0.025em; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .kpi.lg .kpi-value { font-size: 26px; } .kpi-sub { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 6px; } .kpi-spark { margin-top: 4px; } /* delta pill */ .delta { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 2px 6px; border-radius: 999px; line-height: 1.4; } .delta.pos { color: var(--pos); background: var(--pos-dim); } .delta.neg { color: var(--neg); background: var(--neg-dim); } .delta.flat{ color: var(--text-muted); background: rgba(255,255,255,.04); } /* ============================================================ Layout grids ============================================================ */ .grid { display: grid; gap: 12px; } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } @media (max-width: 1280px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } } .section-header { display: flex; align-items: center; justify-content: space-between; margin: 22px 0 10px; } .section-header h2 { margin: 0; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; display: flex; align-items: center; gap: 8px; } .section-header h2 .pill { font-size: 10.5px; font-weight: 500; color: var(--text-muted); background: var(--surface); border: 1px solid var(--border); padding: 2px 8px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; } /* ============================================================ Overview consolidated row ============================================================ */ .consolidated { background: linear-gradient(180deg, rgba(228,176,98,.06), rgba(228,176,98,0) 60%), var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); padding: 18px 20px; position: relative; overflow: hidden; } .consolidated::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--accent), transparent); } .consolidated-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .consolidated-head h2 { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); } .consolidated-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .consolidated-grid > div { min-width: 0; } @media (max-width: 1280px) { .consolidated-grid { grid-template-columns: repeat(3, 1fr); } } /* ============================================================ Shop columns ============================================================ */ .shop-columns { display: grid; gap: 12px; } .shop-columns.n-2 { grid-template-columns: repeat(2,1fr); } .shop-columns.n-3 { grid-template-columns: repeat(3,1fr); } @media (max-width: 1100px) { .shop-columns.n-2, .shop-columns.n-3 { grid-template-columns: 1fr; } } .shop-col { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; } .shop-col-head { padding: 14px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; position: relative; } .shop-col-head::before { content: ""; position: absolute; left:0; top:0; bottom:0; width: 3px; background: var(--shop-color, var(--accent)); } .shop-col-head .title { display: flex; align-items: center; gap: 9px; font-weight: 600; font-size: 14px; } .shop-col-head .flag { font-size: 16px; } .shop-col-head .badge { font-size: 10.5px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--border); padding: 2px 7px; border-radius: 999px; text-transform: uppercase; letter-spacing: .08em; } .shop-col-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 14px; } .shop-stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .shop-stat { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .shop-stat .l { font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); } .shop-stat .v { font-family: var(--font-mono); font-size: 16px; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } .shop-empty { padding: 28px 16px; text-align: center; color: var(--text-muted); font-size: 13px; } .shop-empty .icon { font-size: 24px; display:block; margin-bottom: 6px; opacity: .6; } /* ============================================================ Tables ============================================================ */ .tbl { width: 100%; border-collapse: collapse; font-size: 13px; } .tbl th, .tbl td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; } .tbl th { font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .09em; color: var(--text-muted); background: var(--bg-elev); position: sticky; top: 0; } .tbl tr:last-child td { border-bottom: 0; } .tbl tr:hover td { background: rgba(255,255,255,.018); } .tbl td.right, .tbl th.right { text-align: right; } .tbl td.num, .tbl td.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .tbl-scroll { overflow: auto; max-height: 580px; } /* ============================================================ Pills / badges ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 500; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-dim); } .pill.pos { color: var(--pos); border-color: rgba(61,220,151,.3); background: var(--pos-dim); } .pill.neg { color: var(--neg); border-color: rgba(242,109,109,.3); background: var(--neg-dim); } .pill.warn { color: var(--warn); border-color: rgba(245,201,92,.3); background: var(--warn-dim); } .pill.info { color: var(--info); border-color: rgba(111,183,255,.28); background: rgba(111,183,255,.1); } .shop-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text); font-weight: 500; } .shop-tag .sq { width: 9px; height: 9px; border-radius: 2px; } /* ============================================================ Buttons / inputs ============================================================ */ .btn { background: var(--surface); border: 1px solid var(--border); color: var(--text); padding: 7px 12px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; transition: background .12s, border-color .12s; } .btn:hover { background: var(--surface-2); border-color: var(--border-strong); } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); font-weight: 600; } .btn.primary:hover { filter: brightness(1.05); } .btn.ghost { background: transparent; } /* ============================================================ Chart helpers ============================================================ */ .chart-frame { padding: 4px 4px 0; } .legend { display: flex; gap: 14px; font-size: 11.5px; color: var(--text-dim); flex-wrap: wrap; } .legend-item { display: inline-flex; align-items: center; gap: 6px; } .legend-sq { width: 9px; height: 9px; border-radius: 2px; } /* ============================================================ Signal cards (scaling) ============================================================ */ .signal-card { border-left: 3px solid var(--text-muted); background: var(--surface); border-radius: var(--r); padding: 14px 16px; border: 1px solid var(--border); border-left-width: 3px; } .signal-card.scale { border-left-color: var(--pos); } .signal-card.maintain { border-left-color: var(--info); } .signal-card.optimize { border-left-color: var(--warn); } .signal-card.cut { border-left-color: var(--neg); } .signal-card h4 { margin: 0 0 6px; font-size: 13px; display: flex; align-items: center; gap: 10px; } .signal-card .verdict { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } .signal-card.scale .verdict { color: var(--pos); } .signal-card.maintain .verdict { color: var(--info); } .signal-card.optimize .verdict { color: var(--warn); } .signal-card.cut .verdict { color: var(--neg); } /* ============================================================ Misc ============================================================ */ .skeleton { background: linear-gradient(90deg, var(--surface) 0%, var(--surface-2) 50%, var(--surface) 100%); background-size: 200% 100%; animation: shimmer 1.4s infinite; border-radius: var(--r-sm); } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } .empty-state { padding: 60px 24px; text-align: center; color: var(--text-muted); } .empty-state .icon { font-size: 32px; opacity: .5; margin-bottom: 8px; } .empty-state h3 { color: var(--text); margin: 6px 0; font-size: 15px; } .divider { height: 1px; background: var(--border); margin: 14px 0; } /* scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; border: 2px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } /* small */ .small { font-size: 11.5px; color: var(--text-muted); } .tiny { font-size: 10.5px; color: var(--text-muted); } .muted { color: var(--text-muted); } /* alerts */ .alert-row { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); font-size: 13px; } .alert-row.warn { border-color: rgba(245,201,92,.3); background: rgba(245,201,92,.06); } .alert-row.neg { border-color: rgba(242,109,109,.3); background: rgba(242,109,109,.06); } .alert-row .icon { font-size: 14px; } .alert-row .label { flex: 1; } /* tabs (sub-nav for ridecom) */ .subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 18px; } .subtabs a { padding: 9px 14px; font-size: 13px; color: var(--text-dim); border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; } .subtabs a:hover { color: var(--text); } .subtabs a.active { color: var(--text); border-bottom-color: var(--accent); } /* ============================================================ Onyx & Or — raffinements (titres sérif, chat Discussion) ============================================================ */ .brand-name { font-family: var(--font-serif); font-weight: 600; letter-spacing: .005em; } .page-title h1, .topbar h1 { font-family: var(--font-serif); font-weight: 500; letter-spacing: .005em; } .section-header h2, .consolidated-head h2 { font-family: var(--font-serif); font-weight: 500; } .disc-title { font-family: var(--font-serif); font-weight: 500; font-size: 16px; color: var(--text); } .disc-eyebrow { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); } .disc-badge { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; padding: 2px 6px; border-radius: 4px; background: var(--warn-dim); color: var(--accent); } .msg-row .msg-actions { opacity: 0; transition: opacity .12s; } .msg-row:hover { background: var(--bg-elev); } .msg-row:hover .msg-actions { opacity: 1; } .msg-row .msg-actions button:hover { background: var(--surface-2); color: var(--text); } .salon-row .salon-del { opacity: 0; transition: opacity .12s; } .salon-row:hover .salon-del { opacity: .5; } .salon-row .salon-del:hover { opacity: 1; color: var(--neg); } /* ============================================================ MOBILE (≤ 860px) — ajouté le 17/07/2026 Le shell était en grille fixe 224px + contenu : sur un écran de 375px, la sidebar mangeait 60 % de la largeur. Ici elle sort du flux et devient un tiroir. Tout le reste passe en une colonne. ============================================================ */ @media (max-width: 860px) { .app { grid-template-columns: 1fr; } /* Tiroir : hors écran par défaut, glisse à l'ouverture. */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: min(84vw, 300px); z-index: 60; transform: translateX(-102%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.6); overflow-y: auto; } .sidebar.open { transform: translateX(0); } .nav-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); } .nav-burger { display: inline-flex !important; } .topbar { padding: 10px 14px; gap: 8px; } .topbar .page-title h1 { font-size: 15px; } .content, main.content { padding: 14px 12px !important; } /* Cibles tactiles : 36px mini, sinon on tape à côté. */ .nav a { padding: 11px 12px; } .range button { padding: 7px 11px; } /* Les grilles de formulaire en colonnes fixes s'empilent. */ .stack-mobile { grid-template-columns: 1fr !important; } /* Les tableaux débordent : on les fait défiler dans leur carte. */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-wrap table { min-width: 560px; } /* Le sélecteur de dates tient sur 2 lignes plutôt que de déborder. */ .range { flex-wrap: wrap; } } /* Sur écran large, le hamburger n'existe pas. */ .nav-burger { display: none; } /* Canaux de discussion sur mobile : la liste des salons passe en bandeau horizontal au-dessus du fil, au lieu d'une colonne de 216px qui ne laisse plus de place aux messages. */ @media (max-width: 860px) { .disc-shell { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; height: calc(100vh - 118px) !important; min-height: 0 !important; gap: 10px !important; } .disc-salons { flex-direction: row !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 6px !important; padding: 7px !important; } .disc-salons .disc-eyebrow { display: none; } .disc-salons > div:first-child { display: none; } /* l'entête « Salons » */ .disc-salons .salon-row { white-space: nowrap; flex: none; padding: 7px 11px !important; } .disc-salons .salon-row span[style*="position:absolute"] { display: none; } /* la barre active verticale */ }