/* Layout : barre de mois collante, résumé en tuiles, calendrier 7 colonnes, puis bulletin estimé et réglages en dessous. */
:root{
  --bg:#eceff3; --surface:#ffffff; --sunk:#f5f7f9; --ink:#15202b; --muted:#5a6878; --line:#d3dae2;
  --accent:#e09c12; --accent-ink:#1b1405; --night:#4a4fc4; --night-soft:#e6e7fb;
  --good:#1d8148; --bad:#bf3d27; --bad-soft:#fbe9e5; --rest-soft:#e9eef3;
  --pay-bg:#15202b; --pay-fg:#eef1f4; --pay-num:#f0b03a; --recup-soft:#ecebfb;
  --f-display:"Archivo","Arial Narrow",system-ui,sans-serif;
  --f-body:"Public Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --r:10px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0e141b; --surface:#161f29; --sunk:#111922; --ink:#e6ebf1; --muted:#93a1b1; --line:#283441;
  --accent:#f0b03a; --accent-ink:#1b1405; --night:#9a9eff; --night-soft:#23264a;
  --good:#4cc17d; --bad:#f07a62; --bad-soft:#3a1f1a; --rest-soft:#1b2530; --pay-bg:#24303d; --pay-fg:#e6ebf1; --pay-num:#f0b03a; --recup-soft:#211f3d; color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#0e141b; --surface:#161f29; --sunk:#111922; --ink:#e6ebf1; --muted:#93a1b1; --line:#283441;
  --accent:#f0b03a; --accent-ink:#1b1405; --night:#9a9eff; --night-soft:#23264a;
  --good:#4cc17d; --bad:#f07a62; --bad-soft:#3a1f1a; --rest-soft:#1b2530; --pay-bg:#24303d; --pay-fg:#e6ebf1; --pay-num:#f0b03a; --recup-soft:#211f3d; color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
img{max-width:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.45;margin:0}
.wrap{max-width:960px;margin:0 auto;padding-inline:16px;padding-block:0 48px;display:flex;flex-direction:column;gap:20px}
h1,h2,h3{font-family:var(--f-display);font-stretch:80%;margin:0;text-wrap:balance;letter-spacing:.01em}
h2{font-size:1.15rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Barre du haut */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bg);border-bottom:1px solid var(--line);margin-inline:-16px;padding:10px 16px}
.top-in{max-width:928px;margin:0 auto;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.brand{font-family:var(--f-display);font-stretch:75%;font-weight:800;font-size:1rem;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.brand i{width:14px;height:14px;background:repeating-linear-gradient(-45deg,var(--accent) 0 4px,var(--ink) 4px 8px);border-radius:2px;display:inline-block}
.monthnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.monthnav h1{font-size:1.35rem;font-weight:800;min-width:9.5em;text-align:center;text-transform:capitalize}
.iconbtn{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:36px;height:36px;display:grid;place-items:center;font-size:1.1rem}
.iconbtn:hover{border-color:var(--muted)}
.sync{font-size:.75rem;color:var(--muted);display:flex;align-items:center;gap:6px;width:100%;justify-content:flex-end}
.sync b{width:8px;height:8px;border-radius:50%;background:var(--muted);display:inline-block}
.sync.ok b{background:var(--good)} .sync.err b{background:var(--bad)}

/* Bannière */
.banner{background:var(--surface);border:1px dashed var(--accent);border-radius:var(--r);padding:12px 14px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:.9rem}
.banner p{margin:0;flex:1 1 260px;min-width:0}

/* Tuiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.tile.pay{grid-column:span 2}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile .lbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.tile .big{font-family:var(--f-display);font-stretch:85%;font-weight:800;font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.tile .sub{font-size:.8rem;color:var(--muted)}
.tile.pay{background:var(--pay-bg);color:var(--pay-fg);border-color:var(--pay-bg)}
.tile.pay .lbl,.tile.pay .sub{color:inherit;opacity:.75}
.tile.pay .big{font-size:2.1rem;color:var(--pay-num)}
.tile.nightc .big{color:var(--night)}
@media (max-width:760px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile.pay{grid-column:1/-1}}

/* Calendrier */
.cal-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cal-head h2{margin-right:auto}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:7px 12px;font-size:.85rem;font-weight:600}
.btn:hover{border-color:var(--muted)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.danger{color:var(--bad)}
.btn.danger.armed{background:var(--bad);border-color:var(--bad);color:#fff}
.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.dow{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:center;font-weight:600;padding-bottom:2px}
.day{background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:78px;padding:5px 6px;text-align:left;display:flex;flex-direction:column;gap:2px;min-width:0;position:relative}
.day:hover{border-color:var(--muted)}
.day .d{font-family:var(--f-display);font-weight:700;font-size:.95rem;display:flex;justify-content:space-between;align-items:baseline;gap:4px}
.day .d small{font-family:var(--f-mono);font-weight:500;font-size:.68rem;color:var(--muted)}
.day .t{font-family:var(--f-mono);font-size:.72rem;line-height:1.25;overflow-wrap:anywhere}
.day .nt{font-size:.66rem;color:var(--night);font-weight:600}
.day.work{border-left:4px solid var(--accent)}
.day.work.has-night{background:linear-gradient(180deg,var(--surface) 55%,var(--night-soft))}
.day.repos,.day.ferie{background:var(--rest-soft)}
.day.maladie,.day.absence{background:var(--bad-soft)}
.day.blank{visibility:hidden}
.day.today{outline:2px solid var(--ink);outline-offset:-1px}
.chip{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;font-weight:700;color:var(--muted)}
.day.cp .chip{color:var(--good)} .day.maladie .chip,.day.absence .chip{color:var(--bad)} .day.ferie .chip{color:var(--accent)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid var(--line)}
@media (max-width:520px){.day{min-height:64px;padding:4px}.day .t{font-size:.62rem}.day .nt{font-size:.58rem}.chip{font-size:.56rem;letter-spacing:.02em}.day .d small{display:none}}

/* Deux colonnes */
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:760px){.cols{grid-template-columns:minmax(0,1fr)}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.note{font-size:.78rem;color:var(--muted);margin:0}

/* Bulletin estimé */
.slip{overflow-x:auto}
.slip table{width:100%;border-collapse:collapse;font-size:.85rem;min-width:380px}
.slip th{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600;text-align:right;padding:4px 6px;border-bottom:1px solid var(--line)}
.slip th:first-child,.slip td:first-child{text-align:left}
.slip td{padding:5px 6px;text-align:right;border-bottom:1px dotted var(--line);font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:.8rem}
.slip td:first-child{font-family:var(--f-body);font-size:.85rem}
.slip tr.neg td:last-child{color:var(--bad)}
.slip tr.total td{font-weight:600;border-bottom:1px solid var(--ink);padding-top:8px}
.slip tr.total td:first-child{font-family:var(--f-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.05em}
.slip tr.net td{font-size:1rem;border-bottom:none}
.slip tr.net td:last-child{color:var(--accent);font-family:var(--f-display);font-weight:800;font-size:1.3rem}
.slip tr.info td{color:var(--muted)}

/* Semaines + compteurs */
.weeks{width:100%;border-collapse:collapse;font-size:.82rem}
.weeks td,.weeks th{padding:5px 4px;border-bottom:1px dotted var(--line);text-align:right}
.weeks th{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.weeks td:first-child,.weeks th:first-child{text-align:left}
.weeks td{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.weeks tr.other td{color:var(--muted)}
.bar{height:6px;background:var(--sunk);border-radius:3px;overflow:hidden;display:flex}
.bar i{display:block;height:100%}
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
.counter{background:var(--sunk);border-radius:8px;padding:10px}
.counter .big{font-family:var(--f-display);font-stretch:85%;font-weight:800;font-size:1.4rem}
.counter .lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600}
.counter .sub{font-size:.75rem;color:var(--muted)}
.nextrest{display:flex;flex-wrap:wrap;gap:6px}
.nextrest span{background:var(--rest-soft);border-radius:6px;padding:3px 8px;font-size:.8rem}

/* Réglages */
details.settings{background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
details.settings>summary{padding:14px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
details.settings>summary::-webkit-details-marker{display:none}
details.settings>summary::after{content:"+";font-family:var(--f-mono);font-size:1.2rem;color:var(--muted)}
details.settings[open]>summary::after{content:"–"}
.set-body{padding:0 14px 16px;display:flex;flex-direction:column;gap:18px}
.set-group h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin-bottom:8px}
.fields{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px}
.field{display:flex;flex-direction:column;gap:3px;min-width:0}
.field label{font-size:.78rem;color:var(--muted)}
.field .in{display:flex;align-items:center;border:1px solid var(--line);border-radius:7px;background:var(--sunk);overflow:hidden}
.field input{border:0;background:transparent;padding:7px 8px;width:100%;min-width:0;font-family:var(--f-mono);font-size:.85rem}
.field .u{padding:0 8px;font-size:.75rem;color:var(--muted);white-space:nowrap}
.tpl{width:100%;border-collapse:collapse;font-size:.85rem}
.tpl td{padding:4px;border-bottom:1px dotted var(--line)}
.tpl input[type=time],.tpl input[type=number]{border:1px solid var(--line);border-radius:6px;background:var(--sunk);padding:4px 6px;font-family:var(--f-mono);font-size:.8rem;width:100%;min-width:0}
.tpl-wrap{overflow-x:auto}

/* Éditeur de jour */
.scrim{position:fixed;inset:0;background:rgba(10,15,20,.45);z-index:20;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--surface);color:var(--ink);width:100%;max-width:460px;border-radius:14px 14px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;max-height:92vh;overflow:auto}
@media (min-width:600px){.scrim{align-items:center}.sheet{border-radius:14px}}
.sheet h3{font-size:1.3rem}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{border:1px solid var(--line);background:var(--sunk);border-radius:20px;padding:6px 12px;font-size:.85rem;font-weight:600}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.times{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.times input{border:1px solid var(--line);border-radius:7px;background:var(--sunk);padding:8px;font-family:var(--f-mono);width:100%;min-width:0}
.preview{background:var(--sunk);border-radius:8px;padding:10px;font-size:.88rem}
.sheet-actions{display:flex;gap:8px;flex-wrap:wrap}
.sheet-actions .btn{flex:1}
@media (prefers-reduced-motion:no-preference){.sheet{animation:up .18s ease-out}@keyframes up{from{transform:translateY(16px);opacity:.6}}}

/* Pointeuse */
.punch{display:flex;flex-direction:column;gap:10px}
.punch:empty{display:none}
.pcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:12px}
.pcard.ask{border:2px solid var(--accent)}
.pcard.live{background:var(--pay-bg);color:var(--pay-fg);border-color:var(--pay-bg)}
.pcard.live .note,.pcard.live .eyebrow{color:inherit;opacity:.8}
.pcard.live input[type=time]{background:transparent;color:inherit;border-color:currentColor}
.ph{display:flex;flex-direction:column;gap:2px}
.ph h3{font-size:1.4rem;font-weight:800}
.ph h3::first-letter,.sheet h3::first-letter{text-transform:uppercase}
.ph p{margin:0}
.eyebrow{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--muted);display:flex;align-items:center;gap:6px}
.pcard.ask .eyebrow{color:var(--accent)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block}
@media (prefers-reduced-motion:no-preference){.dot{animation:blink 1.6s ease-in-out infinite}@keyframes blink{50%{opacity:.25}}}
.timer{font-family:var(--f-display);font-stretch:85%;font-weight:800;font-size:2.6rem;line-height:1.1;color:var(--pay-num)}
.prow{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.prow label{font-size:.85rem;font-weight:600}
.prow input[type=time]{border:1px solid var(--line);border-radius:7px;background:var(--sunk);padding:7px 8px;font-family:var(--f-mono);font-size:1rem}
.chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
.chips:empty{display:none}
.dchip{border:1px solid var(--line);background:var(--sunk);border-radius:10px;padding:10px 6px;display:flex;flex-direction:column;align-items:center;gap:2px}
.dchip b{font-family:var(--f-display);font-stretch:85%;font-size:1.15rem;font-weight:800}
.dchip small{font-family:var(--f-mono);font-size:.72rem;color:var(--muted)}
.dchip:hover{border-color:var(--accent);background:var(--surface)}
.pcard.live .dchip{background:transparent;border-color:currentColor;color:inherit}
.pcard.live .dchip small{color:inherit;opacity:.8}
.pact{display:flex;gap:8px;flex-wrap:wrap}
.btn.big{padding:12px 20px;font-size:1rem}
.pcard.live .btn:not(.primary){background:transparent;color:inherit;border-color:currentColor}
.pcard.live .btn.danger.armed{background:var(--bad);border-color:var(--bad);color:#fff}
.day.prevu{border-left-style:dashed;border-style:dashed;border-color:var(--accent);opacity:.85}
.day.prevu .chip{color:var(--accent)}

/* Blocs ajoutés avec le serveur */
.stack{display:flex;flex-direction:column;gap:12px;min-width:0}
.cols>.stack{gap:20px}
.panel-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.panel-head h2,.panel-head h3{margin-right:auto}
.pill{font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;padding:3px 8px;border-radius:20px;background:var(--sunk);color:var(--muted)}
.pill.good{background:var(--good);color:#fff}
.sync.off b{background:var(--accent)}
.tile.cd .big{color:var(--accent)}
.legend i.lg-work{background:var(--surface);border-left:3px solid var(--accent)}
.legend i.lg-prevu{background:var(--surface);border:1px dashed var(--accent)}
.legend i.lg-night{background:var(--night-soft)}
.legend i.lg-rest{background:var(--rest-soft)}
.legend i.lg-recup{background:var(--recup-soft)}
.legend i.lg-bad{background:var(--bad-soft)}
.day.recup,.day.rc{background:var(--recup-soft)}
.day.recup .chip,.day.rc .chip{color:var(--night)}
.day.vide{background:transparent;border-style:dotted}
.slip tr.real td:last-child{color:var(--good);font-family:var(--f-display);font-weight:800;font-size:1.15rem}
.slip tr.warn td{color:var(--bad)}
.slip tr.info td{color:var(--muted)}
.weeks td.plus{color:var(--accent);font-weight:600}
.weeks td.minus{color:var(--night)}
.weeks tr.proj td{font-style:italic}
.weeks th.barcol{width:26%}
.field.check label{display:flex;gap:8px;align-items:center;font-size:.85rem;color:var(--ink)}
.tpl-day{display:flex;gap:6px;align-items:center;white-space:nowrap}
.plain-input{border:1px solid var(--line);border-radius:7px;background:var(--sunk);padding:8px;font-family:var(--f-mono)}
.nightc-t{color:var(--night)}
.set-group .note{margin-bottom:8px}

/* Fiches de paie */
.sliplist{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.slipitem{text-align:left;border:1px solid var(--line);background:var(--sunk);border-radius:var(--r);padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;min-width:0}
.slipitem:hover{border-color:var(--muted)}
.slipitem.open{border-color:var(--accent);background:var(--surface)}
.si-t{font-family:var(--f-display);font-stretch:85%;font-weight:700;font-size:1rem}
.si-t::first-letter{text-transform:uppercase}
.si-n{font-weight:500;color:var(--accent)}
.si-s{grid-column:1/-1;font-size:.75rem;color:var(--muted)}
.sd{border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:12px}
.sd h3{font-size:1.2rem}
.sd h3::first-letter{text-transform:uppercase}
.sd h4{margin:0;font-family:var(--f-display);font-stretch:85%;font-size:.95rem;text-transform:uppercase;letter-spacing:.06em}
.sd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.diffs{margin:0;padding-left:18px;font-size:.85rem;display:flex;flex-direction:column;gap:3px}
a.btn{text-decoration:none;color:inherit;display:inline-block}
.btn.danger.armed{background:var(--bad);border-color:var(--bad);color:#fff}

/* Connexion */
.login-page{min-height:100vh;display:grid;place-items:center;padding:24px 16px}
.login{width:100%;max-width:360px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:24px;display:flex;flex-direction:column;gap:16px}
.login h1{font-size:1.8rem;font-weight:800}
.login form{display:flex;flex-direction:column;gap:12px}
.login .field input{font-family:var(--f-body);font-size:16px;padding:10px}
.login .btn.big{width:100%}
.note.err{color:var(--bad);min-height:1em;margin:0}
.prolong{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:.85rem}
.tile .sub b{color:var(--ink)}
.tile.pay .sub b{color:var(--pay-num)}
.tile.cd.neg .big{color:var(--night)}
.day .cdd{font-family:var(--f-mono);font-size:.64rem;font-weight:600;margin-top:auto}
.day .cdd.plus,.cdprev .plus{color:var(--accent)}
.day .cdd.minus,.cdprev .minus{color:var(--night)}
.cdprev{margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}

/* Contrôle site vs fiches */
.ctl-title{font-size:1rem;font-family:var(--f-display);font-stretch:85%;text-transform:uppercase;letter-spacing:.06em;margin-top:6px}
details.ctl{border:1px solid var(--line);border-radius:var(--r);background:var(--sunk)}
details.ctl+details.ctl{margin-top:6px}
details.ctl>summary{list-style:none;cursor:pointer;padding:10px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px}
details.ctl>summary::-webkit-details-marker{display:none}
details.ctl>summary span:first-child::first-letter{text-transform:uppercase}
details.ctl>summary span:first-child{font-weight:600}
details.ctl>:not(summary){margin:0 12px 12px}
.pill.bad{background:var(--bad);color:#fff}
.pill.warn{background:var(--accent);color:var(--accent-ink)}
.pill.muted{background:var(--line);color:var(--muted)}
.slip td.ok{color:var(--good)}
.slip td.bad{color:var(--bad);font-weight:600}
.slip td.na{color:var(--muted);text-align:left;font-family:var(--f-body)}
.ok-t{color:var(--good)}
.bad-t{color:var(--bad);font-weight:600}

/* Alertes, annulation, historique */
.alerts{background:var(--bad-soft);border:1px solid var(--bad);border-radius:var(--r);padding:12px 14px}
.alerts h2{font-size:.95rem;color:var(--bad);margin-bottom:6px}
.alerts h2::first-letter{text-transform:uppercase}
.alerts ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:.88rem}
.linkbtn{background:none;border:0;padding:0;font-weight:700;text-decoration:underline;color:inherit;cursor:pointer}
.day.warn{box-shadow:inset 0 0 0 2px var(--bad)}
.warns{margin:8px 0 0;padding-left:18px;color:var(--bad);font-size:.85rem;display:flex;flex-direction:column;gap:3px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--pay-bg);color:var(--pay-fg);border-radius:12px;padding:10px 12px 10px 16px;display:flex;align-items:center;gap:12px;max-width:min(560px,calc(100vw - 32px));box-shadow:0 6px 24px rgba(0,0,0,.3);font-size:.88rem}
.toast .btn{background:transparent;color:var(--pay-num);border-color:var(--pay-num);white-space:nowrap}
.hist{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:420px;overflow:auto}
.hist li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center;padding:8px 10px;background:var(--sunk);border-radius:8px;font-size:.85rem}
.hist .when{grid-column:1;font-size:.72rem;color:var(--muted)}
.hist li>span:nth-child(2){grid-column:1}
.hist li .btn{grid-column:2;grid-row:1/span 2}
.btn.small{padding:4px 8px;font-size:.75rem}

/* Onglets : barre en haut sur ordinateur, en bas sur téléphone */
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:4px;position:sticky;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:4}
.tabs button{flex:1;border:0;background:transparent;border-radius:8px;padding:8px 6px;font-weight:600;font-size:.85rem;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:6px}
.tabs button .ti{font-size:1rem;line-height:1}
.tabs button[aria-current]{background:var(--ink);color:var(--bg)}
.tabs button:not([aria-current]):hover{color:var(--ink)}
@media (max-width:760px){
  .tabs{position:fixed;left:0;right:0;bottom:0;top:auto;border-radius:0;border-width:1px 0 0;padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px));z-index:15}
  .tabs button{flex-direction:column;gap:2px;font-size:.66rem;padding:6px 2px}
  .tabs button .ti{font-size:1.15rem}
  .wrap{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  .toast{bottom:calc(76px + env(safe-area-inset-bottom,0px))}
}
.settings.panel .set-body{padding:0}
.tiles-hint{margin-top:-10px}

/* Tuiles et compteurs cliquables */
button.tile,button.counter{font:inherit;color:inherit;text-align:left;cursor:pointer}
button.tile:hover,button.counter:hover{border-color:var(--accent)}
button.counter{border:1px solid transparent}
button.tile.pay{color:var(--pay-fg)}

/* Liste / calendrier */
.viewtoggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.viewtoggle button{border:0;background:var(--surface);padding:6px 12px;font-size:.82rem;font-weight:600;color:var(--muted)}
.viewtoggle button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.daylist{display:flex;flex-direction:column;gap:4px}
.dl-week{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin-top:10px}
.dl-row{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:10px;text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:10px;padding:8px 10px;min-width:0}
.dl-row.work{border-left:4px solid var(--accent)}
.dl-row.prevu{border-style:dashed;border-color:var(--accent)}
.dl-row.repos,.dl-row.ferie{background:var(--rest-soft)}
.dl-row.recup,.dl-row.rc{background:var(--recup-soft)}
.dl-row.maladie,.dl-row.absence{background:var(--bad-soft)}
.dl-row.vide{background:transparent;border-style:dotted;color:var(--muted)}
.dl-row.today{outline:2px solid var(--ink);outline-offset:-1px}
.dl-row.warn{box-shadow:inset 0 0 0 2px var(--bad)}
.dl-d{display:flex;flex-direction:column;align-items:center;line-height:1.1}
.dl-d b{font-family:var(--f-display);font-size:1.2rem}
.dl-d small{font-size:.68rem;color:var(--muted);text-transform:uppercase}
.dl-m{font-family:var(--f-mono);font-size:.85rem;min-width:0;overflow-wrap:anywhere}
.dl-row:not(.work) .dl-m{font-family:var(--f-body);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.dl-s{display:flex;flex-direction:column;align-items:flex-end;font-size:.85rem;font-variant-numeric:tabular-nums}
.dl-s small{font-size:.72rem}
.dl-s .cdd.plus{color:var(--accent);font-weight:600}
.dl-s .cdd.minus{color:var(--night);font-weight:600}
#exBody .slip table{min-width:0}
#exBody td:last-child{text-align:right;white-space:nowrap}