@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

*{box-sizing:border-box;margin:0;padding:0;}
:root{
  /* Vert pharmacie */
  --g0:#052e16;--g1:#064e28;--g2:#0a6b38;--g3:#16a34a;--g4:#4ade80;--gl:#dcfce7;--gm:#bbf7d0;
  /* Bleu */
  --b1:#1e3a8a;--b2:#1d4ed8;--bl:#dbeafe;--bm:#bfdbfe;
  /* Ambre */
  --a1:#78350f;--a2:#b45309;--al:#fef3c7;--am:#fde68a;
  /* Rouge */
  --r1:#7f1d1d;--r2:#dc2626;--rl:#fee2e2;--rm:#fecaca;
  /* Violet */
  --p1:#3b0764;--p2:#7c3aed;--pl:#ede9fe;
  /* Orange */
  --o1:#7c2d12;--o2:#ea580c;--ol:#ffedd5;
  /* Neutres */
  --n0:#0a0a0a;--n1:#171717;--n2:#262626;--n3:#404040;--n4:#525252;
  --n5:#737373;--n6:#a3a3a3;--n7:#d4d4d4;--n8:#e5e5e5;--n9:#f5f5f5;--nw:#ffffff;
  /* Surfaces */
  --bg:#f8f9f8;--surf:#ffffff;--surf2:#f4f6f4;--surf3:#eef0ee;
  --bdr:#e2e6e2;--bdr2:#d0d5d0;
  /* Ombres — teintées vert pharmacie, douces et premium */
  --sh1:0 1px 2px rgba(5,46,22,.06);
  --sh2:0 2px 10px rgba(5,46,22,.06),0 1px 2px rgba(5,46,22,.04);
  --sh3:0 8px 28px rgba(5,46,22,.10),0 2px 6px rgba(5,46,22,.05);
  --sh4:0 16px 50px rgba(5,46,22,.16),0 4px 12px rgba(5,46,22,.07);
  /* Easing */
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Typo */
  --ff:'Figtree',system-ui,sans-serif;
  --ffm:'Figtree',system-ui,sans-serif;
  /* Rayon */
  --r4:4px;--r6:6px;--r8:8px;--r10:10px;--r12:12px;--r16:16px;--rfull:9999px;
}

html{font-size:16px;-webkit-text-size-adjust:100%;overflow-x:hidden;}
body{font-family:var(--ff);background:var(--bg);color:var(--n1);min-height:100vh;font-size:14px;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden;}

/* ── HEADER (thème pharmacie) ─────────────────────────────────────── */
.hdr{
  background:linear-gradient(95deg, var(--g0) 0%, #08402a 50%, var(--g1) 100%);
  color:#fff;
  padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  height:58px;position:sticky;top:0;z-index:200;
  box-shadow:0 1px 0 rgba(74,222,128,.12),0 4px 20px rgba(5,46,22,.45);
  border-bottom:1px solid rgba(74,222,128,.18);
}
.hdr::before{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent 0%,rgba(74,222,128,.4) 50%,transparent 100%);
  pointer-events:none;
}
.hdr-brand{display:flex;align-items:center;gap:12px;min-width:0;}
.hdr-brand .cross{
  width:34px;height:34px;
  background:#fff url(favicon.svg) center/82% no-repeat;
  color:transparent;font-size:0;
  border-radius:9px;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  position:relative;
}
.hdr-brand .name{font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:1;letter-spacing:.005em;}
.hdr-right{display:flex;align-items:center;gap:8px;flex-shrink:0;}
.hdr-pill,.hpill{
  font-size:10px;padding:4px 11px;border-radius:var(--rfull);
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:4px;
}
.hdr-pill.green,.hpill.green{
  background:linear-gradient(135deg, var(--g3), var(--g2));
  border-color:var(--g3);
  box-shadow:0 1px 4px rgba(74,222,128,.3);
}
.sync-dot{width:7px;height:7px;border-radius:50%;background:var(--n5);transition:background .3s;flex-shrink:0;}
.sync-dot.ok{background:var(--g4);}
.sync-dot.err{background:#f87171;}
.hbtn{
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  color:rgba(255,255,255,.9);border-radius:var(--r8);
  padding:6px 12px;font-size:12px;font-weight:500;
  cursor:pointer;font-family:var(--ff);text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
  transition:background .15s;white-space:nowrap;
}
.hbtn:hover{background:rgba(255,255,255,.15);}
.hbtn.active{background:var(--g2);border-color:var(--g2);}

/* ── MENU D'EN-TÊTE COMPACT (☰) ─────────────────────────────────────
   Présent sur toutes les pages applicatives (employé, admin, planning),
   sur mobile ET ordinateur. La vitrine ne charge pas ce balisage → absente. */
.hbtn .gly{font-size:14px;line-height:1;display:inline-block;}
.hdr-burger{display:inline-flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);color:#fff;
  border-radius:var(--r8);padding:6px 9px;cursor:pointer;transition:background .15s;}
