/* Boucan — interface de l'appli (mobile d'abord). Aucune couleur en ligne : thèmes par classes sur . */ :root, .theme-dark { --bg: #0e0d12; --bg2: #16141c; --panel: #1b1922; --panel2: #221f2b; --line: #2c2934; --seg-off: #25222d; --text: #f4efe6; --muted: #a39eac; --brand: #d7ff3c; --brand-ink: #10110a; --gap: rgba(160, 155, 170, .22); --c-idle: #5d5966; --c-calm: #43c6f5; --c-ok: #5ff0a0; --c-loud: #ffd23f; --c-warn: #ff9f1c; --c-danger: #ff4d5e; --c-extreme: #ff3df0; --lvl: var(--c-idle); --num: "Bahnschrift", "DIN Alternate", "DIN Condensed", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif; --radius: 16px; color-scheme: dark; } .theme-light { --bg: #f6f2ea; --bg2: #ece6db; --panel: #ffffff; --panel2: #f3eee5; --line: #ddd5c8; --seg-off: #e4ddd1; --gap: rgba(90, 80, 70, .16); --text: #16141c; --muted: #5a5563; --brand: #16141c; --brand-ink: #d7ff3c; --c-calm: #0a7fae; --c-ok: #0f8a4b; --c-loud: #8f6a00; --c-warn: #b85a00; --c-danger: #c8202f; --c-extreme: #a3169a; color-scheme: light; } .theme-sun { --bg: #ffffff; --bg2: #f2f2f2; --panel: #ffffff; --panel2: #f2f2f2; --line: #000000; --seg-off: #d9d9d9; --gap: rgba(0, 0, 0, .18); --text: #000000; --muted: #222222; --brand: #000000; --brand-ink: #ffff00; --c-calm: #005a8c; --c-ok: #006b2e; --c-loud: #6b4f00; --c-warn: #8a3b00; --c-danger: #a0000c; --c-extreme: #7a0070; color-scheme: light; } .theme-red { --bg: #000000; --bg2: #0a0000; --panel: #0d0202; --panel2: #140404; --line: #3a0a0a; --seg-off: #1f0606; --gap: rgba(120, 20, 20, .35); --text: #ff5a4a; --muted: #b8392d; --brand: #ff3b2b; --brand-ink: #000000; --c-idle: #5a1a14; --c-calm: #c23a2c; --c-ok: #d4402f; --c-loud: #e34533; --c-warn: #ef4b37; --c-danger: #ff523d; --c-extreme: #ff6a55; color-scheme: dark; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); } body { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-variant-numeric: tabular-nums; overscroll-behavior: none; touch-action: manipulation; line-height: 1.4; } body.in-app { overflow: hidden; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } a { color: var(--brand); } .theme-light a, .theme-sun a { color: var(--text); } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip { position: absolute; left: -999px; top: 8px; background: var(--brand); color: var(--brand-ink); padding: 10px 14px; border-radius: 10px; z-index: 100; } .skip:focus { left: 8px; } :focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; } svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } /* ---------- Accueil ---------- */ .intro { min-height: 100%; display: flex; justify-content: center; background: radial-gradient(90% 55% at 100% 0%, color-mix(in srgb, var(--c-extreme) 16%, transparent), transparent 70%), radial-gradient(80% 50% at 0% 35%, color-mix(in srgb, var(--c-calm) 12%, transparent), transparent 70%), var(--bg); } .intro-inner { max-width: 480px; width: 100%; padding: calc(env(safe-area-inset-top) + 28px) 22px 40px; } .intro-top { display: flex; align-items: center; gap: 12px; } .intro-logo { width: 56px; height: 56px; border-radius: 14px; } .kicker { margin: 0; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); } .intro h1 { font-family: var(--num); font-size: clamp(52px, 18vw, 112px); line-height: .86; letter-spacing: -.03em; margin: 26px 0 0; font-weight: 800; text-transform: uppercase; } .h1-sub { display: block; font-family: system-ui, sans-serif; text-transform: none; font-size: 19px; line-height: 1.35; letter-spacing: 0; font-weight: 500; color: var(--muted); margin-top: 14px; } .intro-scale { display: flex; align-items: flex-end; gap: 6px; height: 64px; margin: 26px 0 22px; } .intro-scale span { flex: 1; border-radius: 4px 4px 1px 1px; animation: bar 1.8s ease-in-out infinite alternate; transform-origin: bottom; } .intro-scale .b1 { height: 18%; background: var(--c-calm); } .intro-scale .b2 { height: 30%; background: var(--c-calm); animation-delay: -.6s; } .intro-scale .b3 { height: 44%; background: var(--c-ok); animation-delay: -1.1s; } .intro-scale .b4 { height: 52%; background: var(--c-ok); animation-delay: -.6s; } .intro-scale .b5 { height: 63%; background: var(--c-loud); } .intro-scale .b6 { height: 72%; background: var(--c-warn); animation-delay: -1.1s; } .intro-scale .b7 { height: 84%; background: var(--c-danger); } .intro-scale .b8 { height: 100%; background: var(--c-extreme); animation-delay: -.6s; } @keyframes bar { from { transform: scaleY(.55); } to { transform: scaleY(1); } } .intro-mode { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 10px 14px; color: var(--muted); } .why { color: var(--muted); font-size: 14px; text-align: center; margin: 10px 0 0; } .btn-primary { display: block; width: 100%; min-height: 60px; border: 0; border-radius: 18px; background: var(--brand); color: var(--brand-ink); font-weight: 800; font-size: 19px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand) 60%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--brand) 70%, transparent); transition: transform .08s; margin: 12px 0 6px; } .btn-primary:active { transform: scale(.98); } .btn-primary:disabled { opacity: .5; } .btn-link { display: block; margin: 0 auto; background: none; border: 0; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; padding: 14px; font-size: 15px; min-height: 48px; } .btn-link.danger { color: var(--c-danger); } .intro-msg { margin: 0; color: var(--c-warn); font-weight: 600; line-height: 1.45; } .intro-msg:not(:empty) { padding: 12px 14px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--c-warn) 45%, transparent); background: color-mix(in srgb, var(--c-warn) 10%, transparent); margin-bottom: 8px; } .intro-features { padding: 0; list-style: none; margin: 18px 0; counter-reset: f; } .intro-features li { padding: 11px 0 11px 36px; border-top: 1px solid var(--line); position: relative; color: var(--muted); font-size: 15px; line-height: 1.4; counter-increment: f; } .intro-features li::before { content: counter(f, decimal-leading-zero); position: absolute; left: 0; top: 12px; font-family: var(--num); font-weight: 700; color: var(--brand); font-size: 14px; } .intro-features strong { color: var(--text); } .honest { border-left: 3px solid var(--c-warn); padding: 4px 0 4px 12px; color: var(--muted); font-size: 14px; line-height: 1.45; } .honest strong { color: var(--text); } .intro-foot { color: var(--muted); font-size: 13px; line-height: 1.6; } /* ---------- Application ---------- */ .app { position: fixed; inset: 0; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(120% 60% at 50% 18%, color-mix(in srgb, var(--lvl) 20%, transparent), transparent 65%), var(--bg); } .topbar { display: flex; align-items: center; gap: 8px; padding: calc(env(safe-area-inset-top) + 8px) 12px 4px; flex: none; } .brand { font-family: var(--num); font-weight: 800; font-size: 20px; text-transform: uppercase; letter-spacing: -.01em; color: var(--brand); background: none; border: 0; padding: 6px 2px; min-height: 44px; max-width: 42vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .status { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 4px 8px; border-radius: 99px; border: 1px solid var(--line); color: var(--muted); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; } .status.is-live { color: var(--text); border-color: color-mix(in srgb, var(--c-danger) 50%, transparent); } .status.is-live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--c-danger); animation: rec 1.2s infinite; } @keyframes rec { 50% { opacity: .25; } } .top-actions { margin-left: auto; display: flex; gap: 6px; } .qchip { min-height: 44px; min-width: 48px; padding: 0 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 800; font-size: 14px; } .banners { flex: none; display: grid; gap: 6px; padding: 0 12px; } .banner { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 12px; border-radius: 12px; font-size: 13px; line-height: 1.35; background: var(--panel); border: 1px solid var(--line); } .banner span { flex: 1; } .banner-warn { border-color: color-mix(in srgb, var(--c-warn) 60%, transparent); background: color-mix(in srgb, var(--c-warn) 12%, var(--panel)); } .banner-act { min-height: 40px; border-radius: 10px; border: 0; background: var(--brand); color: var(--brand-ink); font-weight: 800; padding: 0 12px; } .banner-x { width: 40px; height: 40px; border: 0; background: none; color: var(--muted); } .tab { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .tab-scroll { overflow-y: auto; padding: 4px 14px 24px; -webkit-overflow-scrolling: touch; } .tab-title { font-family: var(--num); text-transform: uppercase; font-size: 30px; margin: 8px 0 4px; letter-spacing: -.01em; } .meter { position: relative; flex: 1 1 auto; min-height: 160px; } .gauge { position: absolute; inset: 0; width: 100%; height: 100%; } .readout { position: absolute; left: 0; right: 0; top: calc(var(--cy, 120px) - var(--gr, 100px) * .5); display: flex; flex-direction: column; align-items: center; pointer-events: none; } .value { font-family: var(--num); font-weight: 700; font-size: calc(var(--gr, 100px) * .74); line-height: .8; letter-spacing: -.04em; color: var(--text); text-shadow: 0 0 40px color-mix(in srgb, var(--lvl) 45%, transparent); } .unit { font-weight: 700; font-size: clamp(11px, calc(var(--gr, 100px) * .1), 15px); letter-spacing: .06em; color: var(--muted); margin-top: 4px; } .band { margin-top: 4px; padding: 3px 10px; border-radius: 99px; font-weight: 800; font-size: clamp(11px, calc(var(--gr, 100px) * .1), 14px); color: var(--bg); background: var(--lvl); } .meter-foot { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 10px; min-height: 38px; } .uncert { flex: none; min-height: 36px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--muted); font-size: 12px; font-weight: 700; } .flags { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; } .flag { font-size: 12px; font-weight: 800; padding: 3px 8px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); } .flag-danger { color: var(--c-danger); border-color: var(--c-danger); } .flag-warn { color: var(--c-warn); border-color: var(--c-warn); } .flag-info { color: var(--muted); } .mode-panel { flex: none; margin: 0 12px; } .mode-panel:empty { display: none; } .mp-note { margin: 2px 0 4px; font-size: 13px; color: var(--muted); text-align: center; min-height: 0; } .mp-note:empty { display: none; } .dose, .music, .nightpanel, .office { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; margin-top: 4px; } .dose-head, .mbar-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--muted); font-weight: 700; } .dose-head b, .mbar-head b { font-family: var(--num); font-size: 22px; color: var(--text); } .dose-bar, .mbar-track { position: relative; height: 14px; border-radius: 99px; background: var(--seg-off); overflow: hidden; margin: 4px 0; } .dose-bar i, .mbar-track i { position: absolute; inset: 0 auto 0 0; width: var(--w, 0%); background: var(--c-ok); border-radius: 99px; transition: width .4s; } .dose-bar i.is-warn, .mbar-track i.is-warn { background: var(--c-warn); } .dose-bar i.is-danger, .mbar-track i.is-danger { background: repeating-linear-gradient(135deg, var(--c-danger) 0 8px, color-mix(in srgb, var(--c-danger) 70%, #000) 8px 12px); } .dose-bar em { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--muted); } .dose-bar .m50 { left: 50%; } .dose-bar .m80 { left: 80%; } .mbar-track em { position: absolute; top: -2px; bottom: -2px; width: 3px; left: var(--x, 90%); background: var(--text); } .dose-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; font-size: 11.5px; color: var(--muted); } .dose-grid b { display: block; font-family: var(--num); font-size: 17px; color: var(--text); } .music { display: grid; gap: 2px; } .mbar small { font-size: 12px; color: var(--muted); } .nightpanel { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .nightpanel b { display: block; font-family: var(--num); font-size: 18px; color: var(--text); } .nightpanel .btn { margin-left: auto; flex: none; } .office table { width: 100%; border-collapse: collapse; font-size: 13px; } .office th, .office td { text-align: right; padding: 2px 6px; } .office th:first-child, .office td:first-child { text-align: left; } .stats { flex: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 6px 12px 0; border-radius: var(--radius); overflow: hidden; background: var(--line); border: 1px solid var(--line); } .stat { background: var(--panel); padding: 5px 10px 6px; display: flex; flex-direction: column; min-width: 0; } .stat span { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat b { font-family: var(--num); font-size: 23px; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat:nth-child(2) b { color: var(--brand); } .stat.is-hot b { color: var(--c-danger); } .history { flex: none; margin: 6px 12px 0; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); padding: 4px 6px 6px 2px; } .history-head { display: flex; align-items: center; gap: 6px; padding-left: 4px; } .history-sum { margin-left: auto; font-size: 12px; color: var(--muted); } .chip-share { width: 40px; height: 36px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); display: grid; place-items: center; flex: none; } .chip-share svg { width: 18px; height: 18px; } .history-canvas { width: 100%; height: clamp(70px, 13vh, 130px); display: block; touch-action: pan-y; } .chips { display: flex; gap: 4px; flex-wrap: wrap; } .chips button { min-height: 36px; min-width: 44px; padding: 0 9px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); font-size: 12.5px; font-weight: 700; color: var(--muted); } .chips button.is-on { color: var(--text); border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .tools { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 6px 12px 0; } #tab-spectrum .tool { padding: 0 10px; } .tool { min-height: 48px; padding: 0 2px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 13px; font-weight: 700; color: var(--muted); } .tool[aria-pressed="true"] { color: var(--brand-ink); background: var(--brand); border-color: var(--brand); } .disclaimer { margin: 2px 12px 0; text-align: center; font-size: 11px; color: var(--muted); flex: none; } #tab-measure { overflow-y: auto; overflow-x: hidden; } .controls { position: sticky; bottom: 0; z-index: 2; background: linear-gradient(transparent, var(--bg) 30%); flex: none; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 6px 16px 4px; } .ctl { justify-self: center; min-width: 92px; min-height: 58px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--muted); } .ctl svg { color: var(--text); } .ctl-main { width: 74px; height: 74px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); display: grid; place-items: center; box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand) 18%, transparent); transition: transform .08s; } .ctl-main:active { transform: scale(.95); } .ctl-main svg { width: 32px; height: 32px; stroke-width: 3; } .ctl-main .i-play { fill: currentColor; } .ctl-main .i-play, .app.is-paused .ctl-main .i-pause { display: none; } .app.is-paused .ctl-main .i-play { display: block; } .app.is-paused .value { opacity: .45; } .tabbar { flex: none; display: grid; grid-template-columns: repeat(5, 1fr); border-top: 1px solid var(--line); background: var(--bg2); padding-bottom: env(safe-area-inset-bottom); } .tabbar button { min-height: 58px; border: 0; background: none; color: var(--muted); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11.5px; font-weight: 700; } .tabbar button[aria-selected="true"] { color: var(--brand); } .tabbar button[aria-selected="true"] svg { stroke-width: 2.8; } /* ---------- Spectre ---------- */ #tab-spectrum { padding: 6px 12px 10px; overflow-y: auto; } .spec-head { display: grid; gap: 6px; } .spec-tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; } .spec-tools .seg { grid-auto-columns: 48px; } .spec-read { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font-size: 14px; font-weight: 700; margin: 8px 2px 4px; min-height: 22px; } .spec-read span:empty { display: none; } .badge { background: var(--brand); color: var(--brand-ink); border-radius: 8px; padding: 2px 8px; font-size: 12px; } .spec-canvas { height: clamp(220px, 42vh, 420px); background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px; } .spec-canvas canvas { width: 100%; height: 100%; display: block; touch-action: none; } .warn-note { font-size: 12.5px; color: var(--muted); border-left: 3px solid var(--c-warn); padding-left: 10px; margin: 10px 0; } /* ---------- Composants communs ---------- */ .seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; } .seg button { min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 800; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2px 4px; } .seg small { font-weight: 500; font-size: 11px; color: var(--muted); } .seg button.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .row { display: flex; gap: 8px; margin: 10px 0; } .row.wrap { flex-wrap: wrap; } .btn { flex: 1 1 auto; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; padding: 0 12px; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; color: var(--text); } .btn:disabled { opacity: .45; } .btn-accent { min-height: 48px; padding: 0 16px; border-radius: 12px; border: 0; background: var(--brand); color: var(--brand-ink); font-weight: 800; } .btn-accent.small, .btn.small { min-height: 40px; } .btn.btn-accent { flex: 1 1 auto; } .btn-danger { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 50%, var(--line)); } .hint { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 6px 0; } .hint.small { font-size: 12.5px; } .hint.center { text-align: center; } .inline-link { background: none; border: 0; padding: 8px 0; min-height: 40px; color: var(--text); text-decoration: underline; font-size: inherit; } .field { display: grid; gap: 4px; font-size: 13.5px; color: var(--muted); font-weight: 600; margin: 8px 0; } .field b { color: var(--text); } .field-row { display: flex; align-items: center; gap: 8px; } .field-row input { flex: 1; min-width: 0; } .field input[type=text], .field input[type=number], .field input[type=search], .field input[type=time], .field input[type=date], .field select, .field textarea, .field-row input, .filters input, .filters select, textarea.copy { width: 100%; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); color: var(--text); font-size: 16px; padding: 8px 12px; } .field textarea { resize: vertical; min-height: 64px; } textarea.copy { font-size: 14px; line-height: 1.45; } .field input[type=range] { width: 100%; accent-color: var(--brand); height: 36px; } .check { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 15px; } .check.inline { flex-wrap: wrap; gap: 6px 10px; } .check input[type=checkbox], .check input[type=radio] { width: 22px; height: 22px; accent-color: var(--brand); flex: none; } .check.small { font-size: 13px; min-height: 40px; } input.mini { width: 78px; min-height: 40px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); padding: 4px 8px; font-size: 15px; } .grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: end; } .block { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 14px; margin: 12px 0; } .block h3, .sheet h3 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--brand); } .block > h3:first-child, .block-head h3 { margin-top: 4px; } .theme-light .block h3, .theme-light .sheet h3, .theme-sun .block h3, .theme-sun .sheet h3 { color: var(--muted); } .block-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .plain { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; font-size: 14px; } .plain.bullets li { padding-left: 16px; position: relative; } .plain.bullets li::before { content: "•"; position: absolute; left: 2px; color: var(--brand); } .plain.links a { display: inline-block; padding: 8px 0; } .box-warn, .box-info { border-radius: 12px; padding: 10px 12px; font-size: 13.5px; line-height: 1.45; margin: 8px 0; } .box-warn { background: color-mix(in srgb, var(--c-warn) 12%, var(--panel)); border: 1px solid color-mix(in srgb, var(--c-warn) 45%, transparent); } .box-info { background: var(--panel2); border: 1px solid var(--line); } .warn-list { margin: 6px 0; padding-left: 18px; font-size: 13px; color: var(--c-warn); } .progress { height: 8px; border-radius: 99px; background: var(--seg-off); overflow: hidden; margin: 10px 0; } .progress i { display: block; height: 100%; width: var(--w, 0%); background: var(--brand); transition: width .1s; } .calib-live { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); font-size: 14px; } .calib-live > b { font-family: var(--num); font-size: 28px; color: var(--text); white-space: nowrap; } .calib-live small { font-size: 12px; } .table-wrap { overflow-x: auto; margin: 6px 0; } table { border-collapse: collapse; width: 100%; font-size: 13.5px; } th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; } thead th { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } tr.is-cur td { color: var(--brand); font-weight: 800; } caption { text-align: left; color: var(--muted); font-size: 12px; padding: 4px 0; } details summary { cursor: pointer; min-height: 40px; display: flex; align-items: center; color: var(--muted); } .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .tag { min-height: 48px; padding: 0 14px; border-radius: 99px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; } .tag.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 6px; } .summary div { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 6px 10px; min-width: 0; } .summary span { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; } .summary b { font-family: var(--num); font-size: 21px; white-space: nowrap; } .summary small { display: block; font-size: 10.5px; color: var(--muted); } .checklist { list-style: none; padding: 0; margin: 0; } .pick { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 6px; } .pick button { width: 100%; text-align: left; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); padding: 8px 12px; } .pick-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .stat-pick { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 8px; } .gloss dt { font-weight: 800; margin-top: 10px; } .gloss dd { margin: 2px 0 0; color: var(--muted); font-size: 14px; } .ladder { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; } .ladder li { display: flex; gap: 12px; align-items: center; font-size: 14px; padding: 4px 0; } .ladder li span { display: grid; } .ladder small { color: var(--muted); font-size: 12px; } .ladder b { flex: none; min-width: 54px; text-align: center; padding: 3px 0; border-radius: 8px; color: var(--bg); font-family: var(--num); font-size: 17px; } .lvl-calm { background: var(--c-calm); } .lvl-ok { background: var(--c-ok); } .lvl-loud { background: var(--c-loud); } .lvl-warn { background: var(--c-warn); } .lvl-danger { background: repeating-linear-gradient(135deg, var(--c-danger) 0 7px, color-mix(in srgb, var(--c-danger) 75%, #000) 7px 10px); } .lvl-extreme { background: repeating-linear-gradient(135deg, var(--c-extreme) 0 7px, color-mix(in srgb, var(--c-extreme) 75%, #000) 7px 10px); } .lvl-idle { background: var(--c-idle); } .legend { font-size: 13px; } .dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; } .dot.c1 { background: #d7ff3c; } .dot.c2 { background: #ff4d5e; } /* ---------- Journal ---------- */ .filters { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 8px 0; font-size: 13px; color: var(--muted); } .filters input[type=search] { grid-column: 1 / -1; } .filters label { display: grid; gap: 2px; } .j-list { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; } .entry { display: flex; align-items: stretch; gap: 6px; } .entry-check { display: grid; place-items: center; padding: 0 4px; } .entry-check input { width: 24px; height: 24px; accent-color: var(--brand); } .entry-open { flex: 1; display: flex; gap: 12px; align-items: center; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; min-width: 0; } .entry-leq { flex: none; min-width: 66px; text-align: center; border-radius: 12px; padding: 6px 4px; color: var(--bg); } .entry-leq b { display: block; font-family: var(--num); font-size: 26px; line-height: 1; } .entry-leq small { font-size: 10px; font-weight: 800; letter-spacing: .06em; } .entry-body { min-width: 0; flex: 1; display: grid; gap: 2px; } .entry-body strong { font-size: 15.5px; overflow-wrap: anywhere; } .entry-meta { font-size: 12.5px; color: var(--muted); } .badges { display: flex; flex-wrap: wrap; gap: 4px; } .badges i { font-style: normal; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 6px; background: var(--panel2); border: 1px solid var(--line); color: var(--muted); } .rowlink { width: 100%; text-align: left; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; min-height: 48px; display: grid; } .rowlink small { color: var(--muted); } .cal-nav { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 700; text-transform: capitalize; } .cal-nav button { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel2); font-size: 20px; } .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 13px; } .cal-h { color: var(--muted); font-size: 11px; font-weight: 700; } .cal-d { min-height: 40px; display: grid; place-items: center; border-radius: 8px; color: var(--muted); } button.cal-d { border: 0; color: var(--bg); font-weight: 800; line-height: 1; } button.cal-d small { font-size: 10px; } .night-chart { height: 220px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; margin: 6px 0; } .night-chart canvas, .bars-chart canvas { width: 100%; height: 100%; display: block; } .bars-chart { height: 170px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px; margin: 6px 0; } .bars-chart.small { height: 120px; } .events { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 4px; } .ev { width: 100%; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; text-align: left; min-height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); padding: 6px 12px; } .ev span { color: var(--muted); font-size: 13.5px; } .ev small { width: 100%; font-size: 12.5px; } .clip-ico { font-style: normal; color: var(--brand); margin-left: auto; } .event-card { background: var(--panel2); border: 1px solid var(--brand); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; } .event-card audio { width: 100%; margin: 6px 0; } .close.small { width: 40px; height: 40px; } /* ---------- Modes ---------- */ .modes { list-style: none; padding: 0; margin: 8px 0; display: grid; gap: 8px; } .mode-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; } .mode-card.is-on { border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); } .mode-pick { width: 100%; display: flex; gap: 12px; align-items: center; background: none; border: 0; padding: 4px 0; min-height: 56px; text-align: left; } .mode-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--panel2); font-size: 24px; color: var(--brand); } .mode-txt { display: grid; } .mode-txt b { font-size: 17px; } .mode-txt small { color: var(--muted); } .mode-help { margin: 2px 0; font-size: 13.5px; color: var(--muted); } /* ---------- Feuilles ---------- */ .sheet { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; z-index: 20; } .sheet-card { width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; background: var(--bg2); border: 1px solid var(--line); border-bottom: 0; border-radius: 22px 22px 0 0; padding: 14px 16px calc(env(safe-area-inset-bottom) + 24px); } .sheet-card.is-wide { max-width: 720px; height: 94vh; height: 94dvh; max-height: none; } .sheet-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; position: sticky; top: -14px; background: var(--bg2); padding: 4px 0 6px; z-index: 1; } .sheet-head h2 { margin: 0; font-family: var(--num); text-transform: uppercase; font-size: 24px; letter-spacing: -.01em; overflow-wrap: anywhere; } .close { flex: none; width: 48px; height: 48px; border-radius: 12px; border: 1px solid var(--line); background: var(--panel); font-size: 18px; } /* ---------- Écran de nuit ---------- */ .night { position: fixed; inset: 0; z-index: 30; background: #000; color: #5a0f0a; display: grid; place-items: center; } .night-inner { text-align: center; padding: 20px; } .night-clock { font-family: var(--num); font-size: 22vw; line-height: 1; margin: 0; color: #4a0c08; } .night-value { font-family: var(--num); font-size: 10vw; margin: 8px 0; color: #66120c; } .night-value small { font-size: 4vw; } .night-meta, .night-hint { font-size: 15px; margin: 6px 0; color: #5a0f0a; } .night-controls { display: grid; gap: 10px; margin-top: 16px; } .night-btn { min-height: 56px; border-radius: 14px; border: 1px solid #3a0a07; background: #0d0201; color: #8a1a12; font-weight: 700; font-size: 16px; padding: 0 20px; } /* ---------- Feu tricolore ---------- */ .classroom { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: #0f3b26; color: #fff; transition: background-color 1.2s; } .classroom[data-state="orange"] { background: #8a4b00; } .classroom[data-state="red"] { background: #9c3a00; } .class-inner { text-align: center; padding: 20px; width: 100%; } .class-face { width: min(62vw, 52vh); height: min(62vw, 52vh); } .face-bg { fill: #2ecf7a; transition: fill 1.2s; } .classroom[data-state="orange"] .face-bg { fill: #ffb020; } .classroom[data-state="red"] .face-bg { fill: #ff7a1a; } .face-eye { fill: #10231a; } .face-mouth { stroke: #10231a; stroke-width: 10; fill: none; stroke-linecap: round; } .class-face.is-circle .face-eye, .class-face.is-circle .face-mouth { display: none; } .class-label { font-family: var(--num); font-size: clamp(40px, 12vw, 120px); font-weight: 800; margin: 10px 0 0; text-transform: uppercase; line-height: 1; } .class-value { font-size: clamp(20px, 5vw, 40px); margin: 6px 0; opacity: .85; } .class-calm { font-size: clamp(18px, 4vw, 32px); margin: 0 0 16px; } .class-exit { min-height: 48px; padding: 0 20px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; font-weight: 700; } /* ---------- Alertes et toasts ---------- */ .flash { position: fixed; inset: 0; pointer-events: none; z-index: 40; opacity: 0; box-shadow: inset 0 0 0 10px var(--c-danger), inset 0 0 120px 30px color-mix(in srgb, var(--c-danger) 60%, transparent); } .flash.sev-warn { box-shadow: inset 0 0 0 10px var(--c-warn), inset 0 0 120px 30px color-mix(in srgb, var(--c-warn) 60%, transparent); } .flash.is-on { animation: flash .9s ease-out; } @keyframes flash { 0%, 30% { opacity: 1; background: color-mix(in srgb, var(--c-danger) 25%, transparent); } 100% { opacity: 0; } } .toast { position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom) + 80px); transform: translate(-50%, 20px); max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 12px; background: var(--text); color: var(--bg); font-weight: 700; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 50; text-align: center; } .toast.is-on { opacity: 1; transform: translate(-50%, 0); } @media (prefers-reduced-motion: reduce) { .flash.is-on { animation: none; opacity: 1; transition: opacity 1.2s; } .intro-scale span, .status.is-live::before { animation: none; } .dose-bar i, .mbar-track i, .classroom, .face-bg { transition: none; } } @media (max-height: 700px) { .stat b { font-size: 19px; } .stat { padding: 3px 8px 4px; } .history-canvas { height: 60px; } .ctl-main { width: 62px; height: 62px; } .ctl { min-height: 50px; min-width: 84px; } .meter { min-height: 130px; } .tool { min-height: 44px; } .tabbar button { min-height: 52px; } .disclaimer { display: none; } } @media (max-height: 600px) { .history-canvas { height: 48px; } .meter-foot { min-height: 32px; } } /* Paysage : la courbe prend la largeur, valeur en surimpression */ @media (orientation: landscape) and (max-height: 520px) { #tab-measure { display: grid; grid-template-columns: 38% 1fr; grid-template-rows: auto 1fr auto auto; overflow: hidden; } #tab-measure[hidden] { display: none; } #tab-measure .meter { grid-row: 1 / 3; } #tab-measure .mode-panel, #tab-measure .stats { grid-column: 2; } #tab-measure .history { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; } #tab-measure .history-canvas { flex: 1; height: auto; } #tab-measure .tools, #tab-measure .disclaimer { display: none; } #tab-measure .controls { grid-column: 1 / -1; padding-top: 0; } .ctl-main { width: 54px; height: 54px; } .ctl { min-height: 46px; } .tabbar button { min-height: 44px; } .tabbar span { display: none; } } @media (min-width: 720px) { .app { max-width: 600px; margin: 0 auto; border-left: 1px solid var(--line); border-right: 1px solid var(--line); } } @media print { body > *:not(.print-area) { display: none !important; } }