/* Mes Postes — feuille de style */
/* Layout : le calendrier du mois est la pièce centrale ; à côté (ou dessous sur téléphone) aujourd'hui / demain, les 7 prochains jours et le total du mois. */
:root{
  --bg:#F2F5F7; --surface:#FFFFFF; --ink:#15232C; --muted:#586A76; --line:#D5DDE3;
  --accent:#0F5C73; --accent-ink:#FFFFFF; --accent-soft:#DCEDF2; --warn:#B4231F;
  --sun-bg:#FBE7A8; --sun-fg:#5B4300; --dusk-bg:#FBD0B5; --dusk-fg:#6A2A08;
  --night-bg:#2F3A6E; --night-fg:#E6EAFF; --day-bg:#CDE6F5; --day-fg:#0E3F5C;
  --rest-bg:#E4E8EB; --rest-fg:#48525B; --leave-bg:#C9EBCF; --leave-fg:#124A22;
  --recup-bg:#BFE9E3; --recup-fg:#0B4A44; --sick-bg:#F6CDD6; --sick-fg:#6B1128;
  --train-bg:#E0D4F5; --train-fg:#3F2372;
  --display:"Bricolage Grotesque","Figtree",system-ui,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:10px;
  --brand-bg:#0F5C73; --brand-ink:#FFFFFF; --brand-soft:rgba(255,255,255,.72);
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0F171C; --surface:#18232A; --ink:#E7EEF2; --muted:#94A5B0; --line:#2B3941;
  --accent:#6CC4DB; --accent-ink:#06222B; --accent-soft:#16343D; --warn:#FF8A80;
  --sun-bg:#5A4708; --sun-fg:#FFE9A6; --dusk-bg:#6A3414; --dusk-fg:#FFD9C2;
  --night-bg:#232C63; --night-fg:#CDD5FF; --day-bg:#17445E; --day-fg:#CFEBFA;
  --rest-bg:#2A3138; --rest-fg:#AEB8C1; --leave-bg:#1C4A28; --leave-fg:#C6F0CF;
  --recup-bg:#124A45; --recup-fg:#BDEDE6; --sick-bg:#5E1A2C; --sick-fg:#FAD0DA;
  --train-bg:#3D2A66; --train-fg:#E2D6FA; --brand-bg:#11303A; --brand-ink:#E7EEF2; --brand-soft:rgba(231,238,242,.7); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0F171C; --surface:#18232A; --ink:#E7EEF2; --muted:#94A5B0; --line:#2B3941;
  --accent:#6CC4DB; --accent-ink:#06222B; --accent-soft:#16343D; --warn:#FF8A80;
  --sun-bg:#5A4708; --sun-fg:#FFE9A6; --dusk-bg:#6A3414; --dusk-fg:#FFD9C2;
  --night-bg:#232C63; --night-fg:#CDD5FF; --day-bg:#17445E; --day-fg:#CFEBFA;
  --rest-bg:#2A3138; --rest-fg:#AEB8C1; --leave-bg:#1C4A28; --leave-fg:#C6F0CF;
  --recup-bg:#124A45; --recup-fg:#BDEDE6; --sick-bg:#5E1A2C; --sick-fg:#FAD0DA;
  --train-bg:#3D2A66; --train-fg:#E2D6FA; --brand-bg:#11303A; --brand-ink:#E7EEF2; --brand-soft:rgba(231,238,242,.7); color-scheme:dark }

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;-webkit-text-size-adjust:100%;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45}
.wrap{max-width:1080px;margin:0 auto;padding-inline:16px;padding-block:16px 40px;display:flex;flex-direction:column;gap:18px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;line-height:1.15}
h1{font-size:24px;font-weight:700;letter-spacing:-.01em}
h2{font-size:19px;font-weight:700}
h3{font-size:12px;font-family:var(--body);font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.muted{color:var(--muted)} .small{font-size:13px}
.t-sun{--tb:var(--sun-bg);--tf:var(--sun-fg)} .t-dusk{--tb:var(--dusk-bg);--tf:var(--dusk-fg)}
.t-night{--tb:var(--night-bg);--tf:var(--night-fg)} .t-day{--tb:var(--day-bg);--tf:var(--day-fg)}
.t-rest{--tb:var(--rest-bg);--tf:var(--rest-fg)} .t-leave{--tb:var(--leave-bg);--tf:var(--leave-fg)}
.t-recup{--tb:var(--recup-bg);--tf:var(--recup-fg)} .t-sick{--tb:var(--sick-bg);--tf:var(--sick-fg)}
.t-train{--tb:var(--train-bg);--tf:var(--train-fg)}

header.top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.tabs{display:flex;gap:4px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px}
.tabs button{border:0;background:transparent;padding:8px 16px;border-radius:999px;font-weight:600;color:var(--muted)}
.tabs button[aria-selected="true"]{background:var(--accent);color:var(--accent-ink)}

.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:9px 14px;font-weight:600;min-height:40px}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--warn)}
.btn.icon{padding:0;width:40px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.grow{flex:1;min-width:0}

.cols{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:18px;align-items:start}
.stack{display:flex;flex-direction:column;gap:18px;min-width:0}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}

