:root {
  --bg: #f5f6f8; --card: #fff; --text: #1c1f26; --muted: #646b7a; --line: #e3e6ec;
  --accent: #2f5bea; --accent-text: #fff;
  --act: #34a853; --idle: #f2c14e; --pause: #8aa4c8; --off: #e6e8ee; --sus: #8e44ad;
  --warn: #b3261e; --ok-bg: #e7f5ec; --alert-bg: #fdecea;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --bg: #14161b; --card: #1d2027; --text: #e8eaf0; --muted: #98a0b0; --line: #2c303a;
    --accent: #6c8cff; --accent-text: #0b0e16; --off: #2a2e38; --ok-bg: #16301f; --alert-bg: #3a1c1a; --warn: #ff8a80; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
.top { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; background: var(--card); border-bottom: 1px solid var(--line); }
.top nav { display: flex; gap: 1rem; align-items: center; }
.brand { font-weight: 700; color: var(--text); text-decoration: none; }
main { max-width: 1000px; margin: 0 auto; padding: 1rem 1rem 4rem; }
h1 { font-size: 1.5rem; margin: .5rem 0; } h2 { font-size: 1.15rem; margin: 1.5rem 0 .5rem; } h3 { font-size: 1rem; margin: 1rem 0 .25rem; }
a { color: var(--accent); }
.muted { color: var(--muted); font-size: .9rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 1rem; margin: .75rem 0; }
.narrow { max-width: 520px; margin-left: auto; margin-right: auto; }
.head { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: flex-end; }
.months { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.btn { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--text); text-decoration: none; font: inherit; cursor: pointer; }
.btn.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.btn.small { padding: .2rem .6rem; font-size: .85rem; }
.btn.disabled { opacity: .35; cursor: default; }
button.link { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
form.inline { display: inline; }
label { display: block; margin: .5rem 0; font-weight: 600; }
input, textarea { display: block; width: 100%; padding: .5rem .6rem; margin-top: .25rem; border: 1px solid var(--line); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; }
.billed { display: flex; gap: .3rem; justify-content: flex-end; } .billed input { width: 5.5rem; margin: 0; padding: .2rem .4rem; text-align: right; }
textarea.secret { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; word-break: break-all; }
.alert { background: var(--alert-bg); border-radius: 8px; padding: .6rem .8rem; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .75rem; }
.stat { display: flex; flex-direction: column; margin: 0; } .label { color: var(--muted); font-size: .8rem; } .big { font-size: 1.6rem; font-weight: 700; }
.daystats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: .5rem; margin-bottom: 1rem; }
.daystats div { display: flex; flex-direction: column; }
.table-wrap { overflow-x: auto; padding: .25rem; }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { text-align: left; padding: .45rem .5rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
th.num, td.num { text-align: right; }
tr.current { background: color-mix(in srgb, var(--accent) 10%, transparent); }
td.warn { color: var(--warn); font-weight: 600; }
progress { width: 70px; height: .6rem; vertical-align: middle; }
.pill { display: inline-block; padding: .05rem .55rem; border-radius: 99px; background: var(--off); font-size: .8rem; text-decoration: none; color: var(--text); }
.pill.on { background: var(--ok-bg); color: var(--act); font-weight: 600; }
.pill.sus { background: color-mix(in srgb, var(--sus) 18%, transparent); color: var(--sus); }
.suspect { border-color: var(--sus); }
.plain { margin: .25rem 0; padding-left: 1.1rem; }
/* Frise : une case par tranche de 10 minutes. */
.frise { display: flex; gap: 1px; height: 38px; }
.frise .s { flex: 1; border-radius: 2px; }
.hours { display: grid; grid-template-columns: repeat(8, 1fr); font-size: .75rem; color: var(--muted); margin-top: .2rem; }
.hours span { border-left: 1px solid var(--line); padding-left: 3px; }
.s.act { background: var(--act); } .s.idle { background: var(--idle); } .s.pause { background: var(--pause); } .s.off { background: var(--off); }
.s.sus { background-image: repeating-linear-gradient(45deg, var(--sus) 0 3px, transparent 3px 6px); background-color: var(--act); outline: 1px solid var(--sus); }
.legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; list-style: none; padding: 0; margin: .75rem 0 0; font-size: .85rem; }
.legend .s { display: inline-block; width: 14px; height: 14px; margin-right: .35rem; vertical-align: -2px; border-radius: 3px; }
code { background: var(--off); padding: 0 .3rem; border-radius: 4px; }
@media (max-width: 600px) { main { padding: .5rem .5rem 3rem; } .frise { height: 32px; } .big { font-size: 1.3rem; } }