/* Time management, la feuille commune : identite, bandeau, boutons, feuilles,
   menu, retour au toucher. Chaque page ajoute ses regles propres. */
@font-face{font-family:"De Valencia";src:url("fonts/de_valencia_beta.woff2") format("woff2");font-display:swap}
@font-face{font-family:"Geometria";src:url("fonts/geometria.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geometria";src:url("fonts/geometria-medium.woff2") format("woff2");font-weight:600;font-display:swap}
:root{
  --ink-1:#060e0e;--ink-2:#121a1a;--ink-3:#1c2626;--line:#2a3434;
  --bone:#fff;--body:#e0e0e0;--muted:#9aa3a3;--amber:#d4a017;--amber-ink:#1a1200;
  --ok:#3fb27f;--busy:#d9534f;--away:#4a5656;--orange:#f0883e;
  --font-display:"De Valencia",serif;--font-body:"Geometria",system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
/* l'attribut hidden gagne toujours, meme sur un bloc en flex ou en grid */
[hidden]{display:none!important}
body{margin:0;background:var(--ink-1);color:var(--body);font-family:var(--font-body);font-size:17px;line-height:1.35;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
a{color:var(--amber)}

/* Bandeau */
.top{display:flex;align-items:center;gap:.55rem;padding:.9rem 1rem .6rem;border-bottom:1px solid var(--line)}
.top .logo{font-family:var(--font-display);font-size:22px;color:var(--bone);line-height:1;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .who{font-size:.78rem;color:var(--muted);text-align:right;line-height:1.25;padding:.3rem .45rem;margin:-.3rem 0;border-radius:10px;border:1px solid transparent}
.top .who b{display:block;color:var(--body);font-weight:600}
.top .who:active,.top .who.pressed{border-color:var(--amber);filter:brightness(1.3)}
@media(max-width:420px){.top .who span{display:none}.top .who b{font-size:.85rem}}
.top .burger{width:44px;height:44px;border-radius:12px;border:1px solid var(--amber);display:grid;place-items:center;color:var(--amber);flex:none}
.top .burger svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.top .burger:active,.top .burger.pressed{background:var(--amber);color:var(--amber-ink)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;flex:none}
.lang button{padding:.35rem .7rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;color:var(--muted)}
.lang button.on{background:var(--amber);color:var(--amber-ink)}

/* Boutons */
.btn{min-height:64px;padding:.75rem 1rem;border-radius:14px;background:var(--ink-3);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;gap:.5rem;font-weight:600;font-size:1.15rem;color:var(--bone);transition:transform .08s}
.btn.big{min-height:84px;font-size:1.35rem}
.btn.primary{background:var(--amber);color:var(--amber-ink);border-color:var(--amber)}
.btn.green{background:var(--ok);color:#03150c;border-color:var(--ok)}
.btn.red{background:var(--busy);color:#fff;border-color:var(--busy)}
.btn.ghost{background:transparent;color:var(--muted);font-weight:400;min-height:52px}
.btn.small{min-height:44px;font-size:.95rem;padding:.3rem .8rem}
.btn.danger{background:transparent;color:var(--busy);border-color:color-mix(in srgb,var(--busy) 50%,transparent)}
.btn[disabled]{opacity:.35;pointer-events:none}
.foot{display:flex;gap:.6rem}
.foot .btn{flex:1}
.spacer{flex:1}

/* Retour au toucher : tout ce qui se touche s'enfonce, s'eclaire et prend un halo ambre */
.btn:active,.btn.pressed,.lang button:active,.lang button.pressed{transform:scale(.96);filter:brightness(1.3);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 70%,transparent);transition:none}

/* Feuille qui monte du bas */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:flex-end;justify-content:center;z-index:5}
.sheet.on{display:flex}
.panel{background:var(--ink-2);border:1px solid var(--line);border-radius:22px 22px 0 0;width:min(100%,560px);
  padding:1.1rem 1.1rem calc(1.1rem + env(safe-area-inset-bottom));max-height:88vh;overflow:auto;display:flex;flex-direction:column;gap:.8rem}
.panel h2{margin:0;font-family:var(--font-display);font-weight:400;font-size:32px;line-height:1;color:var(--bone)}
.panel .foot .btn{flex:1}
.errbox{display:flex;flex-direction:column;gap:.5rem;padding:.8rem 1rem;border-radius:12px;background:color-mix(in srgb,var(--busy) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--busy) 50%,transparent);color:var(--body);font-size:.95rem}
.errline{color:var(--busy);font-size:.85rem;min-height:1.2em}
.okline{color:var(--ok);font-size:.85rem;min-height:1.2em}
.hint{margin:0;font-size:.85rem;color:var(--muted)}
input[type=time],input[type=text],input[type=number],input[type=password],select{font:inherit;color:var(--bone);background:var(--ink-3);border:1px solid var(--line);border-radius:10px;padding:.4rem .6rem;min-height:48px;outline:none}
input:focus,select:focus{border-color:var(--amber)}
input.bad{border-color:var(--busy)}

/* Menu de navigation */
.menu{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;justify-content:flex-end;z-index:9}
.menu.on{display:flex}
.menu .pane{width:min(82%,320px);background:var(--ink-2);border-left:1px solid var(--line);padding:1.2rem 1rem calc(1rem + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:.5rem}
.menu .me{padding:.2rem .2rem 1rem;border-bottom:1px solid var(--line);margin-bottom:.4rem}
.menu .me small{display:block;font-size:.75rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.menu .me b{display:block;font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1.1;color:var(--bone);margin-top:.2rem}
.menu .me span{font-size:.85rem;color:var(--amber)}
.menu a,.menu button.item{display:flex;align-items:center;justify-content:space-between;min-height:54px;padding:.6rem .8rem;border-radius:12px;
  background:var(--ink-3);border:1px solid var(--line);color:var(--bone);font-weight:600;text-decoration:none;text-align:left}
.menu a.here{border-color:var(--amber);color:var(--amber)}
.menu .spacer{flex:1}
.menu button.item.out{color:var(--busy);background:transparent}
.menu a:active,.menu a.pressed,.menu button.item:active,.menu button.item.pressed{filter:brightness(1.3);box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 70%,transparent)}

/* Segment Day / Month et compteurs */
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin:1rem 1rem 0;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{padding:.55rem .2rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.78rem;color:var(--muted)}
.seg button.on{background:var(--ink-3);color:var(--bone)}
.seg button:active,.seg button.pressed{filter:brightness(1.3)}
.view{display:none}
.view.on{display:block}
.counts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;padding:.7rem 1rem 1rem}
.count{background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:.6rem .4rem;text-align:center}
.count b{display:block;font-size:1.9rem;line-height:1.1;font-weight:600;color:var(--bone);font-variant-numeric:tabular-nums}
.count span{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.count.ok b{color:var(--ok)} .count.busy b{color:var(--busy)}

/* Ecran bloquant : serveur injoignable ou session perdue */
.offline{position:fixed;inset:0;background:rgba(6,14,14,.92);display:none;align-items:center;justify-content:center;z-index:20;padding:1.5rem;text-align:center}
.offline.on{display:flex}
.offline .box{max-width:22rem;display:flex;flex-direction:column;gap:.8rem;align-items:center}
.offline .ico{width:64px;height:64px;border-radius:50%;background:var(--busy);color:#fff;display:grid;place-items:center;font-size:2rem;font-weight:600}