:root{
  --bg:#ffffff;
  --fg:#0f172a;
  --muted:#475569;
  --accent:#0a8d91;       /* today */
  --accent-contrast:#ffffff;
  --weekend:#cfe9da;      /* stronger */
  --holiday:#ffd980;      /* stronger */
  --border:#cbd5e1;
  --card:#f1f5f9;
  --link:#1d4ed8;
  --zoneA:#ff5c5c;
  --zoneB:#4c8dff;
  --zoneC:#59cf47;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Noto Sans",sans-serif}
a{color:var(--link);text-decoration:none}
a:hover{text-decoration:underline}

.header{
  position:sticky;top:0;z-index:10;
  display:flex;align-items:center;justify-content:space-between;
  padding:6px 10px;background:var(--bg);border-bottom:1px solid var(--border);
}
.header .title{font-weight:800;font-size:16px}
.header .year-switch{display:flex;align-items:center;gap:6px}
.btn{border:1px solid var(--border);background:#fff;border-radius:8px;padding:4px 8px;cursor:pointer;font-size:12px}
.btn:active{transform:scale(0.98)}

.wrapper{max-width:1400px;margin:0 auto;padding:8px}
.months-scroller{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scroll-behavior:smooth}

.month{
  min-width: 200px; max-width: 200px;   /* narrower so 6 cols tiennent davantage */
  background:var(--card);border:1px solid var(--border);border-radius:10px;padding:8px;
  display:flex;flex-direction:column;gap:6px;
}
.month .name{font-weight:800;font-size:13px;margin-bottom:2px}
.legend{display:flex;gap:8px;flex-wrap:wrap;color:var(--muted);font-size:10px}
.legend .chip{display:inline-flex;gap:4px;align-items:center}
.legend .sq{width:10px;height:10px;border-radius:3px;border:1px solid var(--border);display:inline-block}

.rows{display:flex;flex-direction:column;gap:2px}
.day-row{
  display:grid;
  grid-template-columns: 16px 24px 1fr 24px;
  align-items:center;
  gap:4px;
  border:1px solid var(--border);
  background:#fff;
  border-radius:7px;
  padding:3px 5px;
  position:relative;
  min-height:22px;
}
.day-row.weekend{background:var(--weekend)}
.day-row.holiday{background:var(--holiday)}
.day-row.today{background:var(--accent);color:var(--accent-contrast);border-color:transparent}

.wkletter{
  width:16px;height:16px;border-radius:3px;background:#e2e8f0;color:#0f172a;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:9px
}
.date{font-weight:800;font-size:11px}
.saint{
  font-size:10px;opacity:.98;line-height:1.1;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; /* 2 lignes max */
}
.weeknum{font-size:10px;color:var(--muted);text-align:center;font-weight:800}

.vac-bars{
  position:absolute;left:5px;right:5px;bottom:2px;height:6px;
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:2px;
}
.vacA,.vacB,.vacC{height:6px;border-radius:3px}
.vacA{background:var(--zoneA)} .vacB{background:var(--zoneB)} .vacC{background:var(--zoneC)}
.vacA.hidden,.vacB.hidden,.vacC.hidden{opacity:0.12;filter:grayscale(0.6)}

.controls-bottom{
  position:sticky;bottom:0;z-index:9;
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:6px 8px;background:var(--bg);border-top:1px solid var(--border);flex-wrap:wrap;
}

.zones{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.zones .cities{font-size:10px;color:var(--muted)}

.footer{padding:10px 8px;color:var(--muted);font-size:10px;text-align:center}

@media (max-width: 900px){
  .month{min-width: 92vw; max-width: 92vw;}
}