.monthbar{display:flex;align-items:center;gap:8px}
.monthbar h2{flex:1;text-transform:capitalize;min-width:0}
.dow,.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.dow span{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);text-align:center}
.day{position:relative;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:5px 6px;min-height:66px;display:flex;flex-direction:column;align-items:flex-start;gap:1px;text-align:left;overflow:hidden}
.day.has{background:var(--tb);color:var(--tf);border-color:transparent}
.day .num{font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.85}
.day .code{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.1}
.day .hrs{font-size:10.5px;font-variant-numeric:tabular-nums;white-space:nowrap;opacity:.9}
.day.we:not(.has){background:color-mix(in srgb,var(--line) 35%,var(--surface))}
.day.today{box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent)}
.day.chg::after{content:"";position:absolute;top:0;right:0;border-style:solid;border-width:0 14px 14px 0;border-color:transparent var(--warn) transparent transparent}
.blank{min-height:0}
.legend{display:flex;gap:6px 14px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;background:var(--tb);margin-right:5px}
.legend .mark{width:0;height:0;background:none;border-style:solid;border-width:0 10px 10px 0;border-color:transparent var(--warn) transparent transparent;border-radius:0}

.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border:1px solid transparent;background:var(--tb,var(--surface));color:var(--tf,var(--ink));border-radius:999px;padding:7px 12px;font-weight:600;min-height:36px}
.chip.plain{border-color:var(--line)}
.chip[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--accent)}
.brushbar{background:var(--accent-soft);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px}

.now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.card{border-radius:12px;padding:12px;background:var(--tb,var(--bg));color:var(--tf,var(--ink));display:flex;flex-direction:column;gap:2px;min-width:0}
.card .when{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;opacity:.85}
.card .what{font-family:var(--display);font-size:20px;font-weight:700;line-height:1.15}
.card .sub{font-size:13px;font-variant-numeric:tabular-nums}
.flag{font-size:12.5px;font-weight:600;color:var(--warn)}
.list{display:flex;flex-direction:column}
.item{display:flex;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);background:none;border-inline:0;border-bottom:0;text-align:left;width:100%}
.item:first-child{border-top:0}
.item .d{width:64px;flex:none;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;text-transform:capitalize}
.pill{flex:none;min-width:38px;text-align:center;border-radius:6px;padding:3px 6px;font-weight:700;background:var(--tb,var(--bg));color:var(--tf,var(--muted))}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.stat b{display:block;font-family:var(--display);font-size:22px;font-variant-numeric:tabular-nums;line-height:1.1}
.stat span{font-size:12.5px;color:var(--muted)}
.banner{background:var(--accent-soft);border-radius:var(--r);padding:10px 12px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.tablewrap{overflow-x:auto}
table.yearly{width:100%;border-collapse:collapse;font-size:13.5px;white-space:nowrap}
table.yearly th,table.yearly td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--line)}
table.yearly th:first-child,table.yearly td:first-child{text-align:left;text-transform:capitalize}
table.yearly thead th{color:var(--muted);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
table.yearly tr.total td{font-weight:700;border-top:2px solid var(--line);border-bottom:0}
.empty{text-align:center;padding:8px 0 4px;display:flex;flex-direction:column;gap:10px;align-items:center}

.change{border-top:1px solid var(--line);padding:12px 0;display:flex;flex-direction:column;gap:6px}
.change:first-of-type{border-top:0;padding-top:0}
.change .line{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.arrow{color:var(--muted)}

label.f{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);min-width:0}
input[type=text],input[type=time],input[type=date],select,textarea{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:8px 10px;min-height:40px;width:100%;color:var(--ink)}
.sw{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line)}
.sw:first-of-type{border-top:0}
.sw input[type=checkbox]{width:20px;height:20px;margin-top:2px;accent-color:var(--accent);flex:none}
.sw .txt{flex:1;min-width:0}
.sw .txt b{display:block}
.typerow{display:grid;grid-template-columns:minmax(0,1.6fr) 64px minmax(0,1fr) minmax(0,1fr) 40px;gap:6px;align-items:center;padding:6px 0}
.typerow .sw-color{grid-column:1/-1;height:4px;border-radius:2px;background:var(--tb)}