.hdr-burger:hover{background:rgba(255,255,255,.15);}
.hdr-actions{display:none;position:absolute;top:calc(100% + 6px);right:10px;
  flex-direction:column;align-items:stretch;min-width:214px;
  background:#08402a;border:1px solid rgba(74,222,128,.22);border-radius:14px;padding:8px;gap:4px;
  box-shadow:0 16px 40px rgba(0,0,0,.5);z-index:400;}
.hdr-actions.open{display:flex;}
.hdr-actions .hbtn{width:100%;justify-content:flex-start;padding:12px 14px;font-size:14px;
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.08);}
.hdr-actions .hbtn:hover{background:rgba(255,255,255,.12);}
.hdr-actions .hbtn .lbl{display:inline;}
.hdr-actions .hbtn .gly{width:18px;text-align:center;}

/* ── PAGE ────────────────────────────────────────────────────────── */
.page{padding:20px;max-width:1140px;margin:0 auto;}

/* ── CARDS ───────────────────────────────────────────────────────── */
.card{background:var(--surf);border-radius:var(--r16);border:1px solid var(--bdr);box-shadow:var(--sh2);overflow:clip;position:relative;transition:box-shadow .25s var(--ease),border-color .25s;}
.card::before{
  /* Liseré vert sur le bord supérieur, signature pharmacie */
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--g3) 0%,var(--g2) 50%,var(--g4) 100%);
  opacity:0;transition:opacity .2s;
}
.card.accent::before{opacity:1;}
.card-b{padding:16px;}
.card-hd{padding:16px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;justify-content:space-between;}
.card-hd h3{font-size:13px;font-weight:600;color:var(--n2);}

/* ── BOUTONS ─────────────────────────────────────────────────────── */
.btn{
  padding:10px 17px;border-radius:var(--r10);font-size:13px;font-weight:600;
  cursor:pointer;font-family:var(--ff);border:1px solid transparent;
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  transition:transform .15s var(--ease),box-shadow .2s,background .2s,border-color .2s,color .2s;white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-grn{background:linear-gradient(135deg,var(--g3) 0%,var(--g1) 100%);color:#fff;border-color:transparent;box-shadow:0 4px 14px rgba(10,107,56,.28);}
.btn-grn:hover{box-shadow:0 8px 22px rgba(10,107,56,.36);transform:translateY(-1px);}
.btn-out{background:var(--surf);border-color:var(--bdr2);color:var(--n2);box-shadow:var(--sh1);}
.btn-out:hover{background:var(--surf2);border-color:var(--g3);color:var(--g1);}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-xs{padding:4px 9px;font-size:11px;border-radius:var(--r6);}

/* ── CHIPS ───────────────────────────────────────────────────────── */
.chip{
  font-size:10px;padding:3px 7px;border-radius:var(--r4);
  font-weight:600;white-space:nowrap;display:inline-block;
  line-height:1.4;font-family:var(--ffm);letter-spacing:.02em;
}
.c-ph{background:var(--bl);color:var(--b1);}
.c-pr{background:var(--gl);color:var(--g0);}
.c-alt{background:var(--al);color:var(--a1);}
.c-int{background:var(--ol);color:var(--o1);}
.c-cg{background:var(--rl);color:var(--r1);}
.c-gd{background:var(--pl);color:var(--p1);}
.c-ab{background:var(--n9);color:var(--n4);}
.c-fo{background:var(--pl);color:var(--p1);}

/* ── AVATAR ──────────────────────────────────────────────────────── */
.av{
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;flex-shrink:0;font-family:var(--ffm);
}

/* ── FORMULAIRES ─────────────────────────────────────────────────── */
.fg{margin-bottom:12px;}
.fg label{display:block;font-size:11px;font-weight:600;color:var(--n5);margin-bottom:5px;text-transform:uppercase;letter-spacing:.06em;}
.fg input,.fg select,.fg textarea{
  width:100%;padding:11px 13px;
  border:1.5px solid var(--bdr2);border-radius:var(--r10);
  font-size:14px;font-family:var(--ff);background:var(--surf2);color:var(--n1);outline:none;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--g3);background:var(--surf);box-shadow:0 0 0 3px rgba(22,163,74,.14);}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;}

/* ── TABS ────────────────────────────────────────────────────────── */
.tabs{display:flex;background:var(--surf3);border-radius:var(--r12);padding:4px;gap:2px;margin-bottom:18px;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--bdr);}
.tab{
  flex:1;padding:10px 9px;text-align:center;border-radius:var(--r8);
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--n5);
  border:none;background:none;font-family:var(--ff);transition:color .2s,background .2s,box-shadow .2s;
  white-space:nowrap;
}
.tab.on{background:var(--surf);color:var(--g1);box-shadow:var(--sh2);font-weight:700;}
.tab:hover:not(.on){color:var(--g2);background:rgba(255,255,255,.55);}

/* ── NAV ROW ─────────────────────────────────────────────────────── */
.nav-row{display:flex;align-items:center;gap:6px;}
.nav-btn{
  background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r8);
  width:32px;height:32px;cursor:pointer;font-size:15px;font-family:var(--ff);
  color:var(--n3);display:flex;align-items:center;justify-content:center;
  transition:all .15s;
}
.nav-btn:hover{background:var(--surf2);border-color:var(--bdr2);}
.nav-lbl{font-size:13px;font-weight:600;color:var(--n3);min-width:140px;text-align:center;white-space:nowrap;}

