/* ========================================================================= Theme clair par defaut. `data-theme="dark"` sur bascule en anthracite. Chaque societe a sa charte : `data-brand=""` sur un conteneur redefinit les variables --brand-* pour tout ce qu'il contient. ========================================================================= */ :root { --bg: #f6f7f9; --panel: #ffffff; --panel-2: #f7f8fb; --row-alt: #fbfbfd; --row-hover: #f1f3f8; --border: #e8eaf0; --border-strong: #d9dde6; --text: #1c2130; --muted: #676e80; --faint: #9aa0b0; /* charte neutre (vues transversales) */ --brand: #4a63d8; --brand-strong: #3f56c4; --brand-2: #3fae9f; --brand-on: #ffffff; --brand-soft: #eef1fd; --brand-line: #d9e0fa; --band: #f7f8fe; --brand-grad: linear-gradient(100deg, #4a63d8, #3fae9f); --chart-bar: #5b73de; --chart-line: #d9a13b; --chart-bar2: #3fae9f; --chart-line2: #d1697f; --good: #12855c; --bad: #cf3a55; --warn: #b8730c; --shadow: 0 1px 2px rgba(28, 33, 48, .04), 0 6px 18px rgba(28, 33, 48, .045); --shadow-lg: 0 10px 44px rgba(28, 33, 48, .16); --radius: 12px; --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* --- anthracite ---------------------------------------------------------- */ :root[data-theme="dark"] { --bg: #232322; --panel: #2C2C2A; --panel-2: #333331; --row-alt: #302F2E; --row-hover: #3A3A37; --border: #3D3D3A; --border-strong: #4E4E4A; --text: #ECEBE8; --muted: #A6A39C; --faint: #7D7A74; --brand: #9aa6f7; --brand-strong: #8b98f2; --brand-2: #5cc9ba; --brand-on: #1c1c1a; --brand-soft: #32333F; --brand-line: #43455A; --band: #2F2F31; --brand-grad: linear-gradient(100deg, #9aa6f7, #5cc9ba); --chart-bar: #8e9cf5; --chart-line: #e8b45c; --chart-bar2: #4ec9b8; --chart-line2: #e88ba1; --good: #46cf95; --bad: #ff8098; --warn: #edb247; --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .22); --shadow-lg: 0 10px 44px rgba(0, 0, 0, .5); } /* ---------------------------------------------------- chartes par societe */ /* Equity Family — or / noir */ [data-brand="equity_family"] { --brand: #9B7112; --brand-strong: #856011; --brand-2: #C9A227; --brand-on: #ffffff; --brand-soft: #FBF5E4; --brand-line: #EBDDB4; --band: #FDFAF1; --brand-grad: linear-gradient(100deg, #B2871F, #EBCB72); --chart-bar: #CBA439; --chart-line: #6B7687; --chart-bar2: #94A1B2; --chart-line2: #A8811C; } :root[data-theme="dark"] [data-brand="equity_family"] { --brand: #E3C271; --brand-strong: #EBCE87; --brand-2: #C9A227; --brand-on: #24210F; --brand-soft: #35301F; --brand-line: #4B4327; --band: #302E28; --brand-grad: linear-gradient(100deg, #C9A227, #F0DDA4); --chart-bar: #D9B457; --chart-line: #9AA6B8; --chart-bar2: #7E8A9C; --chart-line2: #EBCB72; } /* Blink — violet / rose */ [data-brand="blink"] { --brand: #C9186F; --brand-strong: #AE1160; --brand-2: #8B5CF6; --brand-on: #ffffff; --brand-soft: #FDEDF6; --brand-line: #F7CBE4; --band: #FEF6FA; --brand-grad: linear-gradient(100deg, #9333EA, #EC4899); --chart-bar: #DB2777; --chart-line: #8B5CF6; --chart-bar2: #A78BFA; --chart-line2: #DB2777; } :root[data-theme="dark"] [data-brand="blink"] { --brand: #F472B6; --brand-strong: #F890C6; --brand-2: #C084FC; --brand-on: #2A1220; --brand-soft: #3A2434; --brand-line: #52304A; --band: #332A31; --brand-grad: linear-gradient(100deg, #C084FC, #F472B6); --chart-bar: #EC5A9E; --chart-line: #A78BFA; --chart-bar2: #C084FC; --chart-line2: #F472B6; } /* Lexa — bleu nuit / ivoire */ [data-brand="lexa"] { --brand: #16305E; --brand-strong: #0E1E43; --brand-2: #B99C63; --brand-on: #F2EFE6; --brand-soft: #EEF1F7; --brand-line: #C9D3E5; --band: #F5F7FB; --brand-grad: linear-gradient(100deg, #0E1E43, #4A6FA5); --chart-bar: #2A4A80; --chart-line: #BE9F63; --chart-bar2: #C3B08A; --chart-line2: #16305E; } :root[data-theme="dark"] [data-brand="lexa"] { --brand: #A9C0E8; --brand-strong: #BDCFEF; --brand-2: #EFEADC; --brand-on: #101B33; --brand-soft: #29303D; --brand-line: #3B4658; --band: #2C2E30; --brand-grad: linear-gradient(100deg, #7E9BCF, #EFEADC); --chart-bar: #8AA6D6; --chart-line: #DFCF9E; --chart-bar2: #D9D2BC; --chart-line2: #A9C0E8; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font: 14px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif; -webkit-font-smoothing: antialiased; } h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -.012em; } h1 { font-size: 21px; } h2 { font-size: 15.5px; } h3 { font-size: 10.5px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; font-weight: 650; } a { color: inherit; } /* ------------------------------------------------------------------ shell */ .layout { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; } .sidebar { background: var(--panel); border-right: 1px solid var(--border); padding: 20px 14px; display: flex; flex-direction: column; gap: 24px; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 10px; padding: 0 6px 2px; } .brand-mark { width: 32px; height: 32px; flex: none; display: block; } .brand b { font-size: 14.5px; font-weight: 650; } .brand small { display: block; color: var(--faint); font-size: 11px; font-weight: 500; } .nav-group { display: flex; flex-direction: column; gap: 1px; } .nav-group > h3 { padding: 0 8px 7px; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--muted); text-decoration: none; font-weight: 500; border: none; cursor: pointer; background: none; font-size: 13.5px; text-align: left; width: 100%; transition: background .12s, color .12s; } .nav-item:hover { background: var(--panel-2); color: var(--text); } .nav-item.active { background: var(--brand-soft); color: var(--brand); font-weight: 620; } .nav-item svg { flex: none; } .dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--brand); } .nav-item .count { margin-left: auto; font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; } .nav-sep { height: 1px; background: var(--border); margin: 6px 8px; } .main { padding: 24px 28px 64px; max-width: 1560px; min-width: 0; } /* ---------------------------------------------------------------- entetes */ .page-head { margin-bottom: 16px; } .page-head .line1 { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .spacer { flex: 1; } .page-title { display: flex; align-items: center; gap: 11px; } .page-title .swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; } .page-sub { color: var(--muted); font-size: 13px; margin-top: 3px; } .brand-logo { display: block; height: 40px; width: auto; } .brand-logo.lg { height: 54px; } .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin: 0 0 20px; } .tabs button { border: none; background: none; padding: 9px 14px; color: var(--muted); font-size: 13.5px; font-weight: 550; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tabs button:hover { color: var(--text); } .tabs button.active { color: var(--brand); border-bottom-color: var(--brand); font-weight: 620; } /* ------------------------------------------------- barre de periode epuree */ /* annees a gauche, plage de dates et periodes glissantes a droite */ .filters { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; position: relative; } .f-years { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; } .f-years-btns { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; } .f-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; font-weight: 650; padding-left: 9px; } .f-right { display: flex; flex-direction: column; align-items: flex-end; position: relative; } .f-btn { position: relative; border: none; background: none; border-radius: 6px; padding: 4px 9px 7px; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; transition: color .12s; } .f-btn:hover { color: var(--text); } /* etat actif : simple soulignement, pas de pave colore */ .f-btn.on { color: var(--brand); font-weight: 650; } .f-btn.on::after { content: ""; position: absolute; left: 9px; right: 9px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--brand); } .f-years .f-btn { font-size: 13px; } .daterange { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 9px; color: var(--muted); background: var(--panel); border: 1px solid var(--border-strong); font-size: 12.5px; font-variant-numeric: tabular-nums; cursor: pointer; } .daterange:hover { border-color: var(--brand); color: var(--text); } .daterange.open { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .daterange .arrow { color: var(--faint); } /* ---------------------------------------------------- calendrier de plage */ .dp { position: absolute; top: calc(100% + 8px); right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 14px; box-shadow: var(--shadow-lg); width: max-content; display: flex; overflow: hidden; } .dp-main { padding: 14px 16px 12px; } /* raccourcis de periode : ils ne vivent plus dans la barre, seulement ici */ .dp-quick { display: flex; flex-direction: column; gap: 2px; padding: 14px 12px; background: var(--panel-2); border-right: 1px solid var(--border); min-width: 122px; } .dp-quick-label { font-size: 10px; color: var(--faint); text-transform: uppercase; letter-spacing: .1em; font-weight: 650; padding: 0 8px 6px; } .dp-quick-sep { height: 1px; background: var(--border); margin: 6px 8px; } .dp-q { border: none; background: none; text-align: left; padding: 6px 9px; border-radius: 7px; color: var(--muted); font-size: 12.5px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums; } .dp-q:hover { background: var(--panel); color: var(--text); } .dp-q.on { background: var(--brand-soft); color: var(--brand); font-weight: 650; } .dp-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .dp-head .dp-sels { display: flex; gap: 6px; flex: 1; justify-content: center; } .dp-nav { border: 1px solid var(--border); background: var(--panel-2); color: var(--muted); width: 28px; height: 28px; border-radius: 8px; padding: 0; font-size: 16px; line-height: 1; } .dp-nav:hover { border-color: var(--brand); color: var(--brand); } .dp-sel { border: none; background: none; color: var(--text); font-size: 13px; font-weight: 600; padding: 3px 4px; border-radius: 6px; cursor: pointer; } .dp-sel:hover { background: var(--panel-2); } .dp-months { display: flex; gap: 22px; } .dp-month { width: 224px; } .dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .dp-dow span { text-align: center; font-size: 10.5px; color: var(--faint); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; padding-bottom: 6px; } .dp-day { border: none; background: none; padding: 0; height: 30px; border-radius: 8px; font-size: 12.5px; color: var(--text); cursor: pointer; font-variant-numeric: tabular-nums; } .dp-day.out { visibility: hidden; } .dp-day:hover:not(.out) { background: var(--brand-soft); color: var(--brand); } .dp-day.today { font-weight: 700; box-shadow: inset 0 0 0 1px var(--brand-line); } /* plage : extremites pleines, jours intermediaires en aplat leger */ .dp-day.in { background: var(--brand-soft); color: var(--brand); border-radius: 0; } .dp-day.start, .dp-day.end { background: var(--brand-strong); color: var(--brand-on); font-weight: 650; } .dp-day.start { border-radius: 8px 0 0 8px; } .dp-day.end { border-radius: 0 8px 8px 0; } .dp-day.start.end { border-radius: 8px; } .dp-foot { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 11px; border-top: 1px solid var(--border); } .dp-info { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; } /* ---------------------------------------------------------------- controls */ button, select, input { font: inherit; color: var(--text); background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; padding: 6.5px 11px; } button { cursor: pointer; transition: border-color .12s, background .12s; } button:hover:not(:disabled) { border-color: var(--brand); } button:disabled { opacity: .45; cursor: default; } button.primary { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-on); font-weight: 600; } button.primary:hover:not(:disabled) { filter: brightness(1.1); border-color: var(--brand-strong); } button.ghost { background: none; border-color: transparent; color: var(--muted); padding: 6px 9px; } button.ghost:hover { background: var(--panel-2); color: var(--text); border-color: transparent; } button.danger { color: var(--bad); border-color: transparent; background: none; } button.danger:hover { border-color: var(--bad); } button.sm { padding: 4px 9px; font-size: 12.5px; } input[type=date] { min-width: 128px; } input:focus, select:focus, button:focus-visible, textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; } label.field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); font-weight: 500; } label.field input, label.field select, label.field textarea { font-size: 13.5px; width: 100%; color: var(--text); font-family: inherit; background: var(--panel); border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 9px; } .help { font-size: 11.5px; color: var(--faint); line-height: 1.45; font-weight: 400; } /* ------------------------------------------------------------------ cards */ .card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; } .card > header { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; } .card.flush { padding: 16px 0 0; } .card.flush > header { padding: 0 18px; } .grid { display: grid; gap: 13px; } .grid.kpis { grid-template-columns: repeat(auto-fit, minmax(174px, 1fr)); } .grid.two { grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); } .section { margin-bottom: 15px; } .kpi { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); } .kpi::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--border-strong); } .kpi .label { font-size: 11.5px; color: var(--muted); font-weight: 550; } .kpi .value { font-size: 24px; font-weight: 660; margin-top: 4px; font-variant-numeric: tabular-nums; letter-spacing: -.028em; } .kpi.headline { background: var(--brand-soft); border-color: var(--brand-line); } .kpi.headline::before { background: var(--brand-grad); width: 4px; } .kpi.headline .value { color: var(--brand); } .kpi.headline .label { color: var(--brand); opacity: .85; } .kpi .delta { display: inline-block; margin-top: 7px; font-size: 11px; font-weight: 620; padding: 2px 7px; border-radius: 999px; font-variant-numeric: tabular-nums; background: var(--panel-2); color: var(--faint); } .delta.up { color: var(--good); background: color-mix(in srgb, var(--good) 12%, transparent); } .delta.down { color: var(--bad); background: color-mix(in srgb, var(--bad) 12%, transparent); } .empty { text-align: center; padding: 46px 20px; color: var(--muted); } .empty h2 { margin-bottom: 6px; } .empty p { margin: 6px 0 16px; } /* ------------------------------------------------------------------ table */ .table-wrap { overflow-x: auto; } .table-wrap.grid-scroll { overflow: auto; min-height: 300px; } .main.grid-view { padding-bottom: 20px; } .card.flush .table-wrap { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); } table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13.5px; } th, td { padding: 10px 14px; text-align: right; white-space: nowrap; } th { color: var(--muted); font-weight: 620; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; position: sticky; top: 0; z-index: 2; background: var(--panel-2); cursor: pointer; user-select: none; border-bottom: 1px solid var(--border-strong); border-top: 1px solid var(--border); padding-top: 9px; padding-bottom: 9px; } th:hover { color: var(--text); } th.sorted { color: var(--brand); } th.band { background: var(--band); color: var(--brand); } th .arrow { font-size: 9px; } td { font-variant-numeric: tabular-nums; border-bottom: 1px solid var(--border); background: var(--panel); color: var(--muted); } /* colonnes de stats cles : bandes verticales teintees a la couleur de l'entite */ td.band { background: var(--band); } tbody tr:nth-child(even) td { background: var(--row-alt); } tbody tr:nth-child(even) td.band { background: color-mix(in srgb, var(--brand) 7%, var(--row-alt)); } tbody tr:hover td { background: var(--row-hover); } tbody tr:hover td.band { background: color-mix(in srgb, var(--brand) 11%, var(--row-hover)); } tbody tr.clickable { cursor: pointer; } td.key { color: var(--text); font-weight: 620; } td.nil { color: var(--faint); font-weight: 400; } td.pos { color: var(--good); font-weight: 650; } td.neg { color: var(--bad); font-weight: 650; } td.mid { color: var(--warn); font-weight: 650; } /* premiere colonne figee : la date reste visible pendant le defilement lateral */ th:first-child, td:first-child { text-align: left; position: sticky; left: 0; z-index: 1; } th:first-child { z-index: 3; box-shadow: 1px 0 0 var(--border-strong); } td:first-child { font-weight: 600; color: var(--text); box-shadow: 1px 0 0 var(--border); } .ta-left { text-align: left; } tfoot td { font-weight: 680; color: var(--text); border-top: 2px solid var(--brand-line); border-bottom: none; background: var(--brand-soft) !important; position: sticky; bottom: 0; z-index: 2; } tfoot td:first-child { z-index: 4; } tfoot tr { box-shadow: 0 -6px 14px rgba(0, 0, 0, .06); } .rowlabel { display: flex; align-items: center; gap: 8px; } .rowlabel .tag { font-size: 10.5px; color: var(--faint); font-weight: 500; font-style: normal; border: 1px solid var(--border); border-radius: 5px; padding: 0 5px; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 550; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); } .pill.brand { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); } .pill.ok { color: var(--good); background: color-mix(in srgb, var(--good) 9%, transparent); border-color: color-mix(in srgb, var(--good) 28%, transparent); } .pill.ko { color: var(--bad); background: color-mix(in srgb, var(--bad) 9%, transparent); border-color: color-mix(in srgb, var(--bad) 28%, transparent); } .pill.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border-color: color-mix(in srgb, var(--warn) 30%, transparent); } /* ----------------------------------------------------------------- charts */ .chart { width: 100%; display: block; overflow: visible; } .chart text { fill: var(--faint); font-size: 10px; } .chart .axis { stroke: var(--border); stroke-width: 1; } .chart .bar { opacity: .9; } .chart .bar:hover { opacity: 1; } .chart .line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; } .chart .dot { stroke: var(--panel); stroke-width: 1.5; } .legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; } .funnel { display: flex; flex-direction: column; gap: 9px; } .funnel-step { display: grid; grid-template-columns: 140px 1fr 124px; align-items: center; gap: 12px; } .funnel-step .name { font-size: 12.5px; color: var(--muted); font-weight: 500; } .funnel-bar { height: 24px; border-radius: 6px; background: var(--panel-2); overflow: hidden; border: 1px solid var(--border); } .funnel-bar > i { display: block; height: 100%; border-radius: 5px; background: var(--brand-grad); min-width: 3px; } .funnel-step .val { text-align: right; font-variant-numeric: tabular-nums; font-weight: 640; } .funnel-step .val small { display: block; font-weight: 500; color: var(--muted); font-size: 11px; } /* ------------------------------------------------------- tiroir et modale */ .overlay { position: fixed; inset: 0; background: rgba(20, 22, 28, .42); display: flex; justify-content: flex-end; z-index: 50; backdrop-filter: blur(3px); } .overlay.center { align-items: center; justify-content: center; } .drawer { background: var(--bg); width: min(940px, 100%); height: 100%; overflow-y: auto; padding: 22px 26px 64px; box-shadow: var(--shadow-lg); border-left: 1px solid var(--border); } .modal { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 22px; width: min(460px, 92vw); } .modal h2 { margin-bottom: 4px; } .drawer > header { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; } .drawer h1 { font-size: 20px; } .drawer .sub { color: var(--muted); font-size: 13px; margin-top: 5px; } .metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(152px, 1fr)); gap: 9px; } .metric { background: var(--panel-2); border: 1px solid var(--border); border-radius: 9px; padding: 9px 12px; } .metric.key { background: var(--brand-soft); border-color: var(--brand-line); } .metric.key .value { color: var(--brand); } .metric .label { font-size: 11px; color: var(--muted); font-weight: 500; } .metric .value { font-size: 16.5px; font-weight: 630; font-variant-numeric: tabular-nums; margin-top: 1px; } .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 12px; } .row-actions { display: flex; gap: 7px; justify-content: flex-end; align-items: center; } table input { padding: 5px 8px !important; border-radius: 6px; font-size: 13px; } .toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 11px 20px; border-radius: 10px; font-size: 13px; font-weight: 550; z-index: 100; box-shadow: var(--shadow-lg); max-width: 80vw; } .toast.error { background: var(--bad); color: #fff; } .mono { font-family: var(--mono); font-size: 11.5px; } .chips { display: flex; flex-wrap: wrap; gap: 6px; } .chip { border: 1px solid var(--border-strong); background: var(--panel); color: var(--muted); border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 500; cursor: pointer; } .chip:hover { border-color: var(--brand); color: var(--text); } .chip.on { background: var(--brand-soft); border-color: var(--brand-line); color: var(--brand); font-weight: 620; } @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .main { padding: 16px 14px 50px; } .funnel-step { grid-template-columns: 110px 1fr 100px; } } /* ------------------------------------------------- dernier webinaire epingle */ .latest { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 14px 16px 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; } /* le webinaire a venir : meme cadre, fond neutre — il n'est pas encore joue */ .latest.upcoming { background: var(--panel); } .latest.upcoming .latest-metric { background: var(--panel-2); } .latest .latest-metrics { flex: 1; align-content: start; } .latest-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; } .latest-head b { font-size: 15px; } .latest-head .tag { font-style: normal; font-size: 11px; color: var(--muted); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; } .latest-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; } .latest-metric { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 9px 12px; text-align: left; cursor: pointer; transition: border-color .12s; } .latest-metric:hover { border-color: var(--brand); } .latest-metric .label { font-size: 11px; color: var(--muted); font-weight: 500; } .latest-metric .value { font-size: 18px; font-weight: 650; margin-top: 2px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; } /* ------------------------------------------------------- cartes cliquables */ .kpi { text-align: left; width: 100%; font: inherit; cursor: pointer; } .kpi:hover { border-color: var(--brand); } .card.zoomable { cursor: pointer; transition: border-color .12s; } .card.zoomable:hover { border-color: var(--brand); } .zoom { display: inline-flex; padding: 3px; line-height: 0; color: var(--faint); opacity: 0; transition: opacity .12s, color .12s; pointer-events: none; } .kpi .zoom { position: absolute; top: 8px; right: 8px; } .kpi:hover .zoom, .card.zoomable:hover .zoom { opacity: 1; color: var(--brand); } /* ---------------------------------------------------------- vue agrandie */ .focus { background: var(--bg); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); padding: 20px 22px 24px; width: min(1180px, 94vw); max-height: 92vh; overflow-y: auto; } .focus > header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; } .focus > header h2 { font-size: 18px; } /* ------------------------------------------------------- ajout d'un canal */ .channel-add { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; padding: 12px 18px 16px; border-top: 1px solid var(--border); } .channel-add select { font-size: 13px; padding: 5px 9px; } .channel-add .help { max-width: 380px; text-align: right; }