:root{
  --bleu:#6494bf; --bleu-d:#3c5a78; --vert:#7fae93; --vert-d:#4f7a60; --ocre:#c0883f;
  --bg:#f4f8fc; --card:#ffffff; --pale-bleu:#eef5fb; --pale-vert:#ecf4ee; --pale-ocre:#fbf0e9;
  --text:#3a444f; --muted:#7c8794; --border:#e3ecf4; --shadow:0 10px 34px rgba(60,90,120,.10);
}
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Segoe UI',-apple-system,Roboto,Helvetica,Arial,sans-serif;background:var(--bg);color:var(--text);line-height:1.55;}
a{color:var(--bleu);}
.wrap{max-width:1060px;margin:0 auto;padding:22px 18px 60px;}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:18px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:46px;height:46px;border-radius:50%;background:linear-gradient(135deg,var(--bleu),var(--vert));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1.2rem;box-shadow:0 4px 12px rgba(100,148,191,.35);}
.brand h1{font-size:1.25rem;color:var(--bleu-d);line-height:1.1;}
.brand small{color:var(--muted);font-size:.8rem;}
.pill{background:var(--pale-bleu);color:var(--bleu-d);font-weight:700;font-size:.8rem;padding:5px 12px;border-radius:50px;}

.panel{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);overflow:hidden;}
.panel-head{padding:18px 22px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;}
.panel-head h2{font-size:1.05rem;color:var(--bleu-d);}
.legend{display:flex;gap:16px;font-size:.82rem;color:var(--muted);align-items:center;flex-wrap:wrap;}
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:middle;}
.dot.v{background:var(--vert);} .dot.c{background:var(--bleu);}