/* ── MODAL ───────────────────────────────────────────────────────── */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(4,24,12,.5);z-index:500;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.modal-bg.on{display:flex;}
.modal{background:var(--surf);border:1px solid var(--bdr);border-radius:var(--r16);padding:26px;width:460px;max-width:100%;box-shadow:var(--sh4);max-height:90vh;overflow-y:auto;overscroll-behavior:contain;animation:modalIn .28s var(--ease) both;}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98);}to{opacity:1;transform:none;}}
.modal-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.modal-hd h3{font-size:15px;font-weight:700;}
.modal-close{background:var(--surf2);border:none;border-radius:50%;width:28px;height:28px;cursor:pointer;font-size:16px;color:var(--n5);display:flex;align-items:center;justify-content:center;}
.modal-close:hover{background:var(--surf3);}
.modal-act{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;padding-top:16px;border-top:1px solid var(--bdr);}

/* ── SECTION TITLE ───────────────────────────────────────────────── */
.sec-title{font-size:10px;font-weight:700;color:var(--n6);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px;}

/* ── BADGE ───────────────────────────────────────────────────────── */
.nbadge{background:var(--r2);color:#fff;border-radius:50%;width:16px;height:16px;font-size:9px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;margin-left:4px;}
.badge-ok{font-size:10px;padding:2px 8px;border-radius:var(--rfull);background:var(--gl);color:var(--g0);font-weight:600;}
.badge-no{font-size:10px;padding:2px 8px;border-radius:var(--rfull);background:var(--rl);color:var(--r1);font-weight:600;}
.badge-wait{font-size:10px;padding:2px 8px;border-radius:var(--rfull);background:var(--al);color:var(--a1);font-weight:600;}
/* Badges statut demandes — partagés employé + admin */
.req-badge{
  font-size:10px;padding:4px 9px;border-radius:var(--rfull);
  font-weight:700;font-family:var(--ff);white-space:nowrap;
  display:inline-flex;align-items:center;gap:3px;
  letter-spacing:.02em;
}
.req-badge.b-pending{background:var(--al);color:var(--a1);border:1px solid var(--am);}
.req-badge.b-approved{background:var(--gl);color:var(--g0);border:1px solid var(--gm);}
.req-badge.b-refused{background:var(--rl);color:var(--r1);border:1px solid var(--rm);}

/* ── EMPTY ───────────────────────────────────────────────────────── */
.empty{text-align:center;padding:24px;color:var(--n6);font-size:13px;}

/* ── DIVIDER ─────────────────────────────────────────────────────── */
.divider{height:1px;background:var(--bdr);margin:16px 0;}

/* ── ANIMATIONS ──────────────────────────────────────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.fade-up{animation:fadeUp .3s ease both;}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media(max-width:640px){
  .page{padding:12px;}
  .hdr{padding:0 12px;height:50px;}
  .hdr-brand .cross{width:24px;height:24px;font-size:12px;border-radius:6px;}
  .hdr-brand .name{font-size:11px;}
  .f2{grid-template-columns:1fr;}
  .f3{grid-template-columns:1fr 1fr;}
  .modal{padding:16px;}
  .btn{padding:8px 12px;font-size:12px;}
  .hbtn{padding:5px 9px;font-size:11px;}
  /* Planning table */
  .nav-lbl{min-width:90px;font-size:12px;}
  .nav-btn{width:28px;height:28px;}
}
@media(max-width:400px){
  .f3{grid-template-columns:1fr;}
  .hdr-brand .name{max-width:90px;}
}

/* ── FERIE BADGE ─────────────────────────────────────────────────── */
.ferie-badge{background:var(--pl);color:var(--p1);border-radius:var(--r4);font-size:9px;font-weight:700;padding:2px 6px;display:inline-block;}

/* ── ACCENTS PHARMACIE ───────────────────────────────────────────── */
/* Petit motif croix verte en filigrane sur les sections importantes */
.pharma-watermark{
  position:relative;
}
.pharma-watermark::after{
  content:'';position:absolute;right:14px;top:14px;
  width:60px;height:60px;background:url(favicon.svg) center/contain no-repeat;
  opacity:.06;pointer-events:none;
}

/* Titres de section avec liseré vert */
.sec-title.pharma{
  display:flex;align-items:center;gap:8px;color:var(--g1);
  font-size:11px;font-weight:700;
}
.sec-title.pharma::before{
  content:'';width:3px;height:14px;background:var(--g3);border-radius:2px;
}

/* Avatar avec halo discret pour les pharmaciens */
.av.role-ph{box-shadow:0 0 0 2px rgba(30,64,175,.15);}
.av.role-pr{box-shadow:0 0 0 2px rgba(6,95,70,.15);}
.av.role-alt{box-shadow:0 0 0 2px rgba(146,64,14,.15);}

/* Body : fond très légèrement teinté */
body{background:linear-gradient(180deg,var(--bg) 0%,#f0f5f0 100%);background-attachment:fixed;}