:root{
    --clay:#C0410C;
    --clay-dark:#96330A;
    --clay-tint:#F6E2D8;
    --clay-tint-2:#FBEFE8;
    --ink:#241A15;
    --ink-soft:#5B4F49;
    --ink-faint:#8C7C73;
    --stone:#F3F5F2;
    --stone-2:#FFFFFF;
    --line:#E7E3DD;
    --ok:#2F6F62;
    --ok-tint:#E4EFEC;
    --warn:#C98A1A;
    --warn-tint:#FBF0DC;
    --crit:#B3261E;
    --crit-tint:#F8E5E3;
    --info:#2F5D8A;
    --info-tint:#E4ECF3;
    --radius-s:8px;
    --radius-m:14px;
    --radius-l:20px;
    --shadow: 0 1px 2px rgba(36,26,21,0.04), 0 10px 28px -14px rgba(36,26,21,0.14);
    --shadow-lift: 0 4px 10px rgba(36,26,21,0.06), 0 20px 44px -18px rgba(36,26,21,0.22);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1100px 480px at 92% -8%, rgba(192,65,12,0.05), transparent 60%),
      var(--stone);
    color:var(--ink);
    font-family:'Public Sans', -apple-system, sans-serif;
    -webkit-font-smoothing:antialiased;
    min-height:100vh;
  }
  h1,h2,h3,.serif{ font-family:'Fraunces', Georgia, serif; font-weight:520; letter-spacing:-0.01em; }
  ::selection{ background: var(--clay-tint); color:var(--clay-dark); }

  /* ===== Layout ===== */
  .app{ display:flex; min-height:100vh; }

  /* ===== Sidebar ===== */
  .sidebar{
    background: linear-gradient(180deg, #241A15 0%, #2A1F19 100%);
    color:#EDE7E2;
    padding:22px 16px 22px;
    display:flex; flex-direction:column; gap:6px;
    position:relative;
    width:240px; flex:none;
  }
  .brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 22px; }
  .brand img{ width:34px; height:34px; border-radius:9px; box-shadow:0 2px 8px rgba(0,0,0,0.3); }
  .brand-name{ font-family:'Fraunces',serif; font-size:15.5px; font-weight:600; line-height:1.15; color:#fff; }
  .brand-sub{ font-size:10.5px; color:#B7A79E; margin-top:1px; }

  .clinic-switch{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09);
    border-radius:var(--radius-s); padding:9px 11px; margin-bottom:18px; cursor:pointer;
    font-size:12.5px; color:#D8CCC5; transition:background .15s;
  }
  .clinic-switch:hover{ background:rgba(255,255,255,0.1); }
  .clinic-switch span.dot{ width:7px; height:7px; border-radius:50%; background:var(--clay); display:inline-block; margin-right:7px; box-shadow:0 0 0 3px rgba(192,65,12,0.22); }

  .nav-section-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.06em; color:#8C7C73; margin:14px 10px 6px; }
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:9px 11px; border-radius:var(--radius-s);
    font-size:13.5px; color:#D8CCC5; text-decoration:none; cursor:pointer; position:relative;
    transition: background .12s, color .12s;
  }
  .nav-item:hover{ background:rgba(255,255,255,0.05); color:#fff; }
  .nav-item.active{ background: rgba(192,65,12,0.22); color:#fff; }
  .nav-item.active::before{ content:""; position:absolute; left:-16px; top:8px; bottom:8px; width:3px; background:var(--clay); border-radius:2px; }
  .nav-item .ic{ width:17px; text-align:center; opacity:0.9; }
  .nav-item .badge{ margin-left:auto; background:var(--clay); color:#fff; font-size:10px; font-weight:700; border-radius:20px; padding:1px 6px; }

  .sidebar-foot{ margin-top:auto; padding-top:14px; border-top:1px solid rgba(255,255,255,0.08); }
  .user-chip{ display:flex; align-items:center; gap:9px; padding:8px; border-radius:var(--radius-s); cursor:pointer; }
  .user-chip:hover{ background:rgba(255,255,255,0.05); }
  .avatar{ width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--clay),#7a2707); display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; color:#fff; flex:none; }
  .user-name{ font-size:12.5px; color:#fff; line-height:1.2; }
  .user-role{ font-size:10.5px; color:#9C8C83; }

  .sidebar-close{ display:none; }

  /* ===== backdrop for mobile drawer ===== */
  .backdrop{ position:fixed; inset:0; background:rgba(20,14,11,0.45); z-index:39; opacity:0; visibility:hidden; transition:opacity .18s; }
  .backdrop.show{ opacity:1; visibility:visible; }

  /* ===== Main ===== */
  .main{ display:flex; flex-direction:column; min-width:0; flex:1; }
  .topbar{
    height:64px; background:rgba(255,255,255,0.82); backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
    display:flex; align-items:center; justify-content:space-between; padding:0 26px; gap:14px;
    position:sticky; top:0; z-index:20;
  }
  .hamburger{ display:none; }
  .search{
    display:flex; align-items:center; gap:9px; background:var(--stone); border:1px solid var(--line);
    border-radius:999px; padding:8px 14px; width:320px; color:var(--ink-soft); font-size:13px;
  }
  .search svg{ opacity:0.55; flex:none; }
  .top-actions{ display:flex; align-items:center; gap:8px; }
  .icon-btn{
    width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    border:1px solid var(--line); background:var(--stone-2); cursor:pointer; position:relative; color:var(--ink);
    transition: background .12s, transform .12s;
  }
  .icon-btn:hover{ background:var(--stone); }
  .icon-btn:active{ transform:scale(0.94); }
  .ping{ position:absolute; top:8px; right:8px; width:8px; height:8px; border-radius:50%; background:var(--clay); border:2px solid var(--stone-2); }

  /* ===== Notification dropdown ===== */
  .notif-wrap{ position:relative; }
  .notif-panel{
    position:absolute; top:50px; right:-6px; width:378px; background:var(--stone-2);
    border:1px solid var(--line); border-radius:var(--radius-l); box-shadow: var(--shadow-lift);
    overflow:hidden; opacity:0; visibility:hidden; transform:translateY(-6px) scale(0.98); transform-origin: top right;
    transition: all .16s ease; z-index:50;
  }
  .notif-wrap.open .notif-panel{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
  .notif-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 12px; }
  .notif-head h3{ font-size:15px; margin:0; }
  .notif-head .mark{ font-size:11.5px; color:var(--clay); cursor:pointer; font-weight:600; }
  .notif-tabs{ display:flex; gap:6px; padding:0 18px 12px; }
  .notif-tab{ font-size:11.5px; padding:5px 10px; border-radius:999px; background:var(--stone); color:var(--ink-soft); cursor:pointer; }
  .notif-tab.active{ background:var(--ink); color:#fff; }
  .notif-list{ max-height:360px; overflow-y:auto; }
  .notif-item{ display:flex; gap:11px; padding:12px 18px; border-top:1px solid var(--line); cursor:pointer; }
  .notif-item:hover{ background:var(--stone); }
  .notif-ico{ width:34px; height:34px; border-radius:10px; flex:none; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .notif-ico.crit{ background:var(--crit-tint); color:var(--crit); }
  .notif-ico.warn{ background:var(--warn-tint); color:var(--warn); }
  .notif-ico.info{ background:var(--info-tint); color:var(--info); }
  .notif-ico.ok{ background:var(--ok-tint); color:var(--ok); }
  .notif-body{ min-width:0; }
  .notif-title{ font-size:12.8px; font-weight:600; color:var(--ink); line-height:1.35; }
  .notif-desc{ font-size:12px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
  .notif-time{ font-size:10.5px; color:#A79A92; margin-top:4px; }
  .notif-foot{ padding:12px 18px; border-top:1px solid var(--line); text-align:center; font-size:12px; font-weight:600; color:var(--ink); cursor:pointer; }
  .notif-foot:hover{ color: var(--clay); }

  /* ===== Content ===== */
  .content{ padding:30px 32px 90px; max-width:1280px; position:relative; }
  .page-head{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; flex-wrap:wrap; gap:14px; position:relative; }
  .head-arc{ position:absolute; top:-14px; right:-6px; width:180px; height:90px; pointer-events:none; opacity:0.5; }
  .page-head h1{ font-size:27px; margin:0 0 4px; }
  .page-head .date{ font-size:13px; color:var(--ink-soft); }
  .btn{ display:inline-flex; align-items:center; gap:8px; background:var(--clay); color:#fff; border:none; border-radius:var(--radius-s); padding:10px 16px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .12s, transform .1s; }
  .btn:hover{ background:var(--clay-dark); }
  .btn:active{ transform:scale(0.97); }
  .btn.ghost{ background:var(--stone-2); color:var(--ink); border:1px solid var(--line); }
  .btn.ghost:hover{ background:var(--stone); }

  .kpi-row{ display:flex; flex-wrap:wrap; gap:16px; margin-bottom:22px; }
  .kpi{ background:var(--stone-2); border:1px solid var(--line); border-radius:var(--radius-m); padding:18px 20px; box-shadow:var(--shadow); transform:translateY(8px); animation: rise .5s ease forwards; flex:1 1 230px; min-width:0; }
  .kpi:nth-child(1){ animation-delay:.02s; }
  .kpi:nth-child(2){ animation-delay:.08s; }
  .kpi:nth-child(3){ animation-delay:.14s; }
  .kpi:nth-child(4){ animation-delay:.2s; }
  @keyframes rise{ from{ transform:translateY(8px); } to{ transform:translateY(0); } }
  @media (prefers-reduced-motion: reduce){ .kpi{ animation:none; transform:none; } }
  .kpi .label{ font-size:12px; color:var(--ink-soft); display:flex; align-items:center; justify-content:space-between; }
  .kpi .value{ font-family:'Fraunces',serif; font-size:30px; font-weight:560; margin-top:6px; }
  .kpi .delta{ font-size:11.5px; margin-top:2px; display:flex; align-items:center; gap:4px; }
  .kpi .delta.up{ color:var(--crit); }
  .kpi .delta.down{ color:var(--ok); }
  .kpi .swatch{ width:26px; height:26px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none; }
  .kpi .spark{ margin-top:8px; display:block; }

  .grid-2{ display:flex; flex-wrap:wrap; gap:18px; margin-bottom:18px; align-items:flex-start; }
  .grid-2 > .card:first-child{ flex:1.35 1 420px; min-width:0; }
  .grid-2 > .card:last-child{ flex:1 1 320px; min-width:0; }
  .card{ background:var(--stone-2); border:1px solid var(--line); border-radius:var(--radius-m); box-shadow:var(--shadow); overflow:hidden; }
  .card-head{ display:flex; align-items:center; justify-content:space-between; padding:18px 20px 4px; }
  .card-head h2{ font-size:16.5px; margin:0; }
  .card-head .see-all{ font-size:12px; color:var(--clay); font-weight:600; cursor:pointer; text-decoration:none; }
  .card-sub{ font-size:12px; color:var(--ink-soft); padding:0 20px; margin-top:-2px; }

  .stock-row{ display:flex; align-items:center; gap:13px; padding:12px 20px; border-top:1px solid var(--line); transition:background .12s; }
  .stock-row:hover{ background:var(--stone); }
  .stock-row:first-of-type{ margin-top:14px; }
  .bar{ width:4px; height:34px; border-radius:3px; flex:none; }
  .bar.crit{ background:var(--crit); }
  .bar.warn{ background:var(--warn); }
  .stock-info{ flex:1; min-width:0; }
  .stock-name{ font-size:13.3px; font-weight:600; }
  .stock-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
  .pill{ font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px; white-space:nowrap; }
  .pill.crit{ background:var(--crit-tint); color:var(--crit); }
  .pill.warn{ background:var(--warn-tint); color:var(--warn); }

  .rdv-row{ display:flex; gap:13px; padding:12px 20px; border-top:1px solid var(--line); align-items:flex-start; transition:background .12s; }
  .rdv-row:hover{ background:var(--stone); }
  .rdv-row:first-of-type{ margin-top:14px; }
  .rdv-time{ font-size:12.5px; font-weight:700; color:var(--ink); width:48px; flex:none; padding-top:1px; }
  .rdv-dot{ width:8px; height:8px; border-radius:50%; margin-top:6px; flex:none; }
  .rdv-dot.confirmed{ background:var(--ok); }
  .rdv-dot.pending{ background:var(--warn); }
  .rdv-info{ min-width:0; flex:1; }
  .rdv-patient{ font-size:13.3px; font-weight:600; }
  .rdv-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
  .rdv-status{ font-size:10.5px; font-weight:700; padding:3px 8px; border-radius:999px; white-space:nowrap; }
  .rdv-status.confirmed{ background:var(--ok-tint); color:var(--ok); }
  .rdv-status.pending{ background:var(--warn-tint); color:var(--warn); }

  .domain-card{ padding:18px 20px 20px; }
  .domain-row{ display:flex; align-items:center; gap:12px; margin-top:14px; }
  .domain-row .dname{ font-size:12.8px; font-weight:600; width:110px; flex:none; }
  .domain-row .domain-track{ flex:1; min-width:0; }
  .domain-row .domain-pct{ width:40px; flex:none; }
  .domain-track{ height:8px; background:var(--stone); border-radius:999px; overflow:hidden; }
  .domain-fill{ height:100%; border-radius:999px; width:0; transition:width 1s cubic-bezier(.2,.8,.2,1); }
  .domain-pct{ font-size:12px; color:var(--ink-soft); text-align:right; }

  .table-wrap{ margin-top:8px; overflow-x:auto; }
  table{ width:100%; border-collapse:collapse; font-size:13px; min-width:560px; }
  thead th{ text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); font-weight:600; padding:10px 20px; border-bottom:1px solid var(--line); }
  tbody td{ padding:13px 20px; border-bottom:1px solid var(--line); vertical-align:middle; }
  tbody tr{ transition:background .12s; }
  tbody tr:hover{ background:var(--stone); }
  .prod-name{ font-weight:600; }
  .prod-cat{ font-size:11.5px; color:var(--ink-soft); }
  .status-dot{ display:inline-flex; align-items:center; gap:7px; font-size:12px; font-weight:600; }
  .status-dot::before{ content:""; width:8px; height:8px; border-radius:50%; }
  .status-dot.ok::before{ background:var(--ok); }
  .status-dot.ok{ color:var(--ok); }
  .status-dot.warn::before{ background:var(--warn); }
  .status-dot.warn{ color:var(--warn); }
  .status-dot.crit::before{ background:var(--crit); }
  .status-dot.crit{ color:var(--crit); }

  .footnote{ margin-top:26px; font-size:11.5px; color:#A79A92; text-align:center; }

  /* ===== Page switcher ===== */
  .page{ display:none; }
  .page.active{ display:block; }

  /* ===== RDV: day strip & agenda ===== */
  .day-strip{ display:flex; gap:8px; margin-bottom:18px; overflow-x:auto; }
  .day-chip{ flex:none; width:56px; text-align:center; padding:8px 4px; border-radius:var(--radius-s); background:var(--stone-2); border:1px solid var(--line); font-size:11px; color:var(--ink-soft); cursor:pointer; line-height:1.5; }
  .day-chip b{ font-size:14px; color:var(--ink); font-family:'Fraunces',serif; }
  .day-chip.today{ background:var(--ink); border-color:var(--ink); color:#D8CCC5; }
  .day-chip.today b{ color:#fff; }
  .day-chip.off{ opacity:0.5; }
  .agenda{ padding:12px 20px 18px; }
  .agenda-row{ display:flex; gap:14px; padding:9px 0; }
  .agenda-time{ width:46px; flex:none; font-size:11.5px; font-weight:700; color:var(--ink-soft); padding-top:11px; }
  .agenda-card{ flex:1; border-radius:var(--radius-s); padding:10px 14px; border-left:3px solid var(--ok); background:var(--ok-tint); }
  .agenda-card.pending{ border-left-color:var(--warn); background:var(--warn-tint); }
  .agenda-card.alt{ border-left-color:var(--info); background:var(--info-tint); }
  .agenda-card.free{ border:1px dashed var(--line); background:transparent; color:var(--ink-faint); font-size:12.5px; padding:10px 14px; }
  .agenda-doc{ font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:0.03em; color:var(--ink-soft); opacity:0.8; }
  .agenda-patient{ font-size:13.3px; font-weight:600; margin-top:2px; }
  .agenda-tag{ display:inline-block; margin-top:5px; font-size:10.5px; font-weight:700; color:var(--warn); }
  .agenda-tag.tele{ color:var(--info); }

  .req-item{ display:flex; gap:11px; padding:14px 20px 8px; align-items:center; }
  .req-avatar{ width:34px; height:34px; border-radius:50%; background:var(--clay-tint); color:var(--clay-dark); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; flex:none; }
  .req-name{ font-size:13.3px; font-weight:600; }
  .req-meta{ font-size:11.5px; color:var(--ink-soft); margin-top:1px; }
  .req-actions{ display:flex; gap:8px; padding:2px 20px 16px; }

  /* ===== Stocks: domain tabs & categories ===== */
  .domain-tabs{ display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; }
  .dtab{ font-size:12.5px; font-weight:600; padding:8px 16px; border-radius:999px; background:var(--stone-2); border:1px solid var(--line); color:var(--ink-soft); cursor:pointer; }
  .dtab.active{ background:var(--ink); border-color:var(--ink); color:#fff; }
  .cat-item{ display:flex; align-items:center; justify-content:space-between; padding:11px 18px; font-size:12.8px; color:var(--ink-soft); cursor:pointer; border-top:1px solid var(--line); }
  .cat-item:first-of-type{ border-top:none; margin-top:8px; }
  .cat-item.active{ color:var(--clay-dark); font-weight:700; background:var(--clay-tint-2); }
  .cat-count{ font-size:11px; color:var(--ink-faint); background:var(--stone); border-radius:999px; padding:2px 8px; }
  .cat-item.active .cat-count{ background:#fff; color:var(--clay-dark); }

  /* ===== Dossier patient ===== */
  .pat-item{ display:flex; align-items:center; gap:11px; padding:12px 18px; cursor:pointer; border-top:1px solid var(--line); }
  .pat-item:first-of-type{ border-top:none; margin-top:8px; }
  .pat-item.active{ background:var(--clay-tint-2); }
  .pat-item .avatar{ width:36px; height:36px; font-size:13px; }
  .pat-name{ font-size:13.3px; font-weight:600; }
  .pat-meta{ font-size:11.3px; color:var(--ink-soft); margin-top:1px; }
  .patient-header{ display:flex; align-items:center; gap:14px; padding:20px 20px 16px; flex-wrap:wrap; }
  .patient-name{ font-family:'Fraunces',serif; font-size:19px; font-weight:560; }
  .patient-sub{ font-size:12.5px; color:var(--ink-soft); margin-top:2px; }
  .audit-note{ font-size:11px; color:var(--ink-faint); background:var(--stone); padding:6px 10px; border-radius:999px; white-space:nowrap; }
  .pat-tabs{ display:flex; padding:0 20px; border-bottom:1px solid var(--line); }
  .ptab{ font-size:12.8px; font-weight:600; color:var(--ink-soft); padding:0 0 12px; margin-right:22px; cursor:pointer; border-bottom:2px solid transparent; }
  .ptab.active{ color:var(--clay-dark); border-bottom-color:var(--clay); }
  .info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; padding-top:16px; }
  .info-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-faint); }
  .info-val{ font-size:13px; font-weight:600; margin-top:3px; }
  .consult-row{ display:flex; gap:16px; padding:13px 20px; border-top:1px solid var(--line); }
  .consult-date{ width:96px; flex:none; font-size:11.5px; color:var(--ink-soft); font-weight:600; padding-top:1px; }
  .consult-info b{ font-size:13px; }

  /* ===== Mobile bottom tab bar ===== */
  .tabbar{ display:none; }

  /* ===== Device preview toggle (demo aid) ===== */
  .device-toggle{ display:flex; align-items:center; gap:2px; background:var(--stone); border:1px solid var(--line); border-radius:999px; padding:3px; }
  .device-toggle button{ border:none; background:transparent; font-size:11.5px; font-weight:600; padding:6px 12px; border-radius:999px; cursor:pointer; color:var(--ink-soft); font-family:inherit; }
  .device-toggle button.active{ background:var(--ink); color:#fff; }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 980px){
    .sidebar{
      position:fixed; top:0; left:0; bottom:0; width:250px; z-index:40;
      transform:translateX(-104%); transition:transform .2s ease;
      box-shadow: 20px 0 50px rgba(0,0,0,0.25);
    }
    .sidebar.open{ transform:translateX(0); }
    .sidebar-close{ display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%; background:rgba(255,255,255,0.08); color:#fff; margin-left:auto; cursor:pointer; border:none; font-size:14px; }
    .brand{ padding-right:0; }
    .hamburger{ display:flex; }
    .search{ display:none; }
    .device-toggle{ display:none; }
    .kpi{ flex:1 1 45%; }
    .grid-2 > .card:first-child, .grid-2 > .card:last-child{ flex:1 1 100%; }
    .content{ padding:18px 16px 96px; }
    .page-head h1{ font-size:22px; }
    .head-arc{ display:none; }
    .topbar{ padding:0 14px; }

    .tabbar{
      display:flex; position:fixed; left:0; right:0; bottom:0; height:64px; background:var(--stone-2);
      border-top:1px solid var(--line); z-index:30; padding-bottom:env(safe-area-inset-bottom);
      box-shadow: 0 -6px 20px rgba(36,26,21,0.06);
    }
    .tabbar-item{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--ink-faint); font-size:10px; font-weight:600; cursor:pointer; }
    .tabbar-item .tic{ font-size:17px; }
    .tabbar-item.active{ color:var(--clay); }
  }
  @media (max-width: 560px){
    .kpi-row{ gap:10px; }
    .kpi{ padding:14px 14px; flex:1 1 45%; }
    .kpi .value{ font-size:24px; }
    .page-head{ flex-direction:column; align-items:flex-start; }
    .page-head > div:last-child{ width:100%; display:flex; }
    .page-head .btn{ flex:1; justify-content:center; }
  }

  /* ===== Phone-frame demo (device preview) ===== */
  body.demo-mobile .app{ display:none; }
  .phone-demo{ display:none; }
  body.demo-mobile .phone-demo{ display:flex; justify-content:center; padding:36px 16px 60px; }
  .phone-shell{ width:390px; height:800px; background:#111; border-radius:44px; padding:14px; box-shadow: var(--shadow-lift); }
  .phone-screen{ width:100%; height:100%; border-radius:32px; overflow:hidden; background:var(--stone); }
  .phone-screen iframe{ width:390px; height:100%; border:0; }
/* ============================================================
   PASSE 2 — Vivacité : survols lumineux, bordures colorées
   ============================================================ */

.card{
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.card:hover{
  border-color: rgba(192,65,12,0.35);
  box-shadow: 0 2px 6px rgba(36,26,21,0.06), 0 18px 40px -18px rgba(192,65,12,0.32);
  transform: translateY(-3px);
}

.kpi{
  border-top: 3px solid transparent;
  transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.kpi:hover{
  border-top-color: var(--clay);
  box-shadow: 0 2px 6px rgba(36,26,21,0.06), 0 20px 44px -20px rgba(192,65,12,0.35);
  transform: translateY(-4px);
}

.stock-row, .rdv-row{ transition: background .15s ease, transform .15s ease; }
.stock-row:hover, .rdv-row:hover{ transform: translateX(3px); }
.stock-row:hover .pill{ transform: scale(1.05); transition: transform .15s ease; }

.nav-item{ transition: background .15s ease, color .15s ease, transform .15s ease, box-shadow .15s ease; }
.nav-item:hover{ transform: translateX(3px); }
.nav-item.active{ box-shadow: inset 0 0 0 1px rgba(192,65,12,0.28); }

.icon-btn{ transition: background .15s ease, transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.icon-btn:hover{
  border-color: rgba(192,65,12,0.45);
  box-shadow: 0 0 0 5px rgba(192,65,12,0.1);
  transform: translateY(-1px);
}

.btn{ transition: background .15s ease, transform .15s ease, box-shadow .2s ease; }
.btn:hover{ box-shadow: 0 10px 24px -10px rgba(192,65,12,0.6); transform: translateY(-2px); }
.btn:active{ transform: translateY(0); }
.btn.ghost:hover{ border-color: var(--clay); color: var(--clay-dark); box-shadow: 0 8px 18px -12px rgba(192,65,12,0.3); }

.dtab, .notif-tab{ transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.dtab:hover, .notif-tab:hover{ border-color: var(--clay); color: var(--clay-dark); transform: translateY(-1px); }

.avatar{ transition: box-shadow .2s ease; }
.user-chip{ transition: background .15s ease; }
.user-chip:hover .avatar{ box-shadow: 0 0 0 4px rgba(192,65,12,0.25); }

table tbody tr{ transition: background .15s ease, box-shadow .15s ease; }
table tbody tr:hover{ box-shadow: inset 3px 0 0 var(--clay); }

.cat-item, .pat-item{ transition: background .15s ease, transform .15s ease; }
.cat-item:hover, .pat-item:hover{ transform: translateX(3px); }

.notif-item{ transition: background .15s ease, transform .15s ease; }
.notif-item:hover{ transform: translateX(2px); }

/* ===== Bandeau "session expirée" (remplace la boîte native du navigateur) ===== */
.expired-toast{
  position:fixed; top:20px; left:50%; transform:translateX(-50%) translateY(-140%);
  display:flex; align-items:center; gap:14px; background:var(--stone-2);
  border:1px solid var(--line); border-radius:var(--radius-l); box-shadow:var(--shadow-lift);
  padding:14px 16px 14px 14px; z-index:200; max-width:92vw; width:420px;
  transition: transform .35s cubic-bezier(.2,.9,.25,1.2);
}
.expired-toast.show{ transform:translateX(-50%) translateY(0); }
.expired-toast-icon{
  width:38px; height:38px; border-radius:11px; flex:none; display:flex; align-items:center;
  justify-content:center; font-size:17px; background:var(--clay-tint-2); color:var(--clay-dark);
}
.expired-toast-title{ font-size:13.3px; font-weight:700; color:var(--ink); }
.expired-toast-desc{ font-size:12px; color:var(--ink-soft); margin-top:2px; }
.expired-toast-btn{
  margin-left:auto; flex:none; background:var(--clay); color:#fff; border:none; border-radius:var(--radius-s);
  padding:9px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition: background .15s ease, transform .15s ease;
}
.expired-toast-btn:hover{ background:var(--clay-dark); transform:translateY(-1px); }

/* ===== Modales de formulaire ===== */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(20,14,11,0.45); z-index:100;
  display:flex; align-items:center; justify-content:center; padding:20px;
  animation: fadeIn .15s ease;
}
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
.modal-card{
  background:var(--stone-2); border-radius:var(--radius-l); box-shadow:var(--shadow-lift);
  width:100%; max-width:440px; padding:26px; max-height:90vh; overflow-y:auto;
  animation: modalRise .2s cubic-bezier(.2,.9,.25,1.1);
}
@keyframes modalRise{ from{ transform:translateY(12px); opacity:0; } to{ transform:translateY(0); opacity:1; } }
.modal-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.modal-head h3{ font-size:17px; margin:0; }
.modal-close{ cursor:pointer; font-size:18px; color:var(--ink-soft); background:none; border:none; line-height:1; padding:4px; }
.modal-close:hover{ color:var(--ink); }
.form-field{ margin-bottom:15px; }
.form-field label{ display:block; font-size:12px; font-weight:600; color:var(--ink-soft); margin-bottom:6px; }
.form-field input, .form-field select, .form-field textarea{
  width:100%; padding:10px 12px; border-radius:var(--radius-s); border:1px solid var(--line);
  background:var(--stone); font-size:13px; font-family:inherit; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--clay); box-shadow:0 0 0 3px rgba(192,65,12,0.12); background:#fff;
}
.form-field .field-error{ font-size:11.5px; color:var(--crit); margin-top:5px; }
.form-row{ display:flex; gap:12px; }
.form-row .form-field{ flex:1; }
.form-actions{ display:flex; gap:10px; margin-top:20px; }
.form-actions .btn{ flex:1; justify-content:center; }
.type-toggle{ display:flex; gap:8px; }
.type-toggle label{
  flex:1; text-align:center; padding:9px; border-radius:var(--radius-s); border:1px solid var(--line);
  background:var(--stone); font-size:12.5px; font-weight:600; cursor:pointer; color:var(--ink-soft);
  transition:all .15s ease;
}
.type-toggle input{ display:none; }
.type-toggle input:checked + label{ background:var(--ink); color:#fff; border-color:var(--ink); }

/* ===== Champ de recherche avec suggestions (patiente / médecin) ===== */
.search-select{ position:relative; }
.search-select input{ width:100%; }
.search-dropdown{
  position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--stone-2);
  border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:var(--shadow-lift);
  max-height:220px; overflow-y:auto; z-index:30;
}
.search-option{ padding:10px 13px; font-size:13px; cursor:pointer; }
.search-option:hover{ background:var(--stone); }
.search-option-empty{ padding:10px 13px; font-size:12.5px; color:var(--ink-faint); }
.selected-chip{
  display:inline-flex; align-items:center; gap:8px; background:var(--clay-tint-2); color:var(--clay-dark);
  font-size:12.5px; font-weight:600; padding:7px 11px; border-radius:999px; margin-top:8px;
}
.selected-chip span{ cursor:pointer; opacity:0.7; }
.selected-chip span:hover{ opacity:1; }

[x-cloak]{ display:none !important; }

/* ===== Combobox (select classique + recherche à l'intérieur) ===== */
.combo{ position:relative; }
.combo-trigger{
  display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
  padding:10px 12px; border-radius:var(--radius-s); border:1px solid var(--line);
  background:var(--stone); font-size:13px; color:var(--ink); cursor:pointer;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.combo-trigger:hover{ border-color:var(--clay); }
.combo-trigger.open{ border-color:var(--clay); box-shadow:0 0 0 3px rgba(192,65,12,0.12); background:#fff; }
.combo-trigger.placeholder span{ color:var(--ink-faint); }
.combo-trigger.disabled{ cursor:not-allowed; opacity:0.75; }
.combo-arrow{ font-size:10px; color:var(--ink-faint); transition:transform .15s ease; flex:none; }
.combo-arrow.rot{ transform:rotate(180deg); }
.combo-panel{
  position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--stone-2);
  border:1px solid var(--line); border-radius:var(--radius-s); box-shadow:var(--shadow-lift);
  z-index:30; overflow:hidden;
}
.combo-search{ padding:8px; border-bottom:1px solid var(--line); }
.combo-search input{
  width:100%; padding:8px 10px; border-radius:6px; border:1px solid var(--line);
  background:var(--stone); font-size:13px; font-family:inherit; color:var(--ink);
}
.combo-search input:focus{ outline:none; border-color:var(--clay); background:#fff; }
.combo-list{ max-height:200px; overflow-y:auto; }
.combo-option{ padding:9px 13px; font-size:13px; cursor:pointer; }
.combo-option:hover{ background:var(--stone); }
.combo-empty{ padding:10px 13px; font-size:12.5px; color:var(--ink-faint); }

/* ===== Toast de succès (remplace la carte plate de confirmation) ===== */
.flash-toast{
  position:fixed; top:20px; right:20px; z-index:150;
  display:flex; align-items:center; gap:12px; background:var(--stone-2);
  border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:var(--radius-m);
  box-shadow:var(--shadow-lift); padding:13px 18px 13px 15px; max-width:360px;
}
.flash-toast-icon{
  width:30px; height:30px; border-radius:50%; background:var(--ok-tint); color:var(--ok);
  display:flex; align-items:center; justify-content:center; font-size:14px; flex:none; font-weight:700;
}
.flash-toast-text{ font-size:13px; font-weight:600; color:var(--ink); }
.flash-toast-close{ margin-left:6px; cursor:pointer; color:var(--ink-faint); background:none; border:none; font-size:13px; flex:none; }
.flash-toast-close:hover{ color:var(--ink); }
@media (max-width:560px){
  .flash-toast{ left:16px; right:16px; top:16px; max-width:none; }
}

/* ===== Robustesse modale : jamais de blocage de clics invisible ===== */
.modal-backdrop{
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity .15s ease, visibility .15s;
}
.modal-backdrop.active{ opacity:1; visibility:visible; pointer-events:auto; }

/* ===== Vue semaine (grille 7 colonnes) ===== */
.view-toggle{ display:flex; gap:2px; background:var(--stone); border:1px solid var(--line); border-radius:999px; padding:3px; }
.view-toggle button{ border:none; background:transparent; font-size:12px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer; color:var(--ink-soft); font-family:inherit; }
.view-toggle button.active{ background:var(--ink); color:#fff; }

.week-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:18px; }
.week-col{ background:var(--stone-2); border:1px solid var(--line); border-radius:var(--radius-m); min-height:220px; overflow:hidden; }
.week-col.today-col{ border-color:var(--clay); box-shadow:0 0 0 1px var(--clay); }
.week-col-head{ padding:10px 10px 8px; border-bottom:1px solid var(--line); text-align:center; }
.week-col-head .wd{ font-size:10.5px; text-transform:uppercase; color:var(--ink-faint); letter-spacing:0.04em; }
.week-col-head .wn{ font-family:'Fraunces',serif; font-size:17px; font-weight:600; margin-top:1px; }
.week-col-body{ padding:8px; display:flex; flex-direction:column; gap:6px; max-height:340px; overflow-y:auto; }
.week-appt{ border-radius:7px; padding:6px 8px; border-left:3px solid var(--ok); background:var(--ok-tint); cursor:pointer; }
.week-appt.pending{ border-left-color:var(--warn); background:var(--warn-tint); }
.week-appt-time{ font-size:10px; font-weight:700; color:var(--ink-soft); }
.week-appt-name{ font-size:11.5px; font-weight:600; margin-top:1px; line-height:1.25; }
.week-col-empty{ font-size:11px; color:var(--ink-faint); text-align:center; padding:14px 4px; }

@media (max-width:980px){
  .week-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ===== RDV terminé / indisponibilité ===== */
.agenda-card.completed{ border-left-color:var(--ink-faint); background:var(--stone); opacity:0.75; }
.rdv-status.completed{ background:var(--stone); color:var(--ink-faint); }
.rdv-dot.completed{ background:var(--ink-faint); }

.day-chip{ position:relative; }
.day-chip.unavailable::after{
  content:""; position:absolute; top:5px; right:7px; width:6px; height:6px; border-radius:50%;
  background:var(--crit);
}
.unavailable-banner{
  display:flex; align-items:center; gap:10px; background:var(--warn-tint); color:#8a5c0f;
  border-radius:var(--radius-s); padding:11px 14px; margin-bottom:14px; font-size:12.5px; font-weight:600;
}

.week-col.unavailable-col{ background:repeating-linear-gradient(135deg, var(--stone) 0 8px, #EDE9E3 8px 16px); }
.week-col.unavailable-col .week-col-head{ background:var(--crit-tint); }
.week-col-unavail-tag{ font-size:9.5px; font-weight:700; color:var(--crit); text-align:center; padding:4px; }

/* ===== Pagination générique ===== */
.pager{ display:flex; justify-content:space-between; align-items:center; padding:10px 18px; border-top:1px solid var(--line); }
.pager .pg-info{ font-size:11px; color:var(--ink-faint); }

/* ===== Modale de confirmation (remplace confirm() du navigateur) ===== */
.confirm-icon{
  width:44px; height:44px; border-radius:50%; background:var(--crit-tint); color:var(--crit);
  display:flex; align-items:center; justify-content:center; font-size:20px; margin:0 auto 14px;
}
.confirm-text{ text-align:center; font-size:13.5px; color:var(--ink); line-height:1.5; margin-bottom:20px; }

/* ============================================================
   PASSE 3 — Chaleur et joie : accents colorés, icônes, douceur
   ============================================================ */

:root{
  --peach:#F4A15C; --peach-tint:#FDF0E1;
  --mint:#3F9E8A; --mint-tint:#E1F3EE;
  --sky:#4C8FC0; --sky-tint:#E4EFF9;
  --lavender:#8B6EC7; --lavender-tint:#EEE7F9;
  --gold:#D9A441; --gold-tint:#FBF1DD;
}

body{
  background:
    radial-gradient(1100px 480px at 92% -8%, rgba(192,65,12,0.05), transparent 60%),
    radial-gradient(700px 360px at -6% 8%, rgba(244,161,92,0.06), transparent 55%),
    var(--stone);
}

@keyframes fameFadeUp{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
.card{ animation: fameFadeUp .35s ease both; }

/* Icône colorée optionnelle devant un titre de carte — utilisation :
   <h2><span class="card-icon i-peach">📅</span>Titre</h2> */
.card-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px; font-size:14px; margin-right:9px;
  vertical-align:middle; position:relative; top:-1px;
}
.card-icon.i-peach{ background:var(--peach-tint); }
.card-icon.i-mint{ background:var(--mint-tint); }
.card-icon.i-sky{ background:var(--sky-tint); }
.card-icon.i-lavender{ background:var(--lavender-tint); }
.card-icon.i-gold{ background:var(--gold-tint); }
.card-icon.i-clay{ background:var(--clay-tint); }

/* Liseré dégradé discret sous le titre de page */
.page-head h1{ position:relative; display:inline-block; }
.page-head > div:first-child::after{
  content:""; display:block; width:46px; height:3px; border-radius:3px; margin-top:8px;
  background:linear-gradient(90deg, var(--peach), var(--clay));
}

/* Salutation avec emoji flottant (tableau de bord) */
@keyframes fameFloat{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-6px) rotate(3deg); } }
.greet-emoji{ display:inline-block; animation: fameFloat 3s ease-in-out infinite; margin-right:4px; }

/* Variante dégradée douce pour les swatch de KPI (usage optionnel) */
.kpi .swatch.grad-peach{ background:linear-gradient(135deg, var(--peach-tint), var(--peach)); color:#fff; }
.kpi .swatch.grad-mint{ background:linear-gradient(135deg, var(--mint-tint), var(--mint)); color:#fff; }
.kpi .swatch.grad-sky{ background:linear-gradient(135deg, var(--sky-tint), var(--sky)); color:#fff; }
.kpi .swatch.grad-lavender{ background:linear-gradient(135deg, var(--lavender-tint), var(--lavender)); color:#fff; }

/* Coins un peu plus doux partout, sans rien casser */
:root{ --radius-s:9px; --radius-m:16px; --radius-l:22px; }

/* ============================================================
   PASSE 4 — Plus de couleur, plus d'air : le vrai wahou
   ============================================================ */

/* Fond général nettement plus vivant */
body{
  background:
    radial-gradient(1200px 560px at 96% -10%, rgba(192,65,12,0.10), transparent 55%),
    radial-gradient(900px 480px at -8% 4%, rgba(244,161,92,0.13), transparent 55%),
    radial-gradient(700px 420px at 50% 110%, rgba(139,110,199,0.07), transparent 55%),
    var(--stone) !important;
}

/* Sidebar plus chaleureuse, avec une pointe de couleur */
.sidebar{
  background:
    radial-gradient(340px 220px at 100% 0%, rgba(244,161,92,0.16), transparent 60%),
    radial-gradient(300px 240px at 0% 100%, rgba(139,110,199,0.14), transparent 60%),
    linear-gradient(180deg, #241A15 0%, #2E211A 100%) !important;
}

/* En-tête de page : mini "hero" coloré au lieu de texte nu sur fond blanc */
.page-head{
  background:
    radial-gradient(420px 200px at 100% -30%, rgba(244,161,92,0.20), transparent 65%),
    radial-gradient(320px 200px at 0% 130%, rgba(192,65,12,0.08), transparent 65%),
    var(--stone-2);
  border:1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 22px 26px;
  box-shadow: var(--shadow);
}
.page-head > div:first-child::after{ margin-top:10px; }

/* KPI : couleur visible en permanence, pas seulement au survol */
.kpi{
  border-top: 3px solid var(--clay) !important;
  background:
    linear-gradient(180deg, rgba(244,161,92,0.05), transparent 40%),
    var(--stone-2) !important;
}
.kpi .swatch{ box-shadow: 0 4px 10px -4px rgba(36,26,21,0.25); }

/* Cartes : léger filet dégradé sous le titre, plus d'air à l'intérieur */
.card-head{ border-bottom: 1px solid var(--line); margin-bottom: 4px; padding-bottom: 14px !important; }
.card-head h2{ display:flex; align-items:center; }

/* Tableaux : plus respirés, coins ronds, lignes alternées douces, en-tête coloré */
.table-wrap{
  border-radius: var(--radius-m); overflow:hidden; border:1px solid var(--line);
  margin-top:14px;
}
table{ font-size:13.5px; }
thead th{
  padding:14px 22px !important; font-size:10.5px !important;
  background: linear-gradient(180deg, var(--clay-tint-2), var(--stone));
  color: var(--clay-dark) !important; border-bottom:1.5px solid var(--line) !important;
}
tbody td{ padding:16px 22px !important; }
tbody tr:nth-child(even){ background: rgba(243,245,242,0.55); }
tbody tr:hover{ background: var(--clay-tint-2) !important; }

/* Cartes de liste (patientes, produits, utilisateurs...) : un peu plus d'air */
.pat-item, .cat-item{ padding-top:12px !important; padding-bottom:12px !important; }

/* Boutons principaux : dégradé au lieu d'un aplat, plus de vie */
.btn:not(.ghost){
  background: linear-gradient(135deg, var(--peach), var(--clay)) !important;
  border:none !important;
  box-shadow: 0 6px 16px -6px rgba(192,65,12,0.45);
  transition: transform .12s, box-shadow .12s;
}
.btn:not(.ghost):hover{ transform:translateY(-1px); box-shadow: 0 10px 20px -6px rgba(192,65,12,0.5); }