.btn{border:none;border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;font-size:.88rem;cursor:pointer;}
.btn-p{background:var(--bleu);color:#fff;} .btn-g{background:#fff;border:1px solid var(--border);color:var(--muted);}
.btn-r{background:#fdecec;color:#c0392b;}
.btn-full{width:100%;background:var(--bleu);color:#fff;border:none;border-radius:12px;padding:14px;font:inherit;font-weight:700;font-size:1rem;cursor:pointer;}
.btn-back{background:none;border:none;color:var(--muted);font:inherit;cursor:pointer;font-size:.85rem;margin-top:12px;}
.hide{display:none !important;}

/* calendar */
.cal-scroll{overflow-x:auto;}
.cal{display:grid;grid-template-columns:62px repeat(5,minmax(150px,1fr));min-width:840px;}
.cal .ch{padding:12px 8px;text-align:center;font-size:.82rem;font-weight:700;color:var(--bleu-d);border-bottom:2px solid var(--border);background:#fafcfe;}
.cal .ch small{display:block;color:var(--muted);font-weight:500;font-size:.72rem;}
.cal .corner{background:#fafcfe;border-bottom:2px solid var(--border);}
.cal .hr{padding:10px 6px;font-size:.74rem;color:var(--muted);text-align:right;border-right:1px solid var(--border);border-bottom:1px solid #f0f5fa;}
.cell{border-right:1px solid #f0f5fa;border-bottom:1px solid #f0f5fa;min-height:58px;padding:5px;}
.slot-libre{height:100%;min-height:48px;border:1.5px dashed #dde7f1;border-radius:9px;color:#b8c6d6;font-size:.72rem;display:flex;align-items:center;justify-content:center;}
.appt{height:100%;min-height:48px;border-radius:9px;padding:7px 9px;cursor:pointer;color:#fff;transition:transform .15s,box-shadow .15s;position:relative;}
.appt:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.16);}
.appt.v{background:linear-gradient(135deg,var(--vert),#6aa385);}
.appt.c{background:linear-gradient(135deg,var(--bleu),#5285b3);}
.appt.e{background:linear-gradient(135deg,var(--ocre),#a8742f);}
.appt .nm{font-weight:700;font-size:.82rem;line-height:1.15;}
.appt .mt{font-size:.71rem;opacity:.92;margin-top:2px;}
.appt .ic{position:absolute;top:6px;right:7px;font-size:.78rem;}

/* drawer / modal */
.drawer-bg{position:fixed;inset:0;background:rgba(40,60,80,.45);display:none;align-items:center;justify-content:center;z-index:50;padding:16px;}
.drawer-bg.open{display:flex;}
.drawer{background:#fff;border-radius:20px;max-width:430px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden;animation:pop .25s ease;}
@keyframes pop{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}
.drawer-top{padding:20px 22px;color:#fff;position:relative;}
.drawer-top.v{background:linear-gradient(135deg,var(--vert),#6aa385);}
.drawer-top.c{background:linear-gradient(135deg,var(--bleu),#5285b3);}
.drawer-top.e{background:linear-gradient(135deg,var(--ocre),#a8742f);}
.drawer-top .when{font-size:.85rem;opacity:.9;}
.drawer-top .nm{font-size:1.4rem;font-weight:700;margin-top:3px;}
.drawer-top .badge{display:inline-block;margin-top:8px;background:rgba(255,255,255,.22);padding:3px 12px;border-radius:50px;font-size:.78rem;font-weight:600;}
.drawer-body{padding:20px 22px;}
.row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid #f0f5fa;font-size:.92rem;}
.row .ic{width:36px;height:36px;border-radius:10px;background:var(--pale-bleu);display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;}
.row a{text-decoration:none;}
.row .lbl{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;}
.drawer-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px;}
.drawer-actions .btn{width:100%;}
.close{background:none;border:none;color:#fff;font-size:1.5rem;cursor:pointer;position:absolute;top:10px;right:12px;line-height:1;z-index:5;padding:6px 10px;border-radius:8px;}
.close:hover{background:rgba(255,255,255,.18);}

/* booking */
.book{max-width:640px;margin:0 auto;}
.steps{display:flex;gap:8px;margin-bottom:18px;justify-content:center;flex-wrap:wrap;}
.step-pill{font-size:.76rem;color:var(--muted);background:#fff;border:1px solid var(--border);padding:6px 14px;border-radius:50px;}
.step-pill.on{background:var(--bleu);color:#fff;border-color:var(--bleu);}
.bcard{background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:26px;}
.bcard h3{color:var(--bleu-d);font-size:1.15rem;margin-bottom:6px;text-align:center;}
.bcard p.sub{color:var(--muted);font-size:.9rem;text-align:center;margin-bottom:20px;}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.type-card{border:2px solid var(--border);border-radius:14px;padding:22px 16px;text-align:center;cursor:pointer;transition:.2s;}
.type-card:hover{border-color:var(--bleu);transform:translateY(-3px);}
.type-card.v:hover{border-color:var(--vert);}
.type-card .em{font-size:2.2rem;}
.type-card .t{font-weight:700;margin-top:8px;color:var(--bleu-d);}
.type-card .d{font-size:.8rem;color:var(--muted);margin-top:3px;}
.weeknav{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;gap:8px;}
.weeknav button{background:#fff;border:1px solid var(--border);border-radius:10px;padding:7px 12px;cursor:pointer;font:inherit;color:var(--bleu-d);font-weight:600;}
.weeknav .lbl{font-weight:700;color:var(--bleu-d);font-size:.9rem;}
.daybar{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:16px;}
.day{flex:0 0 auto;border:1px solid var(--border);border-radius:12px;padding:10px 14px;text-align:center;cursor:pointer;font-size:.8rem;min-width:74px;transition:.15s;}
.day.on{background:var(--bleu);color:#fff;border-color:var(--bleu);}
.day b{display:block;font-size:1.05rem;}
.slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:10px;}
.slotbtn{border:1.5px solid var(--border);background:#fff;border-radius:10px;padding:11px 0;text-align:center;cursor:pointer;font:inherit;font-weight:600;color:var(--bleu-d);transition:.15s;}
.slotbtn:hover{border-color:var(--bleu);background:var(--pale-bleu);}
.field{margin-bottom:13px;}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--muted);margin-bottom:5px;}
.field input,.field textarea{width:100%;border:1.5px solid var(--border);border-radius:10px;padding:11px 13px;font:inherit;font-size:.92rem;background:var(--bg);}
.field input[type=checkbox]{width:auto;flex:0 0 auto;border-radius:4px;padding:0;}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--bleu);background:#fff;}
.recap{background:var(--pale-bleu);border-radius:12px;padding:12px 15px;font-size:.88rem;color:var(--bleu-d);margin-bottom:16px;}
.confirm{text-align:center;padding:14px;}
.confirm .big{font-size:3rem;}
.confirm h3{color:var(--vert-d);margin:8px 0;}
.note{text-align:center;color:var(--muted);font-size:.8rem;margin-top:22px;}
.msg{margin-top:12px;padding:10px;border-radius:10px;font-size:.9rem;text-align:center;display:none;}
.msg.err{background:#fdecec;color:#c0392b;display:block;}
.msg.ok{background:var(--pale-vert);color:var(--vert-d);display:block;}

/* admin tabs / login */
.tabs{display:inline-flex;background:#fff;border:1px solid var(--border);border-radius:50px;padding:5px;margin-bottom:20px;box-shadow:var(--shadow);}
.tabs button{border:none;background:none;font:inherit;font-weight:600;font-size:.9rem;color:var(--muted);padding:9px 20px;border-radius:50px;cursor:pointer;}
.tabs button.active{background:var(--bleu);color:#fff;}
.login-box{max-width:360px;margin:8vh auto 0;background:#fff;border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);padding:30px;text-align:center;}
.login-box .logo{margin:0 auto 14px;}
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:.74rem;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);padding:10px 14px;border-bottom:2px solid var(--border);}
td{padding:11px 14px;border-bottom:1px solid #f0f5fa;font-size:.9rem;}
tr:hover td{background:#fafcfe;}
.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:50px;}
.tag.v{background:var(--pale-vert);color:var(--vert-d);} .tag.c{background:var(--pale-bleu);color:var(--bleu-d);} .tag.e{background:var(--pale-ocre);color:var(--ocre);}

@media(max-width:560px){
  .cal{grid-template-columns:52px repeat(5,minmax(128px,1fr));}
  .type-grid{grid-template-columns:1fr;}
}