/* Optimus PN — charte inspirée des Human Interface Guidelines d'Apple (iOS) */
[hidden]{display:none!important}
:root{
  color-scheme:light;
  --bg:#f2f2f7; --bg2:#ffffff; --fill:#e5e5ea; --fill2:rgba(118,118,128,.12);
  --label:#000; --label2:rgba(60,60,67,.6); --label3:rgba(60,60,67,.3); --sep:rgba(60,60,67,.18);
  --blue:#007aff; --green:#34c759; --mint:#00c7be; --teal:#30b0c7; --red:#ff3b30; --orange:#ff9500; --purple:#af52de; --indigo:#5856d6; --gray:#8e8e93;
  --flt:var(--blue); --flt-bg:rgba(0,122,255,.1);
  --off:#248a3d; --off-bg:rgba(52,199,89,.16);
  --conge:#fff; --conge-bg:#30b0c7;
  --repr:var(--red); --repr-bg:rgba(255,59,48,.1);
  --sol:var(--indigo); --sol-bg:rgba(88,86,214,.1);
  --blanc:var(--fill2);
  --bar:rgba(249,249,249,.82);
  --r:12px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,"Roboto Mono",monospace;
}
[data-theme=dark]{
  color-scheme:dark;
  --bg:#000; --bg2:#1c1c1e; --fill:#2c2c2e; --fill2:rgba(118,118,128,.24);
  --label:#fff; --label2:rgba(235,235,245,.6); --label3:rgba(235,235,245,.3); --sep:rgba(84,84,88,.6);
  --blue:#0a84ff; --green:#30d158; --red:#ff453a; --indigo:#5e5ce6; --teal:#40c8e0; --orange:#ff9f0a;
  --flt-bg:rgba(10,132,255,.18); --off:#30d158; --off-bg:rgba(48,209,88,.16); --conge-bg:#2a8a9e;
  --repr-bg:rgba(255,69,58,.16); --sol-bg:rgba(94,92,230,.2); --bar:rgba(22,22,24,.8);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{background:var(--bg);color:var(--label);font-family:var(--font);font-size:17px;line-height:1.3;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
.muted{color:var(--label2)} .small{font-size:13px} .mono,.num{font-variant-numeric:tabular-nums}
.warn{color:var(--red);font-size:13px}

/* Barre de navigation translucide */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 20px;padding-top:max(10px,env(safe-area-inset-top));background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:.5px solid var(--sep)}
.logo{width:28px;height:28px;color:var(--label);flex:none}
#curMonth{margin:0;font-size:28px;letter-spacing:.01em;font-weight:700;white-space:nowrap}
#curMonth::first-letter{text-transform:uppercase}
#curMonth span{color:var(--blue)}
.top-right{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{border:0;background:var(--fill2);border-radius:50%;width:34px;height:34px;display:grid;place-items:center;cursor:pointer;font-size:20px;line-height:1;flex:none;color:var(--blue)}
.icon-btn:hover{filter:brightness(.95)}
.pills{display:flex;gap:6px;border:0;padding:0;background:none;cursor:pointer}
.pill{padding:6px 12px;font-size:14px;font-weight:600;border-radius:99px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pill.hs{background:var(--green);color:#fff}
.pill.hdv{background:var(--fill2);color:var(--label)}
.pill.eur{background:var(--blue);color:#fff}
.seg{display:flex;background:var(--fill2);border-radius:9px;padding:2px;gap:0}
.seg button{border:0;background:none;padding:5px 12px;border-radius:7px;cursor:pointer;display:grid;place-items:center;color:var(--label);font-size:13px;font-weight:500}
.seg button.on{background:var(--bg2);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
[data-theme=dark] .seg button.on{background:#636366}
.seg.wide{width:100%} .seg.wide button{flex:1;font-size:14px;padding:7px}

main{max-width:1320px;margin:0 auto;padding:0 20px 110px}
#months,#listView{padding-bottom:70vh}

/* Import */
.empty{display:grid;place-items:center;min-height:78vh}
.drop{max-width:540px;text-align:center;padding:44px 32px;border-radius:22px;background:var(--bg2)}
.drop svg{color:var(--blue)}
.drop.over{outline:3px dashed var(--blue);outline-offset:-10px}
.drop h2{font-size:28px;margin:12px 0 8px;font-weight:700}
.drop p{color:var(--label2);margin:0 0 20px;font-size:15px}
.row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:12px 20px;border-radius:12px;border:0;background:var(--fill2);color:var(--blue);cursor:pointer;font-weight:600;font-size:15px}
.btn.primary{background:var(--blue);color:#fff}
.btn.small{padding:9px 14px;font-size:14px}

/* Calendrier (style Calendrier iOS, vue mois) */
.wk-head{position:sticky;top:55px;z-index:10;display:grid;grid-template-columns:30px repeat(7,1fr);gap:4px;padding:6px 0;background:var(--bg);font-size:11px;color:var(--label2);text-align:center;font-weight:600;text-transform:uppercase;letter-spacing:.02em}
.month-block h3{margin:24px 0 8px 34px;font-size:22px;font-weight:700;color:var(--label)}
.month-block h3::first-letter{text-transform:uppercase}
.week{display:grid;grid-template-columns:30px repeat(7,1fr);gap:4px;margin-bottom:4px}
.wn{font-size:11px;color:var(--label3);display:grid;place-items:center;font-variant-numeric:tabular-nums}
.day{position:relative;min-height:108px;border-radius:12px;background:var(--bg2);border:0;padding:24px 6px 6px;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:3px;overflow:hidden;transition:transform .15s ease}
.day:active{transform:scale(.97)}
.day:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.day.void{visibility:hidden}
.day.nocov{opacity:.35;cursor:default;background:transparent}
.day .n{position:absolute;top:4px;left:0;right:0;margin:0 auto;width:22px;height:22px;line-height:22px;text-align:center;font-weight:600;font-size:14px;border-radius:50%}
.day.today .n{background:var(--red);color:#fff}
.day.we .n{color:var(--label2)}
.day.fam-repos{background:var(--off-bg)}
.day.fam-conge{background:var(--conge-bg);color:#fff}
.day.fam-conge .n{color:#fff}
.day.fam-blanc{background:var(--blanc)}
.big{margin:auto;font-weight:600;font-size:12px;text-align:center;line-height:1.25}
.big small{display:block;font-weight:400;opacity:.75;font-size:11px}
.fam-repos .big{color:var(--off)}
.fam-blanc .big{color:var(--label2);font-weight:500}
.rbar{position:absolute;top:0;left:0;right:0;height:17px;background:var(--flt);color:#fff;font-size:10.5px;font-weight:700;display:grid;place-items:center;letter-spacing:.02em}
.day.inrot{padding-top:40px}
.day.inrot .n{top:19px}
.leg{display:grid;grid-template-columns:auto 1fr auto;gap:4px;font-size:11px;align-items:baseline;font-variant-numeric:tabular-nums}
.leg .t{color:var(--label2)}
.leg .r{font-weight:600;color:var(--flt);text-align:center;white-space:nowrap}
.leg.mep .r{color:var(--label2);font-style:italic}
.chip{display:block;font-size:10.5px;font-weight:600;padding:2px 6px;border-radius:6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip.repr{background:var(--repr-bg);color:var(--repr)} .chip.sol{background:var(--sol-bg);color:var(--sol)} .chip.autre,.chip.maladie{background:var(--fill2);color:var(--label2)}
.act-l{font-size:11px;display:flex;justify-content:space-between;gap:4px;color:var(--label2);font-variant-numeric:tabular-nums}

/* Vue liste (listes groupées iOS) */
.l-month{margin:26px 0 8px 4px;font-size:22px;font-weight:700}
.l-month::first-letter{text-transform:uppercase}
.l-row{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:center;padding:10px 14px;background:var(--bg2);border:0;border-radius:0;cursor:pointer;text-align:left;width:100%;position:relative}
.l-row::after{content:"";position:absolute;left:70px;right:0;bottom:0;height:.5px;background:var(--sep)}
.l-month + .l-row{border-radius:12px 12px 0 0}
.l-row:has(+ .l-month),.l-row:last-child{border-radius:0 0 12px 12px}
.l-row:has(+ .l-month)::after,.l-row:last-child::after{display:none}
.l-row .d{text-align:center;line-height:1.1}
.l-row .d b{display:block;font-size:22px;font-weight:600}
.l-row .d span{font-size:11px;color:var(--label2);text-transform:uppercase}
.chain{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.st{text-align:center;line-height:1.15}
.st b{display:block;font-size:14px;font-weight:600}
.st span{font-size:11px;color:var(--label2);font-variant-numeric:tabular-nums}
.fl{background:var(--flt-bg);border-radius:8px;padding:4px 8px;text-align:center;font-size:12px;line-height:1.3;font-variant-numeric:tabular-nums}
.fl b{color:var(--flt);font-weight:600}
.fl.mep{opacity:.7}
.band{padding:8px 12px;border-radius:8px;font-weight:600;font-size:14px}
.band.repos{background:var(--off-bg);color:var(--off)} .band.conge{background:var(--conge-bg);color:#fff}
.band.repr{background:var(--repr-bg);color:var(--repr)} .band.sol{background:var(--sol-bg);color:var(--sol)} .band.autre,.band.blanc,.band.maladie{background:var(--fill2);color:var(--label2)}

/* Barre d'onglets (iOS) */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:18;display:flex;justify-content:center;gap:0;background:var(--bar);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--sep);padding:6px 10px max(6px,env(safe-area-inset-bottom))}
.tabbar button{flex:0 1 120px;border:0;background:none;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:10.5px;font-weight:500;color:var(--gray);cursor:pointer;padding:2px 0}
.tabbar button.on{color:var(--blue)}
.tabbar button:disabled{opacity:.4;cursor:default}
.tabbar svg{width:25px;height:25px}
.fab{position:fixed;right:20px;bottom:76px;width:52px;height:52px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;cursor:pointer;box-shadow:0 6px 18px rgba(0,122,255,.35);z-index:19}

/* Feuilles (sheets) */
dialog{border:0;padding:0;background:var(--bg);color:var(--label)}
dialog::backdrop{background:rgba(0,0,0,.35)}
.modal{width:min(680px,94vw);max-height:90vh;border-radius:14px;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.modal:not([open]),.drawer:not([open]){display:none}
.modal[open]{animation:sheet .32s cubic-bezier(.2,.9,.3,1)}
@keyframes sheet{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}
.grabber{width:36px;height:5px;border-radius:3px;background:var(--label3);margin:6px auto 0;display:none}
.m-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px 8px}
.m-head h2{margin:0;font-size:22px;font-weight:700}
#mTitle::first-letter{text-transform:uppercase}
.m-nav{display:flex;gap:8px}
.tabs{display:flex;margin:4px 18px 6px;background:var(--fill2);border-radius:9px;padding:2px}
.tabs button{flex:1;border:0;background:none;padding:6px 10px;cursor:pointer;color:var(--label);font-weight:500;font-size:13px;border-radius:7px}
.tabs button.on{background:var(--bg2);box-shadow:0 3px 8px rgba(0,0,0,.12)}
[data-theme=dark] .tabs button.on{background:#636366}
.m-body{padding:8px 18px 24px;overflow:auto}
.card{background:var(--bg2);border-radius:12px;margin-bottom:14px;overflow:hidden}
.kv{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;font-size:16px;position:relative}
.kv + .kv::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.kv .v{font-variant-numeric:tabular-nums;color:var(--label2);white-space:nowrap}
.kv.tot{font-weight:600} .kv.tot .v{font-weight:600;color:var(--blue)}
.kv .f{display:block;font-size:12.5px;color:var(--label2);font-weight:400;margin-top:2px}
.kv input{width:90px;text-align:right;border:0;background:var(--fill2);border-radius:8px;padding:6px 8px;font-size:15px}
.sec{font-size:13px;text-transform:uppercase;color:var(--label2);font-weight:400;margin:18px 16px 6px;letter-spacing:0}
.route{text-align:center;font-weight:700;font-size:19px;margin:12px 0 10px}
table.legs{width:100%;border-collapse:collapse;font-size:15px;background:var(--bg2);border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums}
table.legs th{font-size:12px;font-weight:500;color:var(--label2);text-align:left;padding:9px 12px}
table.legs td{padding:10px 12px;border-top:.5px solid var(--sep)}
table.legs .r{text-align:right}
.ends{display:flex;justify-content:space-between;font-size:13px;color:var(--label2);margin:8px 4px 0;gap:10px;flex-wrap:wrap}
.ends b{color:var(--label);font-variant-numeric:tabular-nums;font-weight:600}
.note{font-size:13px;color:var(--label2);padding:4px 16px 0;margin:0 0 12px;line-height:1.4}
.note.w{color:var(--orange)}
.actbox{background:var(--bg2);border-radius:12px;padding:12px 16px;margin-bottom:10px;display:flex;flex-direction:column;gap:2px;border-left:4px solid var(--gray)}
.actbox.repr{border-color:var(--red)} .actbox.sol{border-color:var(--indigo)} .actbox.repos{border-color:var(--green)} .actbox.conge{border-color:var(--teal)}
.hero{text-align:center;padding:10px 0 14px}
.hero .lbl{font-size:13px;color:var(--label2);text-transform:uppercase}
.hero .amt{font-size:44px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.hero .sub{font-size:15px;color:var(--label2)}
.hero .sub b{color:var(--label)}
.stack{display:flex;height:10px;border-radius:5px;overflow:hidden;margin:6px 16px 14px;background:var(--fill2)}
.stack span{display:block;height:100%}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--label2);margin:-6px 16px 14px}
.legend i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:0}
hr.sep{border:0;border-top:.5px solid var(--sep);margin:20px 0}

/* Réglages (Réglages iOS) */
.drawer{margin:auto;width:min(520px,94vw);max-height:90vh;border-radius:14px}
.d-body{padding:0 18px 30px;overflow:auto;max-height:calc(90vh - 60px)}
.d-body h3{margin:20px 16px 6px;font-size:13px;text-transform:uppercase;color:var(--label2);font-weight:400}
.field{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 16px;font-size:16px;background:var(--bg2);position:relative}
.group{border-radius:12px;overflow:hidden}
.group .field + .field::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.field select,.field input{border:0;background:transparent;color:var(--label2);text-align:right;font-size:16px;max-width:55%}
.field input[type=date]{max-width:60%}
.field input[type=number]{width:90px}
.inl{display:flex;align-items:center;gap:4px;color:var(--label2)}
.rules{display:flex;flex-direction:column;background:var(--bg2);border-radius:12px;overflow:hidden}
.rule{padding:10px 16px;font-size:14px;position:relative}
.rule + .rule::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.rule b{font-weight:600}
.rule .s{font-size:12px;color:var(--label2)}
.rule.tv b{color:var(--orange)}
.d-foot{font-size:13px;color:var(--label2);margin:8px 16px}
.d-body .btn{width:100%;margin-top:4px}

@media (max-width:760px){
  body{font-size:16px}
  .top{padding:8px 12px;gap:8px}
  #curMonth{font-size:20px;overflow:hidden;text-overflow:ellipsis;min-width:0}
  .logo{display:none}
  .pills{gap:4px}
  .pill{padding:5px 8px;font-size:12px}
  .pill.eur{display:none}
  .top-right{gap:6px}
  .top .seg{display:none}
  main{padding:0 6px 110px}
  .wk-head{top:51px;grid-template-columns:repeat(7,1fr);gap:2px}
  .wk-head span:first-child{display:none}
  .week{grid-template-columns:repeat(7,1fr);gap:2px}
  .wn{display:none}
  .month-block h3{margin-left:6px}
  .day{min-height:86px;padding:24px 2px 4px;border-radius:8px}
  .day.inrot{padding-top:40px}
  .day.inrot .n{top:18px}
  .leg{grid-template-columns:1fr;gap:0}
  .leg .t{display:none}
  .leg .r{font-size:10px}
  .leg .m{display:none}
  .act-l{display:none}
  .chip{font-size:9px;padding:1px 2px}
  .big{font-size:10px}
  .modal{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:14px 14px 0 0}
  .grabber{display:block}
  .drawer{width:100vw;max-width:100vw;margin:auto 0 0;border-radius:14px 14px 0 0;max-height:92vh}
  .hero .amt{font-size:38px}
  .fab{display:none}
}

/* ---------- Pages Swap et Stats ---------- */
.page{max-width:760px;margin:0 auto;padding-top:8px}
.p-head{padding:14px 4px 6px}
.p-head h2{font-size:34px;font-weight:700;letter-spacing:-.02em;margin:6px 0 4px}
.p-head p{color:var(--label2);margin:0 0 14px;font-size:15px}
.p-head .seg{overflow-x:auto}
body[data-view=swap] .top-right .seg,body[data-view=stats] .top-right .seg{visibility:hidden}
body[data-view=swap] .fab,body[data-view=stats] .fab{display:none}
.step{margin:18px 0 8px}
.step-h{display:flex;gap:12px;align-items:flex-start;margin:0 4px 10px}
.step-h .num{flex:none;width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px}
.step-h b{display:block;font-size:20px;font-weight:700}
.step-h span{color:var(--label2);font-size:14px}
.mini-wk,.mini-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mini-wk{font-size:11px;color:var(--label2);text-align:center;font-weight:600;margin-bottom:4px}
.mc{border:0;border-radius:10px;background:var(--bg2);min-height:54px;padding:5px 3px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--label);font:inherit}
.mc b{font-size:15px;font-weight:600}
.mc span{font-size:10.5px;color:var(--label2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mc.f-vol span{color:var(--blue);font-weight:600}
.mc.f-repos{background:rgba(52,199,89,.12)} .mc.f-repos span{color:var(--green)}
.mc.f-conge{background:rgba(48,176,199,.14)}
.mc.f-repr span{color:var(--purple)} .mc.f-sol span{color:var(--orange)}
.mc.sel{background:var(--blue);color:#fff} .mc.sel span{color:rgba(255,255,255,.85)}
.give{margin-top:10px;background:var(--bg2);border-radius:12px;overflow:hidden}
.gv{padding:10px 16px;border-bottom:.5px solid var(--sep)} .gv b{display:block;font-size:15px} .gv span{font-size:13px;color:var(--label2)}
.lnk{border:0;background:none;color:var(--blue);font:inherit;font-size:15px;padding:10px 16px;cursor:pointer}
.form{padding:4px 0}
.form .field{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;font-size:16px;position:relative}
.form .field + .field::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--sep)}
.form input,.form select{border:0;background:var(--fill2);border-radius:8px;padding:6px 8px;font:inherit;font-size:15px;color:var(--label);max-width:60%}
.form input[data-f=dest]{width:90px;text-transform:uppercase;text-align:center;font-weight:600}
.form .inl{display:flex;align-items:center;gap:6px;color:var(--label2)} .form .inl input{width:70px;text-align:right}
.form .note{padding:0 16px 8px;margin:0}
.f-act{padding:10px 16px 12px}.f-act .btn{width:100%}
.btn:disabled{opacity:.45;cursor:default}
.del{border:0;background:none;color:var(--red);font:inherit;font-size:15px;cursor:pointer}
.amt.up{color:var(--green)} .amt.down{color:var(--red)}
.cmp{width:100%;border-collapse:collapse;font-size:15px;font-variant-numeric:tabular-nums}
.cmp th{font-size:12px;font-weight:600;color:var(--label2);text-align:right;padding:10px 14px 6px;text-transform:uppercase}
.cmp td{padding:9px 14px;text-align:right;border-top:.5px solid var(--sep);white-space:nowrap}
.cmp td:first-child{text-align:left;color:var(--label)} .cmp td{color:var(--label2)} .cmp td:nth-child(3){color:var(--label);font-weight:600}
.cmp td.up{color:var(--green);font-weight:600} .cmp td.down{color:var(--red);font-weight:600}
.verdict{margin:0 0 10px;padding:12px 16px;border-radius:12px;font-weight:600;font-size:15px}
.verdict.ok{background:rgba(52,199,89,.14);color:#1f8a3b} .verdict.warn{background:rgba(255,149,0,.15);color:#b86a00} .verdict.ko{background:rgba(255,59,48,.14);color:#d42a20}
[data-theme=dark] .verdict.ok{color:var(--green)} [data-theme=dark] .verdict.warn{color:var(--orange)} [data-theme=dark] .verdict.ko{color:var(--red)}
.chk.warn,.chk.ko,.chk.ok{color:var(--label);font-size:inherit}
.chk{display:flex;gap:12px;padding:11px 16px;position:relative}
.chk + .chk::before{content:"";position:absolute;top:0;left:48px;right:0;height:.5px;background:var(--sep)}
.chk i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px;color:#fff;margin-top:1px}
.chk.ok i{background:var(--green)} .chk.warn i{background:var(--orange)} .chk.ko i{background:var(--red)}
.chk b{display:block;font-size:15px;font-weight:600} .chk span{display:block;font-size:13.5px;color:var(--label2)} .chk em{display:block;font-size:12px;color:var(--label3);font-style:normal;margin-top:2px}
/* Stats */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:8px 0 6px}
.tile{background:var(--bg2);border-radius:14px;padding:14px 16px}
.tile span{display:block;font-size:13px;color:var(--label2)} .tile b{display:block;font-size:26px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin:2px 0} .tile em{font-style:normal;font-size:12.5px;color:var(--label2)}
.map-card{position:relative}
#map svg{display:block;width:100%;height:auto}
.map .sea{fill:#d6e4f5} .map .land{fill:#fbfbfd;stroke:none} .map .border{fill:none;stroke:#c3c8d1;stroke-width:.7}
[data-theme=dark] .map .sea{fill:#0b1220} [data-theme=dark] .map .land{fill:#23262d} [data-theme=dark] .map .border{stroke:#3a3d45}
.map .route{fill:none;stroke:var(--blue);stroke-linecap:round;opacity:.75} .map .route.dim{opacity:.12}
.map .ap{cursor:pointer} .map .ap circle{fill:var(--bg2);stroke:var(--blue);stroke-width:2.2} .map .ap.on circle{fill:var(--blue)}
.map text{font:600 11px var(--font);fill:var(--label);paint-order:stroke;stroke:var(--bg2);stroke-width:3px}
.map .base circle:first-child{fill:rgba(255,59,48,.2)} .map .base circle:last-child{fill:var(--red)}
.map-tip{padding:10px 16px;font-size:14px;border-top:.5px solid var(--sep)}
.dest{display:grid;grid-template-columns:28px 1fr 30% 34px;gap:10px;align-items:center;width:100%;border:0;background:none;padding:10px 16px;text-align:left;cursor:pointer;font:inherit;color:var(--label);position:relative}
.dest + .dest::before{content:"";position:absolute;top:0;left:54px;right:0;height:.5px;background:var(--sep)}
.dest.on{background:var(--fill2)}
.dest .fl{font-size:22px} .dest b{display:block;font-size:15px} .dest em{font-style:normal;font-size:12.5px;color:var(--label2)}
.dest .bar{height:6px;border-radius:3px;background:var(--fill2);overflow:hidden} .dest .bar i{display:block;height:100%;background:var(--blue);border-radius:3px}
.dest .n{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.chart{padding:16px 16px 4px}
.bars{position:relative;display:flex;gap:18px;align-items:flex-end;height:210px;padding:0 6px;justify-content:center}
.bcol{flex:0 1 80px;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;text-align:center}
.bstack{display:flex;flex-direction:column-reverse;border-radius:8px 8px 3px 3px;overflow:hidden}
.bstack i{display:block;min-height:2px}
.bv{font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:4px}
.bl{height:18px;line-height:18px;font-size:12px;color:var(--label2);text-transform:capitalize}
.seuil{position:absolute;left:0;right:0;border-top:1.5px dashed var(--red);opacity:.7}
.seuil span{position:absolute;right:0;top:-18px;font-size:11px;color:var(--red)}
.chart .legend{margin:12px 0 10px}
.donut-card{display:flex;align-items:center;gap:22px;padding:16px 20px}
.donut{width:140px;height:140px;flex:none} .donut path{fill:none;stroke-width:13}
.donut text{font:700 20px var(--font);fill:var(--label)} .donut text.s{font:500 9px var(--font);fill:var(--label2)}
.dl{display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;flex:1;font-size:14px}
.dl div{display:flex;align-items:center;gap:8px} .dl i{width:10px;height:10px;border-radius:50%;flex:none} .dl b{margin-left:auto;font-variant-numeric:tabular-nums}
@media (max-width:760px){
  .p-head h2{font-size:30px}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .tile b{font-size:22px}
  .donut-card{flex-direction:column;align-items:stretch}
  .donut{margin:0 auto}
  .mc{min-height:48px}
  .dest{grid-template-columns:26px 1fr 22% 30px}
  .cmp{font-size:14px} .cmp td,.cmp th{padding-left:8px;padding-right:8px} .cmp td:first-child{white-space:normal}
}
/* Mes documents */
.doc-state{padding:4px 0}
.doc-it{display:flex;justify-content:space-between;gap:12px;padding:11px 16px;font-size:15px}
.doc-it + .doc-it{border-top:.5px solid var(--sep)}
.doc-it span{color:var(--label2);text-transform:capitalize}
.doc-act{display:flex;justify-content:space-between;border-top:.5px solid var(--sep)}
.lnk.red{color:var(--red)}
.doc-empty{margin:0;padding:12px 16px;font-size:14px;color:var(--label2)}
.group .doc-btn{margin:8px 16px 12px;display:flex;width:auto;box-sizing:border-box;text-align:center}
#calApply{margin:12px 16px 4px;width:calc(100% - 32px)}
.kv s{color:var(--label3)}
/* Écarts documents / calcul */
table.ecarts{width:100%;border-collapse:collapse;font-size:14px;background:var(--bg2);border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums}
table.ecarts th{font-size:12px;font-weight:500;color:var(--label2);text-align:left;padding:8px 10px}
table.ecarts td{padding:9px 10px;border-top:.5px solid var(--sep)}
table.ecarts .r{text-align:right;white-space:nowrap}
table.ecarts tr.eq td:last-child{color:var(--green);font-weight:600}
table.ecarts tr.ne td:last-child{color:var(--orange);font-weight:700}
table.ecarts tr.ne td:first-child{font-weight:600}
.hero.warn .amt{color:var(--orange)} .hero.okk .amt{color:var(--green)}
.hero.warn .amt,.hero.okk .amt{font-size:34px}
button.kv.lnkrow{width:100%;border:0;background:none;font:inherit;color:inherit;text-align:left;cursor:pointer}
button.kv.lnkrow .v{color:var(--blue)}
@media (max-width:420px){table.ecarts{font-size:13px} table.ecarts td,table.ecarts th{padding:8px 6px}}
.field.col{flex-direction:column;align-items:stretch;gap:6px}
.field.col input{width:100%;text-align:left;font-size:15px;border:0;background:var(--fill2);border-radius:10px;padding:10px 12px;color:var(--label)}
.row-btns{display:flex;gap:10px;margin:10px 0 0;flex-wrap:wrap}
.field.toggle{margin-top:14px;border-radius:12px}
.field.toggle input[type=checkbox]{width:24px;height:24px;accent-color:var(--green)}
.field .f{display:block;font-size:12.5px;color:var(--label2)}
.group .field.col input{width:100%;max-width:none;box-sizing:border-box}

.pill.hs.neg{background:var(--red)}
.hsbar{margin:6px 0 10px;padding:10px 12px;border-radius:12px;background:var(--card, var(--bg2))}
.hsbar.mini{margin:0 0 8px;padding:0;background:none}
.hsbar .track{position:relative;height:8px;border-radius:99px;background:var(--fill2);overflow:visible}
.hsbar .fill{height:100%;border-radius:99px;transition:width .3s}
.hsbar.ok .fill{background:var(--green)}
.hsbar.ko .fill{background:var(--red)}
.hsbar .mark{position:absolute;top:-3px;width:2px;height:14px;margin-left:-1px;background:var(--label);opacity:.55;border-radius:1px}
.hsbar .lbl{margin-top:6px;font-size:13px;color:var(--label2);font-variant-numeric:tabular-nums}
.hsbar.ko .lbl b{color:var(--red)}
.hsbar.ok .lbl b{color:var(--green)}
.hsbar.mini .lbl{font-size:12px;margin-top:4px}
.field.lbl>span{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.field.lbl .f{font-size:12px;color:var(--label3)}
.field.lbl select{flex:none}
.card.edit input,.card.edit select{font:inherit;font-size:15px;border:0;border-radius:8px;background:var(--fill2);color:var(--label);padding:6px 8px;max-width:150px}
.card.edit .pair{display:flex;gap:6px}.card.edit .pair input{width:74px}
.card.edit .kv s{color:var(--label3)}
#edList .kv{padding:10px 14px}
.ecarts.year tr.cur td{font-weight:700}.ecarts.year tr.tot td{font-weight:700;border-top:1px solid var(--sep)}.ecarts .okc{color:var(--green)}.ecarts .nec{color:var(--orange)}

/* Statistiques : jours, temps */
.njs{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 8px}
.nj{padding:7px 14px;border-radius:99px;font-size:13px;font-weight:600;letter-spacing:.02em;border:1.5px solid var(--sep);background:var(--bg2);color:var(--label2)}
.nj b{margin-left:6px;color:var(--label);font-size:15px}
.nj.vol{border-color:var(--blue)} .nj.sol{border-color:var(--purple)} .nj.repos{border-color:var(--green)} .nj.conge{background:var(--teal);border-color:var(--teal);color:#fff} .nj.conge b{color:#fff}
.tiles.t3{grid-template-columns:repeat(3,1fr)}
@media (max-width:600px){.tiles.t3{grid-template-columns:repeat(3,1fr)} .tiles.t3 .tile b{font-size:18px}}
/* Carte : thèmes */
.map-opts{padding:10px 14px 14px;border-top:.5px solid var(--sep);display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:13px;color:var(--label2)}
.map-opts .chips{display:flex;gap:6px;overflow-x:auto;width:100%;padding-bottom:2px;scrollbar-width:none}
.map-opts .chips button{flex:none;border:1px solid var(--sep);background:var(--bg2);color:var(--label);border-radius:99px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer}
.map-opts .chips button.on{background:var(--label);color:var(--bg2);border-color:var(--label)}
.map-opts label{display:flex;gap:6px;align-items:center} .map-opts input{accent-color:var(--blue);width:16px;height:16px}
#map{--sea:#eef1f5;--land:#fff;--bd:#d5d9e0;--rt:var(--blue);--apf:#fff;--aps:var(--blue);--tx:var(--label);--txs:rgba(255,255,255,.9);--tx2:var(--label2)}
[data-theme=dark] #map.t-epure{--sea:#0b1220;--land:#23262d;--bd:#3a3d45;--apf:#1c1c1e;--txs:rgba(0,0,0,.8)}
#map.t-nuit{--sea:#070b16;--land:#131a2b;--bd:#26304a;--rt:#5ac8fa;--apf:#070b16;--aps:#5ac8fa;--tx:#e8f2ff;--txs:#070b16;--tx2:#8ea3c3}
#map.t-papier{--sea:#efe8da;--land:#faf6ec;--bd:#cfc3a8;--rt:#b5452f;--apf:#faf6ec;--aps:#b5452f;--tx:#3d3325;--txs:#faf6ec;--tx2:#7a6b54}
#map.t-flux{--sea:#f4f6fb;--land:#fff;--bd:#dde2ec;--rt:#ff2d55;--aps:#ff2d55}
#map.t-flux .route{stroke-dasharray:6 8;animation:flux 1.2s linear infinite}
@keyframes flux{to{stroke-dashoffset:-28}}
#map.t-radar{--sea:#021a0f;--land:#06301c;--bd:#0d4a2c;--rt:#34c759;--apf:#021a0f;--aps:#34c759;--tx:#b9f5cb;--txs:#021a0f;--tx2:#5fbf83}
#map .ring{fill:none;stroke:#34c759;stroke-opacity:.18} #map .sweep{stroke:#34c759;stroke-opacity:.35;stroke-width:1.5;transform-box:view-box;transform-origin:0 0}
#map.t-atlas{--sea:#a9cbe8;--land:#f3e7c7;--bd:#b59f6c;--rt:#c0392b;--apf:#fff;--aps:#c0392b;--tx:#2c2415;--txs:#f3e7c7;--tx2:#5a4a2c}
#map.t-verre{--sea:linear;--land:rgba(255,255,255,.55);--bd:rgba(255,255,255,.9);--rt:#0a84ff;--apf:rgba(255,255,255,.8);--aps:#0a84ff}
#map.t-verre svg{background:linear-gradient(135deg,#a1c4fd,#c2e9fb 45%,#e0c3fc)} #map.t-verre .sea{fill:transparent}
#map.t-etoile{--sea:#05060f;--land:#10132a;--bd:#1f2448;--rt:#ffd60a;--apf:#05060f;--aps:#ffd60a;--tx:#fff7cc;--txs:#05060f;--tx2:#b3a979}
#map .star{fill:#fff}
#map.t-blueprint{--sea:#0b3d91;--land:rgba(255,255,255,.07);--bd:rgba(255,255,255,.55);--rt:#fff;--apf:#0b3d91;--aps:#fff;--tx:#fff;--txs:#0b3d91;--tx2:#bcd0f5}
#map.t-blueprint .land{stroke:rgba(255,255,255,.8);stroke-width:.8} #map .grid{stroke:rgba(255,255,255,.12);stroke-width:1}
#map.t-relief{--sea:#cfe3ef;--land:#e9eee3;--bd:#b9c3ad;--rt:#1c7c54;--aps:#1c7c54}
#map.t-vintage{--sea:#d9c9a3;--land:#efe2c2;--bd:#a88c5a;--rt:#6b3e1f;--apf:#efe2c2;--aps:#6b3e1f;--tx:#4a3319;--txs:#efe2c2;--tx2:#7d6440}
#map.t-vintage .route{stroke-dasharray:3 4}
#map .map .sea{fill:var(--sea)} #map .map .land{fill:var(--land);stroke:none} #map .map .border{fill:none;stroke:var(--bd);stroke-width:.7}
#map .map .route{stroke:var(--rt)} #map .map .ap circle{fill:var(--apf);stroke:var(--aps)} #map .map .ap.on circle{fill:var(--aps)}
#map .map text{fill:var(--tx);stroke:var(--txs);text-anchor:start} #map .map text.city{font-weight:500;font-size:10px;fill:var(--tx2)}
/* Limites */
.lims{padding:6px 0}
.lim{padding:12px 16px;border-bottom:.5px solid var(--sep)} .lim:last-child{border-bottom:0}
.lim .lh{display:flex;justify-content:space-between;gap:10px;font-size:15px} .lim .lh span{font-size:12.5px;color:var(--label2);white-space:nowrap}
.lim .track{height:10px;border-radius:99px;background:var(--fill2);margin:8px 0 6px;overflow:hidden}
.lim .fill{height:100%;border-radius:99px;background:var(--blue)}
.lim.warn .fill{background:var(--orange)} .lim.over .fill{background:var(--red)}
.lim .lf{display:flex;justify-content:space-between;font-size:13px;color:var(--label2);font-variant-numeric:tabular-nums}
.lim .lf b{color:var(--label)} .lim .mg{font-weight:600;color:var(--green)} .lim.warn .mg{color:var(--orange)} .lim.over .mg{color:var(--red)}
.lim .f,.lcharts .f{margin:4px 0 0;font-size:12px;color:var(--label3)}
.lcharts{padding:12px 14px}
.lchart .lt{font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--label2);margin:6px 0 2px}
.lchart svg{width:100%;height:auto;display:block}
.lchart text{font:500 10px var(--font);fill:var(--label2)}
.lchart .gl{stroke:var(--sep);stroke-width:.5}
.lchart .lim-l{stroke:var(--red);stroke-width:1.5;stroke-dasharray:6 5} .lchart .lim-t{fill:var(--red);font-weight:600}
.lchart .pastl{fill:none;stroke:var(--blue);stroke-width:2.2;stroke-linejoin:round}
.lchart .futl{fill:none;stroke:var(--blue);stroke-width:2;stroke-dasharray:4 4;opacity:.7}

.lim .m95{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13.5px;font-weight:500}
.lim .m95 input{accent-color:var(--blue);width:17px;height:17px}
.f.red{color:var(--red)}
.prime-add .pair{display:flex;gap:6px;align-items:center}
.prime-add input{width:92px;padding:7px 9px;border:1px solid var(--sep);border-radius:9px;background:var(--bg);color:var(--label);font:inherit;font-size:14px}
.prime-add #prMt{width:62px}
.okc{color:var(--green)}
.kv.prime-add{flex-direction:column;align-items:stretch;gap:8px}
.prime-add .pair input{flex:1;width:auto;min-width:0} .prime-add #prMt{flex:0 0 80px}
.prime-add #prLb{text-align:left}
.kv.caisse input{width:96px}
/* Connexion et administration */
body.auth{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:max(48px,env(safe-area-inset-top)) 16px 32px}
.auth-card{width:100%;max-width:420px;text-align:center}
.auth-card .logo.big{display:inline-block!important;width:56px;height:56px;color:var(--label)}
.auth-card h1{font-size:28px;margin:10px 0 4px;font-weight:700}
.auth-card h1 span{color:var(--blue)}
.auth-sub{color:var(--label2);margin:0 0 22px;font-size:15px}
.auth-form{text-align:left}
.auth-form .field+.field{border-top:.5px solid var(--sep)}
.auth-form input{flex:1;min-width:0;text-align:right;border:0;background:transparent;outline:none;font-size:16px}
.auth-err{color:var(--red);min-height:20px;font-size:14px;margin:10px 0}
.auth-btn{width:100%}
.auth-note{text-align:left;margin-top:14px}
.admin{max-width:720px;margin:0 auto;padding:max(24px,env(safe-area-inset-top)) 16px 48px}
.admin h1{font-size:28px;margin:8px 0 18px}
.admin h3{font-size:13px;text-transform:uppercase;color:var(--label2);font-weight:500;margin:26px 16px 8px;letter-spacing:0}
.admin .row{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--bg2);font-size:15px}
.admin .row+.row{border-top:.5px solid var(--sep)}
.admin .row .grow{flex:1;min-width:0}
.admin .row .sub{display:block;color:var(--label2);font-size:13px}
.admin .row input{flex:1;min-width:0;border:0;background:transparent;outline:none;font-size:16px}
.admin .link{word-break:break-all;font-family:var(--mono);font-size:13px;user-select:all}
.btn.danger{color:var(--red)}
.acct{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
a.btn{text-decoration:none}
.empty-ics{display:flex;gap:8px;margin:0 0 8px}
.empty-ics input{flex:1;min-width:0;padding:12px 14px;border-radius:12px;border:0;background:var(--fill2);font-size:16px;outline:none}
.empty-ics input:focus{box-shadow:0 0 0 3px rgba(0,122,255,.25)}
.empty-info{min-height:18px;font-size:14px!important;margin:0 0 6px!important}
.empty-info.err{color:var(--red)!important}
.howto{text-align:left;font-size:14px;color:var(--label2);margin:4px 0 0}
.howto summary{cursor:pointer;color:var(--blue);font-weight:500;text-align:center;list-style:none}
.howto summary::-webkit-details-marker{display:none}
.howto ul{padding-left:18px;margin:10px 0 6px}.howto li{margin:4px 0}
.howto p{margin:4px 0 0!important;text-align:left}
.or{display:flex;align-items:center;gap:10px;color:var(--label3);font-size:13px;margin:22px 0 16px}
.or::before,.or::after{content:"";flex:1;height:.5px;background:var(--sep)}
.empty-foot{font-size:13px!important;margin:14px 0 0!important}
@media (max-width:520px){.empty-ics{flex-direction:column}.drop{padding:32px 18px}}
.day .plus{position:absolute;right:6px;bottom:4px;font-size:18px;line-height:1;color:var(--label3);font-weight:400}
.day:hover .plus{color:var(--blue)}
.day.nocov.addable{cursor:pointer}
@media (max-width:700px){.day .plus{right:3px;bottom:2px;font-size:15px}}
.warn-t{color:var(--orange)!important}