dialog{border:0;padding:0;background:var(--surface);color:var(--ink);border-radius:16px;width:min(480px,100%);max-height:90%;overflow:auto}
dialog::backdrop{background:rgba(8,16,22,.55)}
.sheet{padding:18px;display:flex;flex-direction:column;gap:14px}
.sheet h2{text-transform:capitalize}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.box{background:var(--bg);border-radius:var(--r);padding:12px;display:flex;flex-direction:column;gap:10px}
#toasts{position:fixed;left:16px;right:16px;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:8px;align-items:center;z-index:30;pointer-events:none}
.toast{pointer-events:auto;background:var(--ink);color:var(--bg);border-radius:12px;padding:10px 14px;max-width:440px;width:100%;display:flex;gap:10px;align-items:center;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast b{display:block}
.toast button{border:0;background:transparent;color:inherit;font-weight:700;padding:6px}

@media (max-width:820px){
  .cols{grid-template-columns:minmax(0,1fr)}
  .side{display:contents}
  .side .panel:first-child{order:-1}
}
@media (max-width:640px){
  .wrap{padding-block:12px 96px}
  .tabs{position:fixed;left:0;right:0;bottom:0;border-radius:0;border-width:1px 0 0;justify-content:space-around;padding:6px 8px calc(6px + env(safe-area-inset-bottom,0px));z-index:20}
  .tabs button{flex:1;padding:10px 6px}
  .panel{padding:12px}
  .day{min-height:54px;padding:4px;align-items:center;text-align:center}
  .day .code{font-size:17px}
  .day .hrs{display:none}
  dialog{margin:auto 0 0;width:100%;max-width:100%;border-radius:16px 16px 0 0}
  .sheet{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .typerow{grid-template-columns:minmax(0,1fr) 56px 40px}
  .typerow .tm{grid-row:2}
  .typerow .tm.a{grid-column:1} .typerow .tm.b{grid-column:2/4}
}
@media (prefers-reduced-motion:no-preference){ .toast{animation:up .2s ease-out} @keyframes up{from{transform:translateY(8px);opacity:0}} }

/* ---------- Comptes : connexion, inscription, profil ---------- */
[hidden]{display:none!important}
img{max-width:100%}
.demo-banner{background:var(--sun-bg);color:var(--sun-fg);padding:8px 16px;font-size:13px;text-align:center;font-weight:500}
.auth{min-height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
.auth-brand{background:var(--brand-bg);color:var(--brand-ink);padding:48px clamp(24px,5vw,64px);display:flex;flex-direction:column;justify-content:center;gap:20px}
.auth-brand .logo{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;font-size:22px}
.auth-brand .logo img{width:44px;height:44px;border-radius:12px}
.auth-brand h1{font-size:clamp(28px,3.4vw,40px);max-width:16ch}
.auth-brand p{color:var(--brand-soft);max-width:40ch;font-size:16px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;max-width:380px}
.week div{border-radius:8px;padding:6px 4px;text-align:center;background:var(--tb);color:var(--tf);display:flex;flex-direction:column;gap:2px}
.week small{font-size:10px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}
.week b{font-family:var(--display);font-size:17px}
.auth-main{display:flex;align-items:center;justify-content:center;padding-inline:16px;padding-block:40px}
.auth-card{width:min(420px,100%);display:flex;flex-direction:column;gap:18px}
.auth-card h2{font-size:26px}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0;border:0;padding:0;margin:0}
.field label,.field legend{font-size:13.5px;font-weight:600;color:var(--ink);padding:0}
.req{color:var(--warn)} .opt{font-weight:400;color:var(--muted)}
.field input[type=email],.field input[type=password],.field input[type=text],.field input[type=tel],.field input[type=date]{border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:10px 12px;min-height:44px;width:100%;color:var(--ink)}
.field input:focus{border-color:var(--accent);outline:2px solid color-mix(in srgb,var(--accent) 35%,transparent);outline-offset:0}
.field input[aria-invalid="true"],.field[aria-invalid="true"] .seg{border-color:var(--warn)}
.hint{font-size:12.5px;color:var(--muted)}
.err{font-size:12.5px;color:var(--warn);font-weight:600}
.pw{position:relative}
.pw input{padding-right:84px!important}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--accent);font-weight:600;font-size:13px;padding:8px 10px}
.rules{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.rules li::before{content:"○ "}
.rules li.ok{color:var(--leave-fg)}
.rules li.ok::before{content:"✓ "}
.note{border-radius:var(--r);padding:12px 14px;background:var(--accent-soft);font-size:14px;display:flex;flex-direction:column;gap:8px}
.note.err-box{background:var(--sick-bg);color:var(--sick-fg)}
.note.ok-box{background:var(--leave-bg);color:var(--leave-fg)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-weight:600;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:inherit}
.btn.block{width:100%;min-height:46px}
.btn[disabled]{opacity:.6;cursor:progress}
.switch{font-size:14px;color:var(--muted);text-align:center;border-top:1px solid var(--line);padding-top:16px}
.auth-legal{text-align:center;margin-top:16px}
.right{text-align:right;margin-top:-6px;font-size:13.5px}
.mail-icon{width:56px;height:56px;border-radius:16px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-size:26px}
.mail-preview{border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--bg)}
.mail-head{display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--line);padding-bottom:8px}
.mail-preview a.btn{align-self:flex-start;text-decoration:none;display:inline-flex;align-items:center}

