:root{
  --bg:#0b111c; --surface:#0f1623; --line:#1a2232;
  --label:#e6ecf5; --secondary:#a6b4c6; --tertiary:#8a99ad;
  --tint:#7ab6ff; --accent:#6ee7b7;
  --opt-g:#67f0c0; --opt-b:#82a5ff; --opt-v:#b794f6; --opt-o:#ffb86c; --opt-r:#ff6b6b; --opt-t:#44e0d0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--label);
  font:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;}
.top{padding:18px 18px 12px; border-bottom:1px solid var(--line); background:linear-gradient(180deg,#0e1522 0%,#0b111c 100%);}
.brand{font-size:20px; font-weight:700;}
.proto{margin-top:4px; color:var(--secondary); font-size:13px;}
.controls{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
.field{display:flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 10px;}
.small{font-size:12.5px; color:var(--tertiary);}
input[type="date"]{border:0;background:transparent;color:var(--label);font-size:15px;outline:none;}
.btn{appearance:none; border:1px solid var(--line); background:var(--surface); color:var(--label); padding:9px 12px; border-radius:12px; font-weight:600;}
.btn.tint{border-color:#2a3a56; background:#14243d; color:#d4e4ff;}
.btn.outline{background:transparent}
.btn.sm{padding:6px 10px; font-size:12.5px}
.btn.ghost{background:transparent; opacity:.85}
.legend{margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; color:var(--tertiary); font-size:11px;}
.legendDot{width:8px;height:8px;border-radius:999px;display:inline-block;margin-right:6px;}
.g{background:var(--opt-g);} .b{background:var(--opt-b);} .v{background:var(--opt-v);} .o{background:var(--opt-o);} .r{background:var(--opt-r);} .t{background:var(--opt-t);}

.banner{margin:12px auto; max-width:980px; padding:10px 12px; border:1px solid var(--line); border-radius:14px;
  background:linear-gradient(0deg,#0d1420, #101827); color:#cfe1ff; font-size:13px;}

.grid{padding:14px; display:grid; grid-template-columns:1fr; gap:14px; max-width:980px; margin:0 auto 24px;}
@media(min-width:820px){ .grid{grid-template-columns:1fr 1fr;} }
.card{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:12px;}
.card h2{margin:0 0 10px 0; font-size:16px; color:#dfe9ff;}
ul{list-style:none; margin:0; padding:0;}
.item{padding:10px 6px; border-top:1px solid rgba(255,255,255,0.05); cursor:pointer;}
.item:first-child{border-top:0;}
.label{font-size:15px; font-weight:600;}
.badge{font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; color:#0a0f1a; margin-left:8px;}
.bg-g{background:var(--opt-g);} .bg-b{background:var(--opt-b);} .bg-v{background:var(--opt-v);} .bg-o{background:var(--opt-o);} .bg-r{background:var(--opt-r);} .bg-t{background:var(--opt-t);}
.explain{margin-top:4px; color:var(--secondary); font-size:12.5px; line-height:1.45;}
.notes{color:var(--tertiary); font-size:12.5px;}

.mask{position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:blur(3px); display:none; align-items:flex-end; justify-content:center; z-index:999;}
.sheet{width:100%; max-width:820px; background:#0e1420; border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid var(--line); box-shadow:0 -10px 50px rgba(0,0,0,.5); max-height:86vh; overflow:auto;}
.sheetWide{max-width:980px;}
.sHead{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; position:sticky; top:0; background:#0e1420; border-bottom:1px solid var(--line);}
.sTitle{font-size:17px; font-weight:700;}
.close{appearance:none; background:#141c2a; border:1px solid var(--line); color:#e6ecf5; border-radius:10px; padding:6px 10px; font-weight:600;}
.sBody{padding:12px 16px 18px;}
.meta{color:var(--tertiary); font-size:12px;}
.sec{margin-top:12px;}
.sec h4{margin:0 0 6px 0; font-size:13px; color:#cfe1ff; letter-spacing:.2px;}
.chips{display:flex; gap:8px; flex-wrap:wrap;}
.chip{font-size:11px; padding:4px 8px; border-radius:999px; background:#142034; border:1px solid #22334c; color:#c6d6ef;}
.long{font-size:13.5px; color:#e6f0ff; line-height:1.6;}
.foot{padding:18px; text-align:center; color:var(--tertiary); font-size:12px; border-top:1px solid var(--line);}

/* ---- Calendrier par molécule ---- */
.cal{border:1px solid var(--line);border-radius:14px;background:#0c1422;padding:8px}
.calHeader{display:flex;align-items:center;justify-content:space-between;margin:-2px 0 8px 0}
.calHeader .mTitle{font-weight:700;font-size:13px;color:#cfe1ff}
.calBtn{appearance:none;border:1px solid var(--line);background:#141c2a;color:#e6ecf5;border-radius:10px;padding:3px 10px;font-weight:700}
.calHead{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-bottom:4px;color:#8ca5c7;font-size:11px;text-align:center}
.calGrid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.calCell{position:relative;border:1px solid #182236;background:#0f1a2a;border-radius:10px;min-height:34px;padding:4px;text-align:right;color:#a9b9d2;font-size:12px}
.calCell.muted{opacity:.4}
.calCell.today{outline:2px solid #7ab6ff;outline-offset:-2px}
.dot{position:absolute;left:6px;bottom:6px;width:7px;height:7px;border-radius:999px;background:#6ee7b7}
.swipeHint{color:#7aa7ff;font-size:11px;margin-top:6px;opacity:.8}

/* ---- Animations ---- */
.fadeIn{animation:fadeIn .18s ease-out}
@keyframes fadeIn{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}