:root{
  --brand:#B7182A; --brand-dark:#8E1220; --brand-soft:#FBEDEF;
  --ink:#1D1D1B; --muted:#6B6A66; --sand:#E5E2DB; --sand-soft:#F4F2EE;
  --bg:#F7F5F1; --panel:#FFFFFF; --line:#E5E2DB;
  --warn:#B54708; --warn-bg:#FFF4E5; --danger:#B7182A; --danger-bg:#FBEDEF; --ok:#1E7A4C; --ok-bg:#E9F6EF;
  --radius:14px; --shadow:0 1px 2px rgba(29,29,27,.06),0 4px 14px rgba(29,29,27,.05);
  font-family:"Lato",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-size:15px}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:1px solid var(--line);background:var(--panel);border-radius:999px;padding:8px 16px;font-weight:700;transition:background .15s,border-color .15s,color .15s}
button:hover{border-color:#cfcabf;background:var(--sand-soft)}
button:disabled{opacity:.55;cursor:wait}
button.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
button.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark)}
button.danger{color:var(--danger)}
button.icon{width:40px;height:40px;padding:0;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
button.ghost{border-color:transparent;background:none;padding:4px 10px;font-size:12.5px;color:var(--brand)}
button.ghost:hover{background:var(--brand-soft)}
header.top{display:flex;align-items:center;gap:18px;padding:12px 28px;background:var(--panel);border-bottom:4px solid var(--brand);flex-wrap:wrap}
header.top .logo{height:52px;width:auto;display:block}
header.top .ttl{border-left:2px solid var(--sand);padding-left:18px}
header.top h1{font-size:22px;font-weight:900;margin:0;letter-spacing:-.01em}
header.top .ttl span{font-size:13.5px;color:var(--muted)}
.spacer{flex:1}
#dataMenu{border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:var(--panel);font-weight:700;max-width:170px}
.toolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:20px 28px 0;max-width:1800px;margin:0 auto}
.toolbar .nav{display:flex;align-items:center;gap:6px}
#periode{font-size:28px;font-weight:900;margin:0 8px;letter-spacing:-.01em;min-width:240px}
.seg{display:inline-flex;background:var(--sand-soft);border:1px solid var(--line);border-radius:999px;padding:3px}
.seg button{border:0;background:none;padding:6px 18px}
.seg button.on{background:var(--panel);color:var(--brand);box-shadow:var(--shadow)}
.layout{display:grid;grid-template-columns:290px 1fr;gap:22px;padding:18px 28px 32px;max-width:1800px;margin:0 auto}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
aside h2{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:0 0 10px}
aside h2 .spacer{flex:1}
.filt label{display:flex;align-items:center;gap:10px;padding:6px 8px;margin:0 -8px;border-radius:8px;cursor:pointer}
.filt label:hover{background:var(--sand-soft)}
.filt input[type=checkbox]{width:17px;height:17px;margin:0}
.filt label.all{font-weight:700;border-bottom:1px solid var(--line);border-radius:8px 8px 0 0;padding-bottom:9px;margin-bottom:4px}
.dot{width:12px;height:12px;border-radius:4px;flex:none}
#conn{font-size:13.5px;line-height:1.5}
#conn.ok{border-left:5px solid var(--ok)}
#conn.warn{border-left:5px solid var(--warn);background:var(--warn-bg)}
#conn.err{border-left:5px solid var(--danger);background:var(--danger-bg)}
#conn .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
#conn .acts button{padding:5px 12px;font-size:12.5px}
.conf-item{display:block;width:100%;text-align:left;margin-bottom:8px;padding:9px 11px;font-size:13px;line-height:1.4;font-weight:400;border-radius:10px}
.conf-item.fort{border-left:4px solid var(--danger)}
.conf-item.chev{border-left:4px solid var(--warn)}
.muted{color:var(--muted)}
.small{font-size:12.5px}
/* Vue mois */
.month{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.dow,.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dow div{padding:12px 12px;font-size:12.5px;font-weight:900;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;background:var(--sand-soft);border-bottom:1px solid var(--line)}
.day{min-height:158px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 8px 10px;cursor:pointer;min-width:0;transition:background .12s}
.week:last-child .day{border-bottom:0}
.week .day:nth-child(7){border-right:0}
.day.we{background:#FBFAF8}
.day:hover{background:#FDF6F7}
.day.other{background:#F9F8F5}
.day.other .num{color:#B9B5AC}
.num{display:inline-flex;min-width:30px;height:30px;padding:0 4px;align-items:center;justify-content:center;font-size:14.5px;font-weight:700;margin-bottom:4px;border-radius:999px}
.day.today{background:var(--brand-soft)}
.day.today .num{background:var(--brand);color:#fff}
.chip{display:block;width:100%;text-align:left;border:0;border-radius:7px;padding:5px 8px 6px;margin:5px 0;font-size:13.5px;font-weight:700;line-height:1.25;color:#fff;min-width:0;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.chip:hover{filter:brightness(1.08)}
.chip .meta{display:flex;align-items:center;gap:5px;font-size:12px;font-weight:400;opacity:.95;margin-bottom:1px;font-variant-numeric:tabular-nums}
.chip .meta .grow{flex:1}
.chip .meta span{white-space:nowrap}
.chip .tx{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:break-word;text-align:left}
.chip.prov{background:#fff !important;border:2px dashed;box-shadow:none;padding:3px 6px 4px}
.chip.tous{box-shadow:inset 0 0 0 2px rgba(255,255,255,.35),0 1px 3px rgba(0,0,0,.2)}
.chip .warn{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border-radius:50%;background:#fff;color:var(--danger);font-size:11.5px;font-weight:900}
.chip.prov .warn{background:var(--danger);color:#fff}
.more{display:inline-block;font-size:12.5px;font-weight:700;color:var(--brand);padding:2px 6px;border-radius:6px}
.more:hover{background:var(--brand-soft)}
/* Vue liste */
.list .when{font-size:14px;font-weight:700}
.list .when span{display:block;font-weight:400;color:var(--muted);font-size:13px}
.list h3{font-size:15px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin:22px 0 10px;color:var(--brand)}
.list h3:first-child{margin-top:0}
.row{display:grid;grid-template-columns:190px 1fr auto;gap:16px;align-items:center;background:var(--panel);border:1px solid var(--line);border-left:7px solid;border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;box-shadow:var(--shadow);transition:transform .12s}
.row:hover{transform:translateY(-1px)}
.row .t{font-weight:900;font-size:16px}
.row.prov{border-left-style:dashed}
.badge{display:inline-block;font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--sand-soft);white-space:nowrap;margin:2px 0 2px 4px}
.badge.fort{background:var(--danger-bg);color:var(--danger)}
.badge.chev{background:var(--warn-bg);color:var(--warn)}
.badge.prov{color:var(--muted);font-style:italic}
.badge.inv{background:var(--ok-bg);color:var(--ok)}
.badge.tous{background:var(--brand);color:#fff}
/* Dialogues */
dialog{border:0;border-radius:18px;padding:0;width:min(760px,96vw);box-shadow:0 24px 70px rgba(29,29,27,.3)}
dialog::backdrop{background:rgba(29,29,27,.5)}
.dlg-h{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--line);border-top:5px solid var(--brand);border-radius:18px 18px 0 0}
.dlg-h h2{margin:0;font-size:19px;font-weight:900}
.dlg-b{padding:18px 22px;max-height:70vh;overflow:auto}
.dlg-f{display:flex;flex-wrap:wrap;gap:8px;padding:14px 22px;border-top:1px solid var(--line);background:var(--sand-soft);border-radius:0 0 18px 18px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:5px;font-size:13px;font-weight:700;color:var(--muted)}
label.f input,label.f select,label.f textarea{border:1px solid #D6D2C8;border-radius:9px;padding:9px 10px;color:var(--ink);background:#fff;font-weight:400}
label.f input:focus,label.f select:focus,label.f textarea:focus{outline:2px solid var(--brand);outline-offset:0;border-color:var(--brand)}
label.f textarea{min-height:80px;resize:vertical}
.inline{display:flex;align-items:center;gap:8px;font-size:14px}
input[type=checkbox]{accent-color:var(--brand)}
.alert{border-radius:10px;padding:11px 14px;margin-bottom:14px;font-size:14px;line-height:1.45}
.alert.fort{background:var(--danger-bg);color:var(--danger)}
.alert.chev{background:var(--warn-bg);color:var(--warn)}
.alert.info{background:var(--sand-soft);color:var(--ink)}
.alert.lock{background:#EEF2F8;color:#1F3B63}
.alert.ok{background:var(--ok-bg);color:var(--ok)}
.fs{border:0;padding:0;margin:0;min-width:0}
.fs:disabled label.f input,.fs:disabled label.f select,.fs:disabled label.f textarea{background:var(--sand-soft);color:var(--ink)}
.hist{margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hist h3{font-size:14px;font-weight:900;margin:0 0 8px;color:var(--brand)}
.hist .v{padding:8px 0;border-bottom:1px dashed var(--line);font-size:13.5px;line-height:1.45}
.hist .v:last-child{border-bottom:0}
.hist .v ul{margin:4px 0 0;padding-left:18px}
.hist .v del{color:var(--muted)}
.tagc{display:inline-block;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;background:var(--brand);color:#fff;border-radius:999px;padding:2px 8px;margin-left:6px;vertical-align:1px}
.alert ul{margin:6px 0 0;padding-left:18px}
/* Fériés, vacances */
.dhead{display:flex;align-items:flex-start;justify-content:space-between;gap:4px;min-width:0}
.dtag{font-size:11px;font-weight:700;line-height:1.2;text-align:right;padding-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.dtag.hol{color:var(--brand)}
.dtag.vac{color:#8A6A00}
.day.vac{background:#FFF8DD}
.day.hol{background:#FCEFF1}
.day.hol .num{color:var(--brand)}
/* Vue année */
.year{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.ym{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 14px 16px;box-shadow:var(--shadow)}
.ym h3{display:flex;align-items:center;justify-content:space-between;margin:0 0 10px;font-size:17px;font-weight:900;cursor:pointer}
.ym h3:hover{color:var(--brand)}
.ym h3 .badge{font-size:11.5px}
.ydow,.ydays{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:3px}
.ydow span{font-size:11px;font-weight:900;color:var(--muted);text-align:center;padding-bottom:2px}
.yd{position:relative;border:0;border-radius:7px;padding:4px 0 3px;min-height:44px;font-size:13px;font-weight:700;background:transparent;display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;box-shadow:none}
.yd:hover{background:var(--sand-soft);box-shadow:inset 0 0 0 2px var(--sand)}
.yd.we{color:#A39E93;background:#FAF8F4}
.yd.vac{background:#FFF3C4}
.yd.hol{background:#FBE3E6;color:var(--brand)}
.yd.today{box-shadow:inset 0 0 0 2px var(--brand)}
.yd .bars{display:flex;flex-direction:column;gap:2px;width:78%}
.yd .bars i{display:block;height:5px;border-radius:3px}
.yd .bars i.prov{opacity:.4}
.yd .plus{font-size:9.5px;line-height:1;color:var(--muted)}
.yd.conf::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:var(--danger);box-shadow:0 0 0 2px #fff}
.blank{min-height:44px}
/* Vue tableau */
.tbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-bottom:12px}
.tbar label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.twrap{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:auto}
table.sheet{border-collapse:collapse;width:100%;font-size:13.5px;min-width:980px}
table.sheet th{position:sticky;top:0;background:var(--sand-soft);text-align:left;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
table.sheet td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:top}
table.sheet tr:last-child td{border-bottom:0}
table.sheet tbody tr{cursor:pointer}
table.sheet tbody tr:hover td{background:#FDF6F7}
table.sheet tr.prov td{font-style:italic;color:var(--muted)}
table.sheet tr.int td{background:#FAF8F4}
table.sheet .pl{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-weight:700}
table.sheet .nowrap{white-space:nowrap}
/* Légende */
.legend{display:grid;gap:7px;margin-top:12px;font-size:13px}
.legend span{display:flex;align-items:center;gap:9px}
.sw{width:18px;height:13px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.06)}
.zsel{width:100%;border:1px solid #D6D2C8;border-radius:9px;padding:8px 10px;background:#fff}
.help h3{font-size:15px;font-weight:900;margin:20px 0 6px;color:var(--brand)}
.help p,.help li{line-height:1.55}
.help code{background:var(--sand-soft);padding:1px 6px;border-radius:5px;font-size:13px}
.help table{border-collapse:collapse;font-size:13px;margin:6px 0}
.help td,.help th{border:1px solid var(--line);padding:5px 9px;text-align:left}
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;opacity:0;transition:opacity .25s;pointer-events:none;z-index:50;max-width:90vw;font-weight:700}
#toast.show{opacity:1}
@media (max-width:1100px){.layout{grid-template-columns:240px 1fr}.day{min-height:120px}.chip{font-size:12.5px}}
@media (max-width:860px){
  header.top{padding:10px 16px}header.top .logo{height:40px}header.top .ttl{display:none}
  .toolbar{padding:14px 16px 0}#periode{font-size:22px;min-width:0}
  .layout{grid-template-columns:1fr;padding:14px 16px}
  .layout main{order:-1}
  .day{min-height:76px;padding:4px}
  .chip{font-size:10.5px;padding:2px 4px}.chip .meta{display:none}
  .row{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
}
@media print{header.top button,header.top select,.toolbar button,.seg,aside{display:none}.layout{grid-template-columns:1fr}}