.onboard{max-width:760px;margin:0 auto;padding-inline:16px;padding-block:28px 48px;display:flex;flex-direction:column;gap:20px}
.onboard-head{display:flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;font-size:18px}
.onboard-head img{width:34px;height:34px;border-radius:9px}
.stepper{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.stepper li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);border-top:3px solid var(--line);padding-top:8px;min-width:0}
.stepper li.done{color:var(--ink);border-color:var(--leave-fg)}
.stepper li.cur{color:var(--ink);border-color:var(--accent);font-weight:700}
.stepper .n{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;background:var(--line);color:var(--ink)}
.stepper li.done .n{background:var(--leave-bg);color:var(--leave-fg)}
.stepper li.cur .n{background:var(--accent);color:var(--accent-ink)}
.form-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(18px,3vw,28px);display:flex;flex-direction:column;gap:20px}
.form-card header{display:flex;flex-direction:column;gap:6px}
.form-card h2{font-size:24px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form-grid .full{grid-column:1/-1}
.seg{display:flex;border:1px solid var(--line);border-radius:10px;padding:4px;gap:4px;flex-wrap:wrap;background:var(--surface)}
.seg-opt{flex:1;min-width:90px;position:relative}
.seg-opt input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.seg-opt span{display:block;text-align:center;padding:9px 10px;border-radius:7px;font-weight:600;color:var(--muted)}
.seg-opt input:checked+span{background:var(--accent);color:var(--accent-ink)}
.seg-opt input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.form-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between;border-top:1px solid var(--line);padding-top:16px}
.form-msg:empty{display:none}
.account-line{display:flex;flex-direction:column;gap:2px}
.who{font-size:13px;color:var(--muted)}

#welcome{width:min(520px,100%)}
.welcome-top{background:var(--brand-bg);color:var(--brand-ink);padding:26px 24px 22px;display:flex;flex-direction:column;gap:8px}
.welcome-top .eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--brand-soft)}
.welcome-top h2{font-size:28px}
.welcome-top p{color:var(--brand-soft);font-size:16px}
.welcome-body{padding:20px 24px 24px;display:flex;flex-direction:column;gap:16px}
.steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:s}
.steps li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:2px 10px;counter-increment:s}
.steps li::before{content:counter(s);grid-row:span 2;width:28px;height:28px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:700;display:grid;place-items:center}
.steps span{color:var(--muted);font-size:13.5px}
.loading{min-height:100%;display:grid;place-items:center;color:var(--muted)}

@media (max-width:820px){
  .auth{grid-template-columns:minmax(0,1fr)}
  .auth-brand{padding:24px 16px;gap:12px}
  .auth-brand h1{font-size:22px;max-width:none}
  .auth-brand p,.auth-brand .week{display:none}
  .auth-main{align-items:flex-start;padding-block:24px 40px}
}
@media (max-width:560px){
  .form-grid{grid-template-columns:minmax(0,1fr)}
  .stepper li{font-size:11.5px}
  .stepper .lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #welcome{margin:auto 0 0;border-radius:16px 16px 0 0}
  .welcome-body{padding-bottom:calc(24px + env(safe-area-inset-bottom,0px))}
}
#root{min-height:100%;display:flex;flex-direction:column}
.auth{flex:1}
.wrap,.onboard{width:100%}