:root { --bg: #0d1117; --surface: #161b22; --surface-2: #1e2530; --border: #2a3140; --accent: #f0a500; --green: #2ea84b; --blue: #3a9bd5; --red: #e3001b; --red-text: #ff5555; --text: #e8edf3; --text-dim: #9eb3c2; /* v41 readability upgrade: --text-medium passes WCAG AAA (8.7:1) on dark bg. Use this for labels/secondary text. Keep --text-dim only for genuine tertiary. */ --text-medium: #c5d1de; --font-head: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; /* Font-scale system — Aa toggle in header overrides --font-base on . All builder-overlay sizes derive from this so the whole UI scales consistently. */ --font-base: 18px; --font-xs: calc(var(--font-base) - 4px); /* 14 */ --font-sm: calc(var(--font-base) - 2px); /* 16 */ --font-md: var(--font-base); /* 18 */ --font-lg: calc(var(--font-base) + 2px); /* 20 */ --font-xl: calc(var(--font-base) + 6px); /* 24 */ --font-2xl: calc(var(--font-base) + 10px); /* 28 */ --tap-min: 44px; /* WCAG 2.5.5 minimum tap target */ } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 15px; overflow-x: hidden; max-width: 100vw; } /* v41 readability: Aa toggle scales the entire UI via the CSS zoom property. Default is 1.20 (= 18px feel; the user asked for "roomier" as default). */ body { zoom: var(--font-zoom, 1.2); } /* Leaflet renders tiles at integer pixel positions — keep the map at 1.0 so tiles don't blur/seam at non-integer zoom. */ #builder-map, .leaflet-container { zoom: calc(1 / var(--font-zoom, 1.2)); } /* ── Header ─────────────────────────────────────────────────────────────── */ .header { display: flex; align-items: center; gap: 20px; padding: 20px 24px; background: var(--surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .brand { font-family: var(--font-head); font-size: 28px; font-weight: 800; letter-spacing: 1px; white-space: nowrap; } .brand span.i { color: #00cfff; } .brand span.b { color: #39d353; } .header-title { font-family: var(--font-head); font-size: 18px; font-weight: 600; color: #cee8eb; text-transform: uppercase; letter-spacing: 0.1em; } .header-spacer { flex: 1; } .base-select { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 6px 12px; border-radius: 6px; font-family: var(--font-body); font-size: 13px; cursor: pointer; } .refresh-btn { background: var(--surface-2); border: 1px solid var(--border); color: var(--text); padding: 6px 14px; border-radius: 6px; font-family: var(--font-head); font-size: 15px; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: border-color 0.15s; } .refresh-btn:hover { border-color: var(--accent); } .last-refresh { font-size: 12px; color: var(--text-dim); } /* ── Sidebar nav ────────────────────────────────────────────────────────── */ body { display: flex; flex-direction: column; } .page-body { display: flex; flex: 1; min-height: 0; overflow: hidden; } /* Sidebar */ .sidebar { width: 180px; min-width: 180px; background: var(--surface); border-right: 2px solid #20def7; display: flex; flex-direction: column; transition: width 0.2s ease, min-width 0.2s ease; overflow: visible; position: relative; height: calc(100vh - 57px); overflow-y: visible; flex-shrink: 0; } .sidebar.collapsed { width: 52px; min-width: 52px; } /* Sidebar brand */ .sb-brand { font-family: var(--font-head); font-size: 16px; font-weight: 800; letter-spacing: 1px; padding: 16px 14px 12px; border-bottom: 2px solid #20def7; white-space: nowrap; overflow: hidden; flex-shrink: 0; } .sb-brand .sb-brand-full { display: inline; } .sb-brand .sb-brand-short { display: none; } .sidebar.collapsed .sb-brand .sb-brand-full { display: none; } .sidebar.collapsed .sb-brand .sb-brand-short { display: inline; } /* Nav sections */ .sb-nav { flex: 1; padding: 0; overflow-y: auto; } .sb-group-label { font-family: var(--font-head); text-decoration: underline; text-underline-offset: 3px; font-size: 18px; font-weight: 600; color: #00cfff; text-transform: uppercase; letter-spacing: 0.08em; padding: 7px 14px 10px 6px; margin: 0px 0 0px; white-space: nowrap; overflow: hidden; transition: opacity 0.15s; } .sidebar.collapsed .sb-group-label { opacity: 0; height: 0; padding: 0; } .sb-divider { height: 1px; background: var(--border); margin: 6px 10px; transition: margin 0.2s; } .sidebar.collapsed .sb-divider { margin: 4px 6px; } /* Nav items */ .sb-item { display: flex; align-items: center; gap: 3px; width: 100%; min-height: 44px; padding: 0 14px; font-family: var(--font-head); font-size: 16px; font-weight: 500; color: #e1e8f0; background: none; border: none; border-bottom: 2px solid transparent; cursor: pointer; text-align: left; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; transition: color 0.12s, background 0.12s, border-color 0.12s; } .sb-item:hover { background: var(--surface-2); color: var(--text); } .sb-item.active { color: var(--accent); border-bottom: solid var(--accent); background: rgba(240, 164, 0, 0.242); } .sb-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .sb-icon { font-size: 16px; flex-shrink: 0; } .sb-label { transition: opacity 0.15s; } .sidebar.collapsed .sb-label { opacity: 0; width: 0; overflow: hidden; } /* Collapse toggle — side tab */ .sb-toggle { position: absolute; right: -26px; top: 160px; width: 26px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid #20def7; border-left: none; border-radius: 0 8px 8px 0; color: #20def7; font-size: 15px; font-weight: 700; cursor: pointer; transition: color 0.15s, background 0.15s; z-index: 10; box-shadow: 3px 0 8px rgba(32,222,247,0.15); } /* Content wrapper */ .content-wrapper { flex: 1; display: flex; flex-direction: column; overflow-y: auto; min-width: 0; } /* Breadcrumb */ .breadcrumb { padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--border); font-family: var(--font-head); font-size: 11px; font-weight: 600; color: #20def7; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; } /* Content wrapper */ .content-wrapper { flex: 1; display: flex; flex-direction: column; overflow-y: auto; min-width: 0; } /* Breadcrumb */ .breadcrumb { padding: 8px 24px; background: var(--surface); border-bottom: 1px solid var(--border); font-family: var(--font-head); font-size: 16px; font-weight: 600; color: #e3e9eb; text-transform: uppercase; letter-spacing: 0.1em; white-space: nowrap; flex-shrink: 0; } /* ── Main content ───────────────────────────────────────────────────────── */ .main { padding: 60px; } .tab-panel { display: none; } .tab-panel.active { display: block; } /* ── KPI cards ──────────────────────────────────────────────────────────── */ .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } .kpi-card { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; } .kpi-card.accent { border-color: var(--accent); } .kpi-card.green { border-color: var(--green); } .kpi-card.blue { border-color: var(--blue); } .kpi-card.red { border-color: var(--red); } .kpi-label { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 8px; } .kpi-value { font-family: var(--font-head); font-size: 38px; font-weight: 700; color: var(--text); line-height: 1; } .kpi-card.accent .kpi-value { color: var(--accent); } .kpi-card.green .kpi-value { color: var(--green); } .kpi-card.blue .kpi-value { color: var(--blue); } .kpi-card.red .kpi-value { color: var(--red); } .kpi-sub { font-size: 13px; color: var(--text-dim); margin-top: 4px; } /* ── Section ────────────────────────────────────────────────────────────── */ .section { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 24px; } .section-header { display: flex; align-items: center; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--border); } .section-title { font-family: var(--font-head); font-size: 17px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.06em; } .section-body { padding: 16px 20px; } /* ── Table ──────────────────────────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table th { font-family: var(--font-head); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim); text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--border); } .data-table td { padding: 10px 12px; border-bottom: 1px solid #1e2530; vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: #1a2030; } /* ── Status badges ──────────────────────────────────────────────────────── */ .badge { display: inline-block; font-family: var(--font-head); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; padding: 3px 10px; border-radius: 4px; white-space: nowrap; } .badge-termine { background: #0e2e1a; color: #2ea84b; border: 1px solid #2ea84b; } .badge-encours { background: #0d2035; color: #3a9bd5; border: 1px solid #3a9bd5; } .badge-planif { background: #1e2530; color: #9eb3c2; border: 1px solid #2a3140; } .badge-pleine { background: #2e0d0d; color: #e3001b; border: 1px solid #e3001b; } /* ── Fill bar ───────────────────────────────────────────────────────────── */ .fill-wrap { display: flex; align-items: center; gap: 8px; min-width: 120px; } .fill-bar { flex: 1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; } .fill-bar-inner { height: 100%; border-radius: 3px; } .fill-25 { background: var(--green); } .fill-50 { background: #c8a400; } .fill-75 { background: #e07000; } .fill-100 { background: var(--red); } .fill-pct { font-family: var(--font-head); font-size: 13px; font-weight: 600; min-width: 36px; text-align: right; color: var(--red-text); } /* ── Route link button ──────────────────────────────────────────────────── */ .route-link { display: inline-block; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent); font-family: var(--font-head); font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 5px; text-decoration: none; transition: border-color 0.15s; } .route-link:hover { border-color: var(--accent); } /* ── Borne alert cards ──────────────────────────────────────────────────── */ .borne-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .borne-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; } .borne-card.pleine { border-color: var(--red); } .borne-card.high { border-color: #e07000; } .borne-id { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: var(--accent); margin-bottom: 4px; } .borne-addr { font-size: 13px; color: var(--text-dim); line-height: 1.3; margin-bottom: 8px; } /* ── Antenne bars ───────────────────────────────────────────────────────── */ .antenne-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .antenne-name { font-family: var(--font-head); font-size: 16px; font-weight: 700; color: var(--text); min-width: 180px; flex-shrink: 0; } .antenne-bar-wrap { flex: 1; min-width: 0; height: 36px; background: var(--surface-2); border-radius: 4px; overflow: visible; position: relative; } .antenne-bar { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--accent), #e07000); transition: width 0.6s ease; display: flex; align-items: center; padding: 0 14px; min-width: 80px; } .antenne-bar-label { font-family: var(--font-head); font-size: 15px; font-weight: 700; color: #000; white-space: nowrap; } .antenne-meta { font-family: var(--font-head); font-size: 13px; color: var(--text-dim); min-width: 80px; flex-shrink: 0; text-align: right; } /* ── Fill distribution ──────────────────────────────────────────────────── */ .fill-dist-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .fill-dist-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px; text-align: center; } .fill-dist-val { font-family: var(--font-head); font-size: 32px; font-weight: 700; margin-bottom: 4px; } .fill-dist-label { font-family: var(--font-head); font-size: 12px; font-weight: 600; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.06em; } /* ── Loading / error ────────────────────────────────────────────────────── */ .loading { text-align: center; padding: 32px; color: var(--text-dim); font-family: var(--font-head); font-size: 16px; } .loading::after { content: ''; animation: dots 1.2s infinite; } @keyframes dots { 0% { content: ''; } 33% { content: '.'; } 66% { content: '..'; } 100% { content: '...'; } } .error-msg { background: #2e0d0d; border: 1px solid var(--red); color: #ff6b6b; padding: 12px 16px; border-radius: 8px; font-size: 14px; } /* ── Chart ──────────────────────────────────────────────────────────────── */ .chart-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; /* space between legend and scrollbar */ } .chart-svg { display: block; min-width: 300px; } .chart-empty { text-align: center; padding: 32px; color: var(--text-dim); font-family: var(--font-head); font-size: 15px; } /* ── Table scroll wrapper (mobile) ──────────────────────────────────────── */ .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll .data-table { min-width: 700px; /* forces horizontal scroll on mobile */ } /* ── Scroll to top button ───────────────────────────────────────────────── */ .scroll-top { position: fixed; bottom: 28px; right: 24px; width: 44px; height: 44px; background: var(--accent); color: #0d1117; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; display: none; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(0,0,0,0.5); transition: opacity 0.2s, transform 0.2s; z-index: 9999; } .scroll-top.visible { display: flex; } .scroll-top:hover { transform: scale(1.1); } .scroll-top:active { transform: scale(0.95); } /* ── Accessibility — minimum font sizes ─────────────────────────────────── */ /* Mobile: nothing below 14px. Desktop: nothing below 13px. */ @media (max-width: 600px) { body { font-size: 16px; } .kpi-label { font-size: 13px !important; } .kpi-value { font-size: 32px !important; } .kpi-sub { font-size: 14px !important; } .section-title { font-size: 16px !important; } .data-table { font-size: 15px !important; } .data-table th { font-size: 13px !important; } .badge { font-size: 13px !important; } .tab-btn { font-size: 15px !important; padding: 12px 14px !important; } .antenne-name { font-size: 15px !important; min-width: 100px !important; } .antenne-meta { min-width: 60px !important; font-size: 12px !important; } .fill-dist-val { font-size: 26px !important; } .fill-dist-label { font-size: 13px !important; } .last-refresh { font-size: 13px !important; } /* prevent EPCI tab overflowing viewport */ #tab-epci { max-width: 100vw; overflow-x: hidden; } .antenne-row { gap: 8px !important; } /* Parc tab small labels */ .parc-stat-label { font-size: 13px !important; } .parc-stat-val { font-size: 24px !important; } .interv-table { font-size: 14px !important; } .interv-table th { font-size: 13px !important; } .badge-interv-statut { font-size: 13px !important; padding: 3px 10px !important; } .overdue-tag { font-size: 13px !important; } .ok-tag { font-size: 13px !important; } /* Programme tab small labels */ .prog-tournee-name { font-size: 13px !important; } .prog-tournee-chauf { font-size: 12px !important; } .prog-tournee-statut { font-size: 12px !important; padding: 3px 8px !important; } .prog-modele-name { font-size: 14px !important; } .prog-modele-meta { font-size: 12px !important; } .prog-day-name { font-size: 14px !important; } .prog-day-date { font-size: 13px !important; } .prog-day-half-label { font-size: 12px !important; } .prog-sidebar-title { font-size: 14px !important; } .prog-sidebar-hint { font-size: 13px !important; } .prog-borne-item-id { font-size: 13px !important; } .prog-borne-item-addr { font-size: 12px !important; } .prog-borne-col-title { font-size: 13px !important; } .prog-commune-chip { font-size: 12px !important; } .prog-commune-clear { font-size: 12px !important; } .prog-modal-label { font-size: 13px !important; } .prog-modal-title { font-size: 17px !important; } .chart-toggle { font-size: 14px !important; padding: 6px 12px !important; } } /* ── Laptop breakpoint (Dell 16+ / ~1140px viewport at 150% OS scale) ───── body { zoom:1.2 } means layout renders at viewport÷1.2 ≈ 948px. Media queries fire on raw viewport (1138px) so 900px never triggered. This breakpoint fixes padding, KPI grids, and inline-style overrides. */ @media (max-width: 1800px) { .main { padding: 28px 32px; } .kpi-row { grid-template-columns: repeat(2, 1fr); } .kpi-row[style] { grid-template-columns: repeat(2, 1fr) !important; } .fill-dist-grid { grid-template-columns: repeat(3, 1fr); } .antenne-name { min-width: 130px; } } /* ── Responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } .fill-dist-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .kpi-row { grid-template-columns: 1fr 1fr; } .main { padding: 16px; } } /* ── Laptop breakpoint — matches base.css 1400px fix ─────────────────── */ @media (max-width: 1400px) { .prog-layout { grid-template-columns: 220px 1fr; } .prog-week-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .prog-tournee-name { font-size: 11px; } .prog-tournee-chauf { font-size: 10px; } .prog-day-name { font-size: 11px; } .prog-day-date { font-size: 11px; } .prog-week-label { font-size: 15px; min-width: 180px; } .prog-sidebar { max-height: 600px; } }