:root{
  --bg:#EAF0F2; --card:#fff; --ink:#12262C; --muted:#5B7078; --line:#D2DCE0;
  --teal:#0E5A60; --teal-2:#0B464B; --mint:#D6EBEA; --amber:#B86A00; --amber-bg:#FFF1D9; --red:#B3382C; --red-bg:#FBE6E3; --green:#17724A;
  --r:14px; --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
.num{font-variant-numeric:tabular-nums}
.wrap{max-width:560px;margin:0 auto;padding:16px 16px calc(92px + var(--safe-b))}
.auth{max-width:440px;margin:0 auto;padding:28px 16px 40px}
h1{font-size:1.6rem;margin:0 0 4px;letter-spacing:-.01em}
h2{font-size:1.05rem;margin:22px 0 8px}
.sub{color:var(--muted);margin:0 0 18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;margin:12px 0}
label{display:block;font-weight:600;margin:14px 0 6px}
input[type=text],input[type=password],input[type=number],input[type=time],select{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #7CC4C8;outline-offset:1px}
.row{display:flex;gap:10px}.row>*{flex:1;min-width:0}
.hint{font-size:.88rem;color:var(--muted);margin:4px 0 0}
.btn{min-height:50px;border:0;border-radius:12px;background:var(--teal);color:#fff;font-weight:700;padding:0 18px;width:100%;cursor:pointer}
.btn:active{background:var(--teal-2)}
.btn.ghost{background:#fff;color:var(--teal);border:1.5px solid var(--teal)}
.btn.danger{background:var(--red)}
.btn.small{min-height:40px;width:auto;font-size:.92rem}
.link{background:none;border:0;color:var(--teal);text-decoration:underline;padding:8px 0;cursor:pointer}
.check{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin-top:16px}
.check input{width:22px;height:22px;margin-top:2px;flex:none}
.err{background:var(--red-bg);color:var(--red);border-radius:10px;padding:10px 12px;margin-top:12px}
.banner{position:fixed;left:12px;right:12px;bottom:calc(12px + var(--safe-b));max-width:536px;margin:0 auto;background:var(--ink);color:#fff;border-radius:var(--r);padding:14px;z-index:30;font-size:.92rem}
.banner a{color:#BFE6E8}.banner button{margin-top:10px}
/* badge */
.now{text-align:center;padding:6px 0 2px}
.now .date{color:var(--muted);text-transform:capitalize}
.now .time{font-size:3.4rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.punch{display:block;margin:12px auto 4px;width:176px;height:176px;border-radius:50%;border:0;color:#fff;font-weight:800;font-size:1.25rem;cursor:pointer;background:var(--teal);box-shadow:0 0 0 8px var(--mint)}
.punch.out{background:#2B3C42;box-shadow:0 0 0 8px #DCE3E6}
.punch:active{transform:scale(.97)}
.punch small{display:block;font-weight:500;font-size:.85rem;opacity:.85;margin-top:2px}
.stat{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-top:1px solid var(--line)}
.stat:first-child{border-top:0}
.stat b{font-size:1.1rem}
.pill{display:inline-block;border-radius:99px;padding:3px 10px;font-weight:700;font-size:.9rem}
.pill.ot{background:var(--amber-bg);color:var(--amber)}
.pill.pos{background:var(--mint);color:var(--green)}
.pill.neg{background:var(--red-bg);color:var(--red)}
.big{font-size:2rem;font-weight:800;letter-spacing:-.02em}
.pos{color:var(--green)}.neg{color:var(--red)}
.punches{list-style:none;margin:0;padding:0}
.punches li{display:flex;justify-content:space-between;padding:8px 0;border-top:1px solid var(--line)}
.punches li:first-child{border-top:0}
.punches .pause{color:var(--muted);font-size:.92rem;border-top:0;padding:0 0 6px 18px}
.dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:8px;background:var(--teal)}.dot.o{background:#2B3C42}
.hist{width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:11px 0;cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.hist:first-of-type{border-top:0}
.hist span:first-child{min-width:0}
.hist small{display:block;color:var(--muted)}
/* calendrier */
.bal{display:flex;gap:10px}.bal .card{flex:1;margin:0;text-align:center}
.bal .big{display:block}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin:16px 0 8px}
.cal-head button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:#fff;font-size:1.3rem;cursor:pointer}
.cal-head strong{text-transform:capitalize;font-size:1.1rem}
.grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.dow{text-align:center;color:var(--muted);font-size:.8rem;padding:2px 0}
.day{position:relative;aspect-ratio:1/1.05;border:1px solid var(--line);border-radius:10px;background:#fff;overflow:hidden;padding:0;cursor:pointer;display:flex;flex-direction:column}
.day .n{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-weight:700;z-index:2;text-shadow:0 0 3px #fff}
.day .h{flex:1}
.day .h.CA{background:#BFE0DE}.day .h.RTT{background:#F6D9A8}
.day.we{background:transparent;border-style:dashed;color:var(--muted);cursor:default}
.day.today{outline:2px solid var(--teal)}
.day.work::after{content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--teal);z-index:3}
.legend{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:.88rem;margin-top:10px}
.legend i{display:inline-block;width:14px;height:14px;border-radius:4px;vertical-align:-2px;margin-right:6px}
/* feuille */
#sheet-bg{position:fixed;inset:0;background:rgba(10,25,30,.5);z-index:40}
#sheet{position:fixed;left:0;right:0;bottom:0;z-index:50;background:#fff;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + var(--safe-b));max-width:560px;margin:0 auto;max-height:88vh;overflow:auto}
.seg{display:flex;border:1.5px solid var(--line);border-radius:12px;overflow:hidden}
.seg button{flex:1;min-height:48px;border:0;background:#fff;cursor:pointer;font-weight:600}
.seg button+button{border-left:1.5px solid var(--line)}
.seg button.on{background:var(--teal);color:#fff}
.seg button.on.rtt{background:var(--amber)}
.trow{display:flex;gap:8px;margin-top:8px}.trow input{flex:1}.trow button{width:48px;border:1px solid var(--line);background:#fff;border-radius:10px;cursor:pointer}
/* nav */
nav{position:fixed;left:0;right:0;bottom:0;background:#fff;border-top:1px solid var(--line);display:flex;padding-bottom:var(--safe-b);z-index:20}
nav button{flex:1;min-height:62px;border:0;background:none;color:var(--muted);font-weight:600;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.82rem}
nav button.on{color:var(--teal)}
nav svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#toast{position:fixed;left:50%;top:14px;transform:translate(-50%,-90px);background:var(--ink);color:#fff;padding:10px 16px;border-radius:99px;z-index:60;transition:transform .2s;max-width:90vw}
#toast.show{transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

.srow{display:flex;align-items:center;gap:10px;margin-top:8px}.srow span{width:84px;flex:none;font-weight:600}.srow select{min-width:0}
.day .h.off{background:repeating-linear-gradient(45deg,#E1E8EB,#E1E8EB 4px,#EEF3F4 4px,#EEF3F4 8px)}