:root{
  --bg:#F1F0EA;
  --surface:#FFFFFF;
  --border:#E7E4DE;
  --border-soft:#EFEDE8;
  --ink:#20241F;
  --ink-soft:#787E73;
  --ink-faint:#A8AC9F;
  --sage:#5C7A5F;
  --sage-tint:#E6ECE4;
  --sage-deep:#3F5941;
  --clay:#AD8963;
  --clay-tint:#F3ECE2;
  --slate:#7C8994;
  --slate-tint:#EBEEF0;
  --rose:#B0716C;
  --rose-tint:#F3E7E5;
  --radius:14px;
  --radius-sm:10px;
}

*{box-sizing:border-box;}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:14px;
  -webkit-font-smoothing:antialiased;
}

.num, .mono{
  font-family:'IBM Plex Mono', monospace;
}

.display{
  font-family:'Fraunces', serif;
}

a{ text-decoration:none; color:inherit; }

/* ---------- Layout ---------- */
.spa-shell{
  display:flex;
  min-height:100vh;
  background:#F7F7F5;
}

/* ---------- Sidebar ---------- */
.spa-sidebar{
  width:248px;
  flex-shrink:0;
  background:var(--surface);
  border-right:1px solid var(--border-soft);
  display:flex;
  flex-direction:column;
  padding:26px 18px;
  position:sticky;
  top:0;
  height:100vh;
}

.spa-logo{
  display:flex;
  align-items:center;
  gap:10px;
  padding:4px 10px 26px 10px;
  margin-bottom:18px;
  border-bottom:1px solid var(--border-soft);
  position:relative;
}

.spa-sidebar-nav{
  flex:1;
  min-height:0;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

.spa-mobile-bar{
  display:none;
}

.spa-sidebar-backdrop{
  display:none;
}

.spa-sidebar-close{
  display:none;
}

.spa-logo-mark{
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--sage);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:18px;
  flex-shrink:0;
}

.spa-logo-text{
  display:flex;
  flex-direction:column;
  line-height:1.15;
  flex:1;
  min-width:0;
}

.spa-logo-text .name{
  font-family:'Fraunces', serif;
  font-size:17px;
  font-weight:500;
  letter-spacing:0.2px;
}

.spa-logo-text .sub{
  font-size:10.5px;
  color:var(--ink-faint);
  letter-spacing:0.6px;
  text-transform:uppercase;
}

.spa-nav-label{
  font-size:10.5px;
  letter-spacing:0.8px;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding:0 12px;
  margin:14px 0 8px 0;
}

.spa-nav{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.spa-nav-item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 12px;
  border-radius:9px;
  border-left:2px solid transparent;
  color:#111111;
  font-size:13.5px;
  font-weight:500;
  transition:background .12s ease, color .12s ease;
}

.spa-nav-item i{
  font-size:16px;
  width:18px;
  text-align:center;
  color:var(--ink-faint);
}

.spa-nav-item:hover{
  background:var(--border-soft);
  color:var(--ink);
}

.spa-nav-item.active{
  background:var(--sage-tint);
  color:var(--sage-deep);
  border-left:2px solid var(--sage);
}

.spa-nav-item.active i{
  color:var(--sage-deep);
}

.spa-sidebar-footer{
  margin-top:auto;
  padding-top:16px;
  border-top:1px solid var(--border-soft);
}

.spa-user-chip{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border-radius:10px;
}

.spa-user-chip:hover{
  background:var(--border-soft);
}

.spa-user-chip .spa-user-meta{
  flex:1;
  min-width:0;
}

.spa-user-chip .uname{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.spa-logout-form{
  margin:0;
  flex-shrink:0;
}

.spa-logout-btn{
  width:32px;
  height:32px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:var(--ink-faint);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.spa-logout-btn:hover{
  background:var(--rose-tint, #f5e6e6);
  color:var(--rose, #9b4d4d);
}

.spa-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--clay-tint);
  color:var(--clay);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Fraunces', serif;
  font-size:13px;
  flex-shrink:0;
}

.spa-user-meta .uname{
  font-size:13px;
  font-weight:600;
  line-height:1.2;
}

.spa-user-meta .urole{
  font-size:11px;
  color:var(--ink-faint);
}

/* ---------- Main ---------- */
.spa-main{
  flex:1;
  min-width:0;
  padding:26px 34px 48px 34px;
  background:#F7F7F5;
}

.spa-main-inner{
  max-width:1180px;
  margin:0 auto;
}

.spa-main-inner.wide{ max-width:1120px; }

.spa-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
  gap:20px;
}

.spa-greeting .eyebrow{
  font-size:11px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:3px;
}

.spa-greeting h1{
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:23px;
  margin:0;
  color:var(--ink);
}

.spa-topbar-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.spa-search{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:8px 12px;
  width:230px;
}

.spa-search input{
  border:none;
  outline:none;
  background:transparent;
  font-size:13px;
  width:100%;
  color:var(--ink);
}

.spa-search i{ color:var(--ink-faint); font-size:14px; }

.spa-icon-btn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--surface);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--ink-soft);
  position:relative;
  flex-shrink:0;
}

.spa-icon-btn:hover{ background:var(--border-soft); }

.spa-dot{
  position:absolute;
  top:7px;
  right:7px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--rose);
}

.spa-btn-primary{
  background:var(--sage-deep);
  color:#fff;
  border:none;
  border-radius:10px;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:7px;
}

.spa-btn-primary:hover{ background:#334a35; color:#fff; }

/* ---------- Cards ---------- */
.spa-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:17px 18px;
}

.spa-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:16px;
}

.spa-card-title{
  font-family:'Inter', sans-serif;
  font-size:17px;
  font-weight:600;
  color:#000;
}

.spa-card-sub{
  font-size:13px;
  color:#000;
  margin-top:1px;
}

.spa-link-muted{
  font-size:12px;
  color:var(--ink-soft);
  font-weight:500;
}
.spa-link-muted:hover{ color:var(--sage-deep); }

/* Stat row */
.spa-stats-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:16px;
  margin-bottom:20px;
}

.spa-stat-label{
  font-size:13px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#000;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.spa-stat-icon{
  width:28px;
  height:28px;
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
}

.spa-stat-value{
  font-family:'Inter', sans-serif;
  font-size:32px;
  font-weight:700;
  margin:10px 0 6px 0;
  color:#000;
  letter-spacing:-0.3px;
}

.spa-delta{
  font-size:11.5px;
  font-weight:600;
  padding:2px 7px;
  border-radius:20px;
  display:inline-flex;
  align-items:center;
  gap:4px;
}

.spa-delta.up{ background:var(--sage-tint); color:var(--sage-deep); }
.spa-delta.down{ background:var(--rose-tint); color:var(--rose); }

/* Grid below */
.spa-content-grid{
  display:grid;
  grid-template-columns:1.65fr 1fr;
  gap:16px;
  margin-bottom:16px;
}

.spa-content-grid-lower{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:16px;
}

.spa-chart-wrap{ height:230px; }

/* Appointment list */
.spa-appt{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border-soft);
}
.spa-appt:last-child{ border-bottom:none; padding-bottom:0; }

button.spa-appt{
  width:100%;
  border:none;
  background:transparent;
  text-align:left;
  cursor:pointer;
  border-radius:10px;
  padding:10px 8px;
  margin:0 -8px;
  transition:background .12s ease;
}
button.spa-appt:hover{
  background:var(--bg);
}
button.spa-appt:last-child{ border-bottom:none; }

.spa-appt-time{
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
  width:52px;
  flex-shrink:0;
}

.spa-appt-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  background:var(--slate-tint);
  color:var(--slate);
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.spa-appt-meta{ min-width:0; flex:1; }
.spa-appt-name{ font-size:15px; font-weight:600; color:#000; }
.spa-appt-service{ font-size:13px; color:#000; }

.spa-status-pill{
  font-size:10.5px;
  font-weight:600;
  padding:3px 9px;
  border-radius:20px;
  flex-shrink:0;
}
.spa-status-pill.confirmed{ background:var(--sage-tint); color:var(--sage-deep); }
.spa-status-pill.pending{ background:var(--clay-tint); color:var(--clay); }
.spa-status-pill.active{ background:#198754; color:#fff; }
.spa-status-pill.paid{ background:#198754; color:#fff; }
.spa-status-pill.vip{ background:var(--clay-tint); color:var(--clay); }
.spa-status-pill.new{ background:var(--sage-tint); color:var(--sage-deep); }
.spa-status-pill.inactive{ background:#dc3545; color:#fff; }

.spa-price-badge{
  display:inline-block;
  font-size:12px;
  font-weight:600;
  font-family:'Inter', sans-serif;
  padding:4px 10px;
  border-radius:6px;
  color:#fff;
  white-space:nowrap;
}
.spa-price-badge.achat{ background:#dc3545; }
.spa-price-badge.vente{ background:#198754; }
.spa-price-badge.qty{ background:#0d6efd; }

/* Service rows */
.spa-service-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
}
.spa-service-row:last-child{ border-bottom:none; padding-bottom:0; }

.spa-service-name{ font-size:14.5px; font-weight:600; color:#000; }
.spa-service-count{ font-size:12.5px; color:#000; }

.spa-bar-track{
  height:5px;
  border-radius:4px;
  background:var(--border-soft);
  width:70px;
  overflow:hidden;
}
.spa-bar-fill{ height:100%; border-radius:4px; background:var(--sage); }

/* Staff list */
.spa-staff-row{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 0;
  border-bottom:1px solid var(--border-soft);
}
.spa-staff-row:last-child{ border-bottom:none; padding-bottom:0; }

.spa-staff-avatar{
  width:30px; height:30px; border-radius:50%;
  background:var(--rose-tint); color:var(--rose);
  font-family:'Inter', sans-serif; font-weight:600; font-size:11.5px;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}

.spa-staff-name{ font-size:14.5px; font-weight:600; color:#000; }
.spa-staff-role{ font-size:12.5px; color:#000; }

.spa-staff-num{
  margin-left:auto;
  font-family:'IBM Plex Mono', monospace;
  font-size:12px;
  color:var(--ink-soft);
}

/* ---------- Data table (Clients) ---------- */
.spa-table-card{ padding:18px 18px 8px 18px; }

.spa-table-filters{
  display:flex;
  gap:6px;
}

.spa-chip{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:12px;
  font-weight:500;
  padding:5px 12px;
  border-radius:20px;
}

.spa-chip:hover{ background:var(--border-soft); }

.spa-chip.active{
  background:var(--ink);
  border-color:var(--ink);
  color:#fff;
}

.spa-table{
  width:100%;
  border-collapse:collapse;
}

.spa-table thead th{
  text-align:left;
  font-size:10.5px;
  letter-spacing:0.5px;
  text-transform:uppercase;
  color:#000;
  font-weight:600;
  padding:0 12px 10px 12px;
  border-bottom:1px solid var(--border);
}

.spa-table thead th:first-child{ padding-left:4px; }

.spa-table tbody td{
  padding:12px;
  border-bottom:1px solid var(--border-soft);
  vertical-align:middle;
  font-family:'Inter', sans-serif;
  font-size:13.5px;
  font-weight:500;
  color:#000;
}

.spa-table tbody td:first-child{ padding-left:4px; }
.spa-table tbody td.mono{ font-family:'Inter', sans-serif; font-size:13.5px; color:#000; }

.spa-table tbody tr:hover{ background:var(--bg); }
.spa-table tbody tr:last-child td{ border-bottom:none; }

.spa-table .spa-t-name,
.spa-table .spa-t-sub,
.spa-table .spa-tx-lignes li,
.spa-table .spa-tx-lignes .spa-t-sub{
  color:#000;
}

.spa-t-client{
  display:flex;
  align-items:center;
  gap:10px;
}

.spa-t-avatar{
  width:32px;
  height:32px;
  border-radius:50%;
  font-family:'Inter', sans-serif;
  font-weight:600;
  font-size:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.spa-t-name{ font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500; color:var(--ink); }
.spa-t-sub{ font-family:'Inter', sans-serif; font-size:11.5px; font-weight:500; color:var(--ink-faint); margin-top:1px; }

.spa-t-contact div:first-child{ font-family:'Inter', sans-serif; font-size:13.5px; font-weight:500; color:var(--ink); }

.spa-row-action{
  width:32px;
  height:32px;
  border-radius:8px;
  border:none;
  background:transparent;
  color:var(--ink-faint);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:16px;
  transition:opacity .12s ease, transform .12s ease;
}
.spa-row-action:hover{ opacity:0.88; transform:translateY(-1px); }

.spa-row-action-edit{
  background:#20241F;
  color:#fff;
}
.spa-row-action-edit:hover{
  background:#20241F;
  color:#fff;
}

.spa-row-action-pay{
  background:var(--sage-deep);
  color:#fff;
}
.spa-row-action-pay:hover{
  background:var(--sage-deep);
  color:#fff;
}

.spa-row-action-view{
  background:var(--sage-deep);
  color:#fff;
  text-decoration:none;
}
.spa-row-action-view:hover{
  background:var(--sage-deep);
  color:#fff;
}

.spa-pay-summary{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin:0 0 16px;
  padding:12px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}

.spa-pay-summary-item{
  text-align:center;
}

.spa-pay-summary-label{
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:4px;
}

.spa-pay-summary-value{
  display:block;
  font-size:14.5px;
  font-weight:600;
  font-family:'Inter', sans-serif;
  color:#000;
}

.spa-pay-summary-value.reste{
  color:#dc3545;
}

.spa-pay-summary-value.paid{
  color:var(--sage-deep);
}

.spa-reste{
  font-size:12.5px;
  color:#dc3545;
  font-weight:600;
}

.spa-versements-list{
  margin:0 0 16px;
  padding:0;
  list-style:none;
  max-height:140px;
  overflow-y:auto;
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
}

.spa-versements-list li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 12px;
  font-size:13px;
  border-bottom:1px solid var(--border-soft);
}

.spa-versements-list li:last-child{ border-bottom:none; }

.spa-versements-empty{
  padding:14px 12px;
  text-align:center;
  color:var(--ink-faint);
  font-size:13px;
}

.spa-row-action-delete{
  background:#C44536;
  color:#fff;
}
.spa-row-action-delete:hover{
  background:#C44536;
  color:#fff;
}

.spa-table-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 4px;
}

.spa-pagination{
  display:flex;
  align-items:center;
  gap:4px;
}

.spa-page-btn{
  min-width:28px;
  height:28px;
  padding:0 6px;
  border-radius:7px;
  border:1px solid transparent;
  background:transparent;
  color:var(--ink-soft);
  font-size:12px;
  font-family:'IBM Plex Mono', monospace;
}

.spa-page-btn:hover:not(:disabled){ background:var(--border-soft); }
.spa-page-btn.active{ background:var(--ink); color:#fff; }
.spa-page-btn:disabled{ color:var(--ink-faint); opacity:0.5; }
a.spa-page-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.spa-row-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}

.spa-row-actions form{ margin:0; }

.spa-empty{
  text-align:center;
  color:#000;
  padding:36px 12px !important;
}

.spa-flash{
  font-size:13px;
  border-radius:var(--radius-sm);
  padding:10px 14px;
  margin:0 0 16px 0;
}

.spa-flash.success{
  color:var(--sage-deep);
  background:var(--sage-tint);
  border:1px solid color-mix(in srgb, var(--sage) 28%, transparent);
}

.spa-flash.error{
  color:#9b2c2c;
  background:#fde8e8;
  border:1px solid #f5c2c2;
}

.spa-btn-ghost{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:13px;
  font-weight:600;
  padding:10px 16px;
  border-radius:var(--radius-sm);
}

.spa-btn-ghost:hover{ background:var(--border-soft); color:var(--ink); }

.spa-modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(28, 32, 28, 0.42);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  z-index:50;
}

.spa-modal-backdrop[hidden]{ display:none; }

.spa-modal{
  width:100%;
  max-width:440px;
  max-height:min(92vh, 720px);
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px;
  box-shadow:0 24px 60px rgba(28, 32, 28, 0.16);
}

.spa-modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:18px;
}

.spa-modal-head h2{
  margin:0;
  font-family:'Fraunces', serif;
  font-size:22px;
  font-weight:500;
  color:var(--ink);
}

.spa-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:8px;
}

.spa-modal-wide{
  max-width:520px;
}

.spa-tx-edit-modal{
  max-width:560px;
}

.spa-tx-edit-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

.spa-tx-edit-lines{
  display:flex;
  flex-direction:column;
  gap:10px;
  max-height:280px;
  overflow:auto;
  margin-top:8px;
  padding:4px 2px 8px;
}

.spa-tx-edit-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:28px 12px;
  color:var(--ink-faint);
  text-align:center;
  border:1px dashed var(--border);
  border-radius:var(--radius-sm);
  background:var(--surface);
}

.spa-tx-edit-empty i{ font-size:22px; opacity:0.55; }
.spa-tx-edit-empty p{ margin:0; font-size:13px; }

.spa-tx-edit-add{
  display:flex;
  gap:8px;
  align-items:stretch;
  margin-top:10px;
}

.spa-tx-edit-add .spa-field-control{
  flex:1;
}

.spa-tx-edit-total{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:16px 0 4px;
  padding:12px 14px;
  background:var(--sage-tint);
  border-radius:var(--radius-sm);
  font-size:14px;
  color:var(--ink);
}

.spa-tx-edit-total strong{
  font-family:'Inter', sans-serif;
  font-size:18px;
  font-weight:700;
  color:var(--sage-deep);
}

@media (max-width:560px){
  .spa-tx-edit-meta{
    grid-template-columns:1fr;
  }
  .spa-tx-edit-add{
    flex-direction:column;
  }
}

.spa-confirm-backdrop{
  z-index:80;
}

.spa-confirm-modal{
  max-width:400px;
  text-align:center;
  padding:28px 24px 22px;
}

.spa-confirm-icon{
  width:52px;
  height:52px;
  margin:0 auto 14px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(196, 69, 54, 0.12);
  color:#C44536;
  font-size:22px;
}

.spa-confirm-modal h2{
  margin:0 0 8px;
  font-family:'Fraunces', serif;
  font-size:22px;
  font-weight:500;
  color:var(--ink);
}

.spa-confirm-message{
  margin:0 0 22px;
  font-size:14px;
  line-height:1.5;
  color:var(--ink-soft);
}

.spa-confirm-actions{
  justify-content:center;
  margin-top:0;
}

.spa-btn-danger{
  background:#C44536;
  color:#fff;
  border:none;
  border-radius:10px;
  padding:9px 16px;
  font-size:13px;
  font-weight:600;
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
}

.spa-btn-danger:hover{
  background:#a8372b;
  color:#fff;
}

.spa-field-label-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}

.spa-field-label-row .spa-field-label{
  margin-bottom:0;
}

.spa-link-btn{
  border:0;
  background:none;
  padding:0;
  font:inherit;
  font-size:12px;
  color:var(--sage-deep);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}

.spa-privilege-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
  padding:12px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  background:var(--surface-soft, #faf9f7);
}

.spa-privilege-check{
  margin:0;
}

.spa-privilege-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  max-width:320px;
}

.spa-privilege-tag{
  display:inline-flex;
  align-items:center;
  padding:3px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.3;
  color:var(--sage-deep);
  background:var(--sage-tint);
}

.spa-switch{
  display:inline-flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
  user-select:none;
  margin-top:4px;
}

.spa-switch input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.spa-switch-track{
  position:relative;
  width:46px;
  height:26px;
  border-radius:999px;
  background:#c9cfc9;
  transition:background .2s ease;
  flex-shrink:0;
}

.spa-switch-thumb{
  position:absolute;
  top:3px;
  left:3px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 3px rgba(28,32,28,.25);
  transition:transform .2s ease;
}

.spa-switch input:checked + .spa-switch-track{
  background:var(--sage-deep);
}

.spa-switch input:checked + .spa-switch-track .spa-switch-thumb{
  transform:translateX(20px);
}

.spa-switch input:focus-visible + .spa-switch-track{
  outline:2px solid var(--sage-deep);
  outline-offset:2px;
}

.spa-switch-text{
  font-size:14px;
  font-weight:500;
  color:var(--sage-deep);
}

.spa-switch-text.is-inactive{
  color:var(--ink-faint);
}

@media (max-width: 1180px){
  .spa-stats-row{ grid-template-columns:repeat(2,1fr); }
  .spa-content-grid{ grid-template-columns:1fr; }
  .spa-content-grid-lower{ grid-template-columns:1fr; }
}

/* ---------- Mobile shell / off-canvas nav ---------- */
@media (max-width: 860px){
  body.spa-nav-locked{
    overflow:hidden;
  }

  .spa-shell{
    flex-direction:column;
  }

  .spa-mobile-bar{
    display:flex;
    align-items:center;
    gap:12px;
    position:sticky;
    top:0;
    z-index:90;
    background:var(--surface);
    border-bottom:1px solid var(--border-soft);
    padding:10px 14px;
    min-height:56px;
  }

  .spa-nav-toggle{
    width:40px;
    height:40px;
    border:1px solid var(--border);
    border-radius:10px;
    background:var(--surface);
    color:var(--ink);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    flex-shrink:0;
    cursor:pointer;
  }

  .spa-nav-toggle:hover{
    background:var(--border-soft);
  }

  .spa-mobile-brand{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .spa-mobile-brand .spa-logo-mark{
    width:30px;
    height:30px;
    font-size:15px;
    border-radius:8px;
  }

  .spa-mobile-brand .name{
    font-family:'Fraunces', serif;
    font-size:16px;
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .spa-sidebar-backdrop{
    display:block;
    position:fixed;
    inset:0;
    z-index:95;
    background:rgba(32, 36, 31, 0.42);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
    border:0;
    padding:0;
    cursor:pointer;
  }

  .spa-shell.sidebar-open .spa-sidebar-backdrop{
    opacity:1;
    pointer-events:auto;
  }

  .spa-sidebar{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    width:min(288px, 86vw);
    height:100vh;
    height:100dvh;
    z-index:100;
    transform:translateX(-105%);
    transition:transform .24s ease;
    box-shadow:none;
    overflow:hidden;
  }

  .spa-shell.sidebar-open .spa-sidebar{
    transform:translateX(0);
    box-shadow:8px 0 32px rgba(32, 36, 31, 0.14);
  }

  .spa-sidebar-close{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    margin-left:auto;
    border:0;
    border-radius:8px;
    background:transparent;
    color:var(--ink-soft);
    font-size:16px;
    cursor:pointer;
    flex-shrink:0;
  }

  .spa-sidebar-close:hover{
    background:var(--border-soft);
    color:var(--ink);
  }

  .spa-logo{
    padding-right:4px;
  }

  .spa-main{
    padding:18px 16px 36px 16px;
  }

  .spa-topbar{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    margin-bottom:20px;
  }

  .spa-greeting h1{
    font-size:20px;
  }

  .spa-topbar-actions{
    flex-wrap:wrap;
    width:100%;
  }

  .spa-search{
    width:100%;
    order:-1;
    flex:1 1 100%;
  }

  .spa-topbar-actions .spa-btn-primary,
  .spa-topbar-actions .spa-btn-ghost{
    flex:1 1 auto;
    justify-content:center;
  }

  .spa-table-card,
  .spa-card:has(.spa-table){
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .spa-table{
    min-width:560px;
  }

  .spa-table-footer{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }

  .spa-table-filters{
    flex-wrap:wrap;
  }

  .spa-card-head{
    flex-wrap:wrap;
    gap:10px;
  }

  .spa-pointage-filters .spa-search{
    width:100%;
  }

  .spa-pointage-filters select,
  .spa-pointage-filters input[type="date"]{
    flex:1 1 140px;
    min-width:0;
  }
}

@media (max-width: 560px){
  .spa-stats-row{ grid-template-columns:1fr; }

  .spa-greeting h1{ font-size:18px; }

  .spa-btn-primary span.hide-xs,
  .spa-topbar-actions .spa-btn-primary{
    font-size:12.5px;
    padding:9px 12px;
  }

  .spa-card{ padding:14px; }
}

/* ---------- Login ---------- */
.spa-login{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  min-height:100vh;
  background:var(--bg);
}

.spa-login-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:48px 40px;
  position:relative;
}

.spa-login-brand{
  background:
    radial-gradient(ellipse 80% 60% at 20% 80%, rgba(92,122,95,0.18), transparent 55%),
    radial-gradient(ellipse 70% 50% at 90% 10%, rgba(173,137,99,0.12), transparent 50%),
    linear-gradient(165deg, #E8EBE4 0%, var(--bg) 45%, #EDE8E0 100%);
  overflow:hidden;
}

.spa-login-brand-inner{
  max-width:420px;
  position:relative;
  z-index:1;
  animation: spa-login-rise 0.7s ease both;
}

.spa-login-logo{
  border-bottom:none;
  margin-bottom:36px;
  padding:0;
}

.spa-login-logo .spa-logo-mark{
  width:44px;
  height:44px;
  font-size:22px;
  border-radius:12px;
  animation: spa-login-mark 0.8s ease both;
}

.spa-login-logo .name{ font-size:22px; }
.spa-login-logo .sub{ font-size:12px; }

.spa-login-headline{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(28px, 3.2vw, 38px);
  line-height:1.2;
  letter-spacing:-0.3px;
  color:var(--ink);
  margin:0 0 14px 0;
}

.spa-login-lead{
  font-size:15px;
  line-height:1.55;
  color:var(--ink-soft);
  margin:0;
  max-width:340px;
}

.spa-login-glow{
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(92,122,95,0.22), transparent 70%);
  bottom:-80px;
  right:-60px;
  animation: spa-login-drift 12s ease-in-out infinite alternate;
  pointer-events:none;
}

.spa-login-form-wrap{
  background:var(--surface);
  border-left:1px solid var(--border-soft);
}

.spa-login-form{
  width:100%;
  max-width:360px;
  animation: spa-login-rise 0.7s ease 0.12s both;
}

.spa-login-form .eyebrow{
  font-size:11px;
  letter-spacing:0.6px;
  text-transform:uppercase;
  color:var(--ink-faint);
  margin-bottom:8px;
}

.spa-login-form-title{
  font-family:'Inter', sans-serif;
  font-size:24px;
  font-weight:600;
  color:var(--ink);
  margin:0 0 6px 0;
}

.spa-login-form-sub{
  font-size:13px;
  color:var(--ink-soft);
  margin:0 0 18px 0;
}

.spa-login-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  padding:4px;
  margin:0 0 22px 0;
  background:var(--border-soft);
  border-radius:var(--radius-sm);
}

.spa-login-tab{
  border:0;
  background:transparent;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:600;
  padding:10px 12px;
  border-radius:calc(var(--radius-sm) - 2px);
  cursor:pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.spa-login-tab.active{
  background:#fff;
  color:var(--ink);
  box-shadow:0 1px 2px rgba(40, 35, 30, 0.08);
}

.spa-login-error{
  font-size:13px;
  color:#9b2c2c;
  background:#fde8e8;
  border:1px solid #f5c2c2;
  border-radius:var(--radius-sm);
  padding:10px 12px;
  margin:0 0 18px 0;
}

.spa-field{
  display:block;
  margin-bottom:16px;
}

.spa-field-label{
  display:block;
  font-size:12px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:7px;
}

.spa-field-control{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:11px 14px;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}

.spa-field-control:focus-within{
  border-color:var(--sage);
  box-shadow:0 0 0 3px var(--sage-tint);
  background:var(--surface);
}

.spa-field-control i{
  color:var(--ink-faint);
  font-size:15px;
  flex-shrink:0;
}

.spa-field-control input,
.spa-field-control select{
  border:none;
  outline:none;
  background:transparent;
  width:100%;
  font-size:14px;
  color:var(--ink);
  font-family:inherit;
}

.spa-field-control input::placeholder{ color:var(--ink-faint); }

.spa-login-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:4px 0 22px 0;
}

.spa-check{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  color:var(--ink-soft);
  cursor:pointer;
  user-select:none;
}

.spa-check input{
  width:15px;
  height:15px;
  accent-color:var(--sage-deep);
  cursor:pointer;
}

.spa-pack-services{
  margin:0 0 16px;
}

.spa-pack-hint,
.spa-pack-empty{
  margin:4px 0 10px;
  font-size:12px;
  color:var(--ink-faint);
}

.spa-pack-list{
  display:flex;
  flex-direction:column;
  gap:6px;
  max-height:180px;
  overflow:auto;
  padding:8px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  background:var(--surface-soft, #faf9f7);
}

.spa-pack-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:8px 10px;
  border-radius:8px;
  cursor:pointer;
  transition:background 0.12s ease;
}

.spa-pack-item:hover{
  background:rgba(0,0,0,0.03);
}

.spa-pack-item input{
  margin-top:2px;
  width:15px;
  height:15px;
  accent-color:var(--sage-deep);
  cursor:pointer;
  flex-shrink:0;
}

.spa-pack-item-body{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.spa-pack-item-name{
  font-size:13px;
  font-weight:500;
  color:var(--ink);
}

.spa-pack-item-meta{
  font-size:12px;
  color:var(--ink-faint);
  font-variant-numeric:tabular-nums;
}

.spa-pack-calc{
  margin-top:10px;
  width:100%;
  justify-content:center;
}

.spa-login-submit{
  width:100%;
  justify-content:center;
  padding:12px 18px;
  font-size:14px;
  border-radius:var(--radius-sm);
  transition:background 0.15s ease, transform 0.15s ease;
}

.spa-login-submit:hover{
  transform:translateY(-1px);
}

@keyframes spa-login-rise{
  from{ opacity:0; transform:translateY(14px); }
  to{ opacity:1; transform:translateY(0); }
}

@keyframes spa-login-mark{
  from{ opacity:0; transform:scale(0.85); }
  to{ opacity:1; transform:scale(1); }
}

@keyframes spa-login-drift{
  from{ transform:translate(0,0); }
  to{ transform:translate(-24px,-18px); }
}

@media (max-width: 900px){
  .spa-login{
    grid-template-columns:1fr;
  }
  .spa-login-brand{
    min-height:auto;
    padding:36px 28px 28px;
  }
  .spa-login-headline{ font-size:26px; }
  .spa-login-form-wrap{
    border-left:none;
    border-top:1px solid var(--border-soft);
    align-items:flex-start;
    padding-top:36px;
  }
}

/* ---------- POS / Caisse ---------- */
.spa-pos{
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  background:#F7F7F5;
}

.spa-pos-header{
  position:relative;
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px 22px;
  background:var(--surface);
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}

.spa-pos-brand{
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
  z-index:1;
}

.spa-pos-brand .spa-logo-text .sub{
  text-transform:none;
  letter-spacing:0.2px;
}

.spa-pos-shortcuts{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:2px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:12px;
  padding:4px;
  z-index:1;
}

.spa-pos-shortcut{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 14px;
  border-radius:9px;
  font-size:13px;
  font-weight:500;
  color:#000;
  white-space:nowrap;
  transition:background .12s ease;
}

.spa-pos-shortcut i{
  font-size:15px;
  color:#000;
}

.spa-pos-shortcut:hover{
  background:var(--border-soft);
  color:#000;
}

.spa-pos-shortcut:hover i{ color:#000; }

.spa-pos-header-right{
  margin-left:auto;
  flex-shrink:0;
  z-index:1;
  display:flex;
  align-items:center;
  gap:12px;
}

.spa-pos-rdv-wrap{
  position:relative;
  z-index:5;
}

.spa-pos-rdv-search{
  width:240px;
}

.spa-pos-rdv-results{
  position:absolute;
  top:calc(100% + 6px);
  right:0;
  width:360px;
  max-height:340px;
  overflow:auto;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 12px 32px rgba(32,36,31,0.12);
  padding:6px;
}

.spa-pos-rdv-item{
  width:100%;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  background:transparent;
  padding:10px;
  border-radius:10px;
  cursor:pointer;
  font-family:inherit;
  text-align:left;
  color:inherit;
}

.spa-pos-rdv-item:hover{
  background:var(--bg);
}

.spa-pos-rdv-avatar{
  width:36px;
  height:36px;
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:700;
  flex-shrink:0;
}

.spa-pos-rdv-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.spa-pos-rdv-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spa-pos-rdv-meta{
  font-size:11px;
  color:var(--ink-soft);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spa-pos-rdv-reste{
  font-size:13px;
  font-weight:700;
  color:var(--sage-deep);
  flex-shrink:0;
}

.spa-pos-rdv-empty{
  padding:16px 12px;
  text-align:center;
  font-size:13px;
  color:var(--ink-soft);
}

.spa-pos-rdv-actions{
  flex-wrap:wrap;
}

.spa-pos-rdv-actions .spa-btn-primary{
  margin-left:auto;
}

.spa-pos-user{
  padding:4px 6px 4px 4px;
  border:1px solid var(--border-soft);
  border-radius:12px;
  background:var(--surface);
}

.spa-pos-user:hover{ background:var(--border-soft); }

.spa-pos-flash{
  margin:12px 22px 0;
  flex-shrink:0;
}

.spa-pos-body{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:220px 1fr 460px;
  gap:16px;
  padding:16px 22px 22px;
}

.spa-pos-tickets-panel,
.spa-pos-catalog,
.spa-pos-cart{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  min-height:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.spa-pos-catalog-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 16px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}

.spa-pos-tabs{
  display:flex;
  gap:4px;
  background:var(--bg);
  padding:4px;
  border-radius:10px;
}

.spa-pos-tab{
  border:0;
  background:transparent;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:600;
  padding:7px 14px;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
}

.spa-pos-tab.active{
  background:var(--surface);
  color:var(--sage-deep);
  box-shadow:0 1px 2px rgba(32,36,31,0.06);
}

.spa-pos-search{ width:220px; }

.spa-pos-grid{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:14px;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
  align-content:start;
}

.spa-pos-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-align:center;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:var(--radius-sm);
  padding:16px 12px 14px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .12s ease, background .12s ease, transform .12s ease;
}

.spa-pos-tile:hover{
  border-color:var(--sage);
  background:var(--sage-tint);
}

.spa-pos-tile:active{ transform:scale(0.98); }

.spa-pos-tile-shake{ animation: spa-pos-shake 0.35s ease; }

@keyframes spa-pos-shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-4px); }
  75%{ transform:translateX(4px); }
}

.spa-pos-tile-avatar{
  width:56px;
  height:56px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:16px;
  flex-shrink:0;
}

.spa-pos-tile-name{
  font-size:13.5px;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  text-align:center;
  width:100%;
}

.spa-pos-tile-meta{
  display:flex;
  justify-content:center;
}

.spa-pos-tile-price{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--sage-deep);
}

.spa-pos-tile-price span{
  font-size:10px;
  font-weight:500;
  color:var(--ink-faint);
}

.spa-pos-empty{
  grid-column:1 / -1;
  padding:48px 20px;
  text-align:center;
  color:var(--ink-faint);
  font-size:13.5px;
}

.spa-pos-cart-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px 0;
  flex-shrink:0;
}

.spa-pos-clear{
  padding:5px 10px;
  font-size:12px;
}

.spa-pos-client-row{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px 16px 0;
  flex-shrink:0;
}

.spa-pos-tickets-panel{
  flex-shrink:0;
}

.spa-pos-tickets-head{
  padding:16px 14px 12px;
  border-bottom:1px solid var(--border-soft);
  flex-shrink:0;
}

.spa-pos-tickets-list{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.spa-pos-tickets-empty{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:24px 12px;
  text-align:center;
  color:var(--ink-faint);
}

.spa-pos-tickets-empty i{ font-size:22px; opacity:0.55; }
.spa-pos-tickets-empty p{ margin:0; font-size:12.5px; line-height:1.35; }

.spa-pos-ticket{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  text-align:left;
  padding:10px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  background:#fff;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .12s ease, background .12s ease;
}

.spa-pos-ticket:hover{
  border-color:var(--sage);
  background:var(--sage-tint);
}

.spa-pos-ticket.active{
  border-color:var(--sage);
  background:var(--sage-tint);
  box-shadow:inset 3px 0 0 var(--sage);
}

.spa-pos-ticket-avatar{
  width:36px;
  height:36px;
  border-radius:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:12px;
  flex-shrink:0;
}

.spa-pos-ticket-body{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}

.spa-pos-ticket-name{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spa-pos-ticket-meta{
  font-size:11px;
  color:var(--ink-faint);
}

.spa-pos-ticket-total{
  font-family:'Inter', sans-serif;
  font-size:12px;
  font-weight:700;
  color:var(--sage-deep);
  margin-top:2px;
}

.spa-pos-actions{
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:8px;
}

.spa-pos-later,
.spa-pos-checkout{
  width:100%;
  justify-content:center;
  padding:11px 12px;
  font-size:13px;
}

.spa-pos-later:disabled,
.spa-pos-checkout:disabled,
.spa-pos-tx-btn:disabled{
  opacity:0.45;
  cursor:not-allowed;
}

.spa-pos-tx-btn{
  width:100%;
  justify-content:center;
  margin-top:8px;
  padding:10px 12px;
}

.spa-pos-body.is-locked{
  pointer-events:none;
  opacity:0.55;
  filter:grayscale(0.15);
}

.spa-pos-session-modal{ max-width:400px; }
.spa-pos-session-lead{
  margin:0 0 16px;
  font-size:13.5px;
  color:var(--ink-soft);
}

.spa-pos-open-actions{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:8px;
}

.spa-pos-open-actions .spa-btn-primary,
.spa-pos-open-actions .spa-btn-ghost{
  width:100%;
  justify-content:center;
}

.spa-pos-back-dash{
  order:1;
}

.spa-pos-open-actions .spa-btn-primary{
  order:0;
}

.spa-pos-tx-modal{
  max-width:520px;
  max-height:min(92vh, 820px);
  display:flex;
  flex-direction:column;
}

.spa-pos-tx-summary{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px;
  margin-bottom:14px;
}

.spa-pos-tx-stat{
  background:var(--bg);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.spa-pos-tx-stat span{
  font-size:11px;
  color:var(--ink-faint);
  text-transform:uppercase;
  letter-spacing:0.4px;
}

.spa-pos-tx-stat strong{
  font-family:'Inter', sans-serif;
  font-size:15px;
  font-weight:700;
  color:var(--ink);
}

.spa-pos-tx-stat.total{
  grid-column:1 / -1;
  background:var(--sage-tint);
  border-color:transparent;
}

.spa-pos-tx-stat.total strong{ color:var(--sage-deep); }

.spa-pos-tx-list{
  flex:1;
  min-height:120px;
  max-height:240px;
  overflow:auto;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  padding:6px;
  margin-bottom:14px;
}

.spa-pos-tx-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 8px;
  border-bottom:1px solid var(--border-soft);
}

.spa-pos-tx-item:last-child{ border-bottom:none; }

.spa-pos-tx-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
}

.spa-pos-tx-meta{
  font-size:11.5px;
  color:var(--ink-faint);
  margin-top:2px;
}

.spa-pos-tx-amount{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--sage-deep);
  white-space:nowrap;
}

.spa-pos-tx-empty{
  padding:28px 12px;
  text-align:center;
  color:var(--ink-faint);
  font-size:13px;
}

.spa-pos-tx-close-box{
  border-top:1px solid var(--border-soft);
  padding-top:14px;
}

.spa-pos-tx-close-title{
  font-size:14px;
  font-weight:600;
  margin-bottom:6px;
}

.spa-pos-tx-attendu{
  font-size:12.5px;
  color:var(--ink-soft);
  margin-bottom:12px;
}

.spa-pos-tx-attendu strong{
  color:var(--sage-deep);
  font-family:'Inter', sans-serif;
}

.spa-pos-tx-ecart{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border-radius:var(--radius-sm);
  margin-bottom:12px;
  font-size:13px;
  background:var(--bg);
}

.spa-pos-tx-ecart.surplus,
.spa-pos-tx-ecart.minus{
  background:#dc2626;
  color:#fff;
}

.spa-pos-tx-ecart.even{
  background:#16a34a;
  color:#fff;
}

.spa-pos-tx-ecart.surplus strong,
.spa-pos-tx-ecart.minus strong,
.spa-pos-tx-ecart.even strong{
  color:#fff;
}

.spa-pos-tx-close-btn{
  width:100%;
  justify-content:center;
}

.spa-pos-success-icon.surplus,
.spa-pos-success-icon.minus{
  background:#dc2626;
  color:#fff;
}

.spa-pos-success-icon.even{
  background:#16a34a;
  color:#fff;
}

.spa-pos-client-field{
  flex:1;
  min-width:0;
  padding:0;
  margin-bottom:0;
}

.spa-pos-add-client{
  flex-shrink:0;
  margin-bottom:1px;
  width:42px;
  height:42px;
  border-radius:var(--radius-sm);
  background:var(--sage-tint);
  border-color:var(--sage);
  color:var(--sage-deep);
}

.spa-pos-add-client:hover{
  background:var(--sage);
  color:#fff;
}

.spa-pos-optional{
  font-weight:400;
  color:var(--ink-faint);
}

.spa-pos-cart-lines{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:12px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.spa-pos-cart-empty{
  height:100%;
  min-height:160px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  color:var(--ink-faint);
  text-align:center;
}

.spa-pos-cart-empty i{ font-size:28px; opacity:0.55; }
.spa-pos-cart-empty p{ margin:0; font-size:13px; }

.spa-pos-line{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:10px 12px;
  align-items:center;
  padding:12px;
  background:#fff;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
}

.spa-pos-line-avatar{
  width:44px;
  height:44px;
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:14px;
  flex-shrink:0;
  grid-row:1 / 3;
}

.spa-pos-line-top{
  display:flex;
  align-items:flex-start;
  gap:8px;
  min-width:0;
}

.spa-pos-line-info{
  flex:1;
  min-width:0;
}

.spa-pos-line-name{
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.spa-pos-line-meta{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:3px;
  font-size:11.5px;
  color:var(--ink-faint);
}

.spa-pos-line-unit{
  font-family:'Inter', sans-serif;
  font-weight:700;
  color:var(--sage-deep);
}

.spa-pos-line-remove{
  width:28px;
  height:28px;
  border:0;
  background:transparent;
  color:var(--ink-faint);
  border-radius:7px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.spa-pos-line-remove:hover{
  background:var(--rose-tint);
  color:var(--rose);
}

.spa-pos-line-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.spa-pos-line-qty{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:'Inter', sans-serif;
  font-weight:600;
}

.spa-pos-qty-btn{
  width:26px;
  height:26px;
  border:1px solid var(--border);
  background:var(--surface);
  border-radius:7px;
  color:var(--ink);
  font-size:14px;
  line-height:1;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.spa-pos-qty-btn:hover{ background:var(--border-soft); }

.spa-pos-line-total{
  font-family:'Inter', sans-serif;
  font-size:13px;
  font-weight:700;
  color:var(--sage-deep);
  text-align:right;
}

.spa-pos-cart-footer{
  border-top:1px solid var(--border-soft);
  padding:14px 16px 16px;
  flex-shrink:0;
  background:linear-gradient(180deg, #FBFBFA 0%, var(--surface) 100%);
}

.spa-pos-total-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.spa-pos-total-row span{
  font-size:13px;
  color:var(--ink-soft);
  font-weight:500;
}

.spa-pos-total-row strong{
  font-family:'Inter', sans-serif;
  font-size:22px;
  font-weight:700;
  color:var(--sage-deep);
  letter-spacing:-0.3px;
}

.spa-pos-pay-modes{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:6px;
  margin-bottom:12px;
}

.spa-pos-pay{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink-soft);
  font-size:12.5px;
  font-weight:600;
  padding:8px 6px;
  border-radius:8px;
  cursor:pointer;
  font-family:inherit;
}

.spa-pos-pay:hover{ background:var(--border-soft); }

.spa-pos-pay.active{
  background:var(--sage-tint);
  border-color:var(--sage);
  color:var(--sage-deep);
}

.spa-pos-success-backdrop{
  z-index:80;
  animation: spa-pos-fade-in 0.2s ease;
}

.spa-pos-success-card{
  width:100%;
  max-width:380px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:18px;
  padding:32px 28px 26px;
  text-align:center;
  box-shadow:0 28px 70px rgba(28, 32, 28, 0.18);
  animation: spa-pos-success-pop 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.spa-pos-success-icon{
  width:64px;
  height:64px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--sage-tint);
  color:var(--sage-deep);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:30px;
  animation: spa-pos-success-check 0.45s ease 0.08s both;
}

.spa-pos-success-eyebrow{
  font-size:11px;
  font-weight:600;
  letter-spacing:0.7px;
  text-transform:uppercase;
  color:var(--sage);
  margin-bottom:6px;
}

.spa-pos-success-title{
  margin:0 0 8px;
  font-family:'Fraunces', serif;
  font-size:26px;
  font-weight:500;
  color:var(--ink);
}

.spa-pos-success-lead{
  margin:0 0 18px;
  font-size:13.5px;
  color:var(--ink-soft);
}

.spa-pos-success-amount{
  font-family:'Inter', sans-serif;
  font-size:34px;
  font-weight:700;
  color:var(--sage-deep);
  letter-spacing:-0.4px;
  margin-bottom:18px;
}

.spa-pos-success-meta{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:14px 16px;
  margin-bottom:20px;
  background:var(--bg);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  text-align:left;
}

.spa-pos-success-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:13px;
}

.spa-pos-success-row span{ color:var(--ink-faint); }
.spa-pos-success-row strong{
  font-weight:600;
  color:var(--ink);
  text-align:right;
}

.spa-pos-success-btn{
  width:100%;
  justify-content:center;
  padding:12px 16px;
}

@keyframes spa-pos-fade-in{
  from{ opacity:0; }
  to{ opacity:1; }
}

@keyframes spa-pos-success-pop{
  from{ opacity:0; transform:translateY(12px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

@keyframes spa-pos-success-check{
  from{ opacity:0; transform:scale(0.6); }
  to{ opacity:1; transform:scale(1); }
}

@media (max-width: 980px){
  .spa-pos-body{
    grid-template-columns:1fr;
    overflow:auto;
  }
  .spa-pos-tickets-panel{ max-height:220px; }
  .spa-pos-catalog{ min-height:420px; }
  .spa-pos-cart{ min-height:380px; }
  .spa-pos-shortcut span{ display:none; }
  .spa-pos-search{ width:160px; }
  .spa-pos-rdv-search{ width:180px; }
  .spa-pos-rdv-results{ width:300px; }
}

/* —— Transactions —— */
.spa-tx-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
  white-space:nowrap;
}
.spa-tx-badge.solid.green{
  background:#198754;
  color:#fff;
}
.spa-tx-badge.solid.red{
  background:#dc3545;
  color:#fff;
}
.spa-tx-badge.solid.slate{
  background:var(--slate);
  color:#fff;
  text-decoration:none;
}

.spa-pointage-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.spa-pointage-filters .spa-search{
  width:220px;
}

.spa-pointage-filters select,
.spa-pointage-filters input[type="date"]{
  height:40px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--surface);
  padding:0 10px;
  font:inherit;
  font-size:13px;
  color:var(--ink);
}

.spa-pointage-detail-modal{
  max-width:560px;
}

.spa-pointage-detail-meta{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:10px;
  margin-bottom:14px;
}

.spa-pointage-detail-meta div{
  padding:10px 12px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  background:var(--surface-soft, #faf9f7);
}

.spa-pointage-detail-meta span{
  display:block;
  font-size:11px;
  color:var(--ink-faint);
  margin-bottom:4px;
}

.spa-pointage-detail-meta strong{
  font-size:13px;
  color:var(--ink);
  font-weight:600;
}

.spa-pointage-detail-section-title{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-size:13px;
  font-weight:600;
  color:var(--ink);
  margin:4px 0 8px;
}

.spa-pointage-tx-item{
  align-items:flex-start;
}

.spa-pointage-detail-modal .spa-pos-tx-name,
.spa-pointage-detail-modal .spa-pos-tx-meta,
.spa-pointage-detail-modal .spa-pos-tx-amount,
.spa-pointage-detail-modal .spa-pointage-tx-lignes,
.spa-pointage-detail-modal .spa-pointage-tx-lignes .spa-t-sub{
  color:var(--ink);
  font-weight:700;
}

.spa-pointage-tx-lignes{
  margin:6px 0 0;
  padding:0;
  list-style:none;
  font-size:12px;
}

.spa-pointage-tx-lignes li{
  margin-bottom:2px;
}

.spa-pointage-close-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-bottom:10px;
}

.spa-pointage-close-grid div{
  padding:10px 12px;
  border:1px solid var(--border-soft);
  border-radius:var(--radius-sm);
  background:var(--surface);
}

.spa-pointage-close-grid span{
  display:block;
  font-size:11px;
  color:var(--ink-faint);
  margin-bottom:4px;
}

.spa-pointage-close-grid strong{
  font-size:14px;
  color:var(--ink);
}

@media (max-width: 640px){
  .spa-pointage-detail-meta,
  .spa-pointage-close-grid{
    grid-template-columns:1fr;
  }
}

.spa-tx-avatar-open{
  background:#198754 !important;
  color:#fff !important;
}
.spa-tx-avatar-closed{
  background:#dc3545 !important;
  color:#fff !important;
}

.spa-tx-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:18px;
}
.spa-tx-meta-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:180px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  color:#fff;
}
.spa-tx-meta-card.green{ background:#198754; }
.spa-tx-meta-card.red{ background:#dc3545; }
.spa-tx-meta-card.muted{ background:#6c757d; }
.spa-tx-meta-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.78);
}
.spa-tx-meta-card strong{
  font-size:15px;
  font-weight:700;
  color:#fff;
}
.spa-tx-meta-sub{
  font-size:12px;
  color:rgba(255,255,255,0.82);
}

.spa-tx-summary{
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:10px;
  margin-bottom:20px;
}
.spa-tx-stat-card{
  display:flex;
  flex-direction:column;
  gap:6px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  color:#fff;
}
.spa-tx-stat-card.green{ background:#198754; }
.spa-tx-stat-card.red{ background:#dc3545; }
.spa-tx-stat-card span{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:rgba(255,255,255,0.78);
}
.spa-tx-stat-card strong{
  font-family:'Inter', sans-serif;
  font-size:16px;
  font-weight:700;
  color:#fff;
}
.spa-tx-stat-card.total strong{
  font-size:18px;
}

.spa-tx-lignes{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.spa-tx-lignes li{
  font-size:12.5px;
  color:var(--ink-soft);
}

@media (max-width: 900px){
  .spa-tx-summary{
    grid-template-columns:repeat(2, 1fr);
  }
  .spa-tx-stat-card.total{
    grid-column:1 / -1;
  }
}

/* ===== Rapports ===== */
.spa-rapport-filters{
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.spa-rapport-custom{
  display:flex;
  align-items:center;
  gap:8px;
}

.spa-rapport-custom input[type="date"]{
  border:1px solid var(--border);
  background:var(--surface);
  color:#000;
  font-size:12.5px;
  font-family:'Inter', sans-serif;
  padding:6px 10px;
  border-radius:10px;
}

.spa-chip{
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  cursor:pointer;
}

.spa-rapport-kpis{
  grid-template-columns:repeat(4, 1fr);
}

.spa-chart-lg{ height:280px; }
.spa-chart-md{ height:220px; }
.spa-chart-sm{ height:180px; }

.spa-rapport-scroll{
  max-height:280px;
  overflow:auto;
}

.spa-rapport-lower{
  grid-template-columns:0.9fr 1.2fr 1.2fr;
}

@media (max-width: 1180px){
  .spa-rapport-kpis{ grid-template-columns:repeat(2, 1fr); }
  .spa-rapport-lower{ grid-template-columns:1fr; }
  .spa-rapport-filters{ justify-content:flex-start; }
}

/* ---------- Reservation calendar ---------- */
.spa-cal-layout{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 300px;
  gap:18px;
  align-items:start;
}

.spa-cal-card{
  padding:18px 18px 14px;
}

.spa-cal-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.spa-cal-nav{
  display:flex;
  align-items:center;
  gap:8px;
}

.spa-cal-nav-btn,
.spa-cal-today-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--ink);
  border-radius:10px;
  text-decoration:none;
  transition:background .12s ease, border-color .12s ease;
}

.spa-cal-nav-btn{
  width:36px;
  height:36px;
}

.spa-cal-today-btn{
  height:36px;
  padding:0 12px;
  font-size:13px;
  font-weight:600;
}

.spa-cal-nav-btn:hover,
.spa-cal-today-btn:hover{
  background:var(--bg);
  border-color:var(--sage);
}

.spa-cal-month{
  margin:0;
  font-size:22px;
  font-weight:500;
  color:var(--ink);
  text-transform:capitalize;
}

.spa-cal-count{
  font-size:13px;
  color:var(--ink-soft);
  font-weight:500;
  min-width:110px;
  text-align:right;
}

.spa-cal-weekdays{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
  margin-bottom:6px;
}

.spa-cal-weekdays span{
  text-align:center;
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--ink-faint);
  padding:4px 0;
}

.spa-cal-grid{
  display:grid;
  grid-template-columns:repeat(7, 1fr);
  gap:6px;
}

.spa-cal-day{
  min-height:108px;
  background:var(--bg);
  border:1px solid transparent;
  border-radius:12px;
  padding:8px;
  cursor:pointer;
  transition:border-color .12s ease, background .12s ease, box-shadow .12s ease;
}

.spa-cal-day:hover{
  border-color:var(--border);
  background:var(--surface);
}

.spa-cal-day.muted{
  opacity:0.42;
}

.spa-cal-day.today{
  background:var(--sage-tint);
  border-color:rgba(92,122,95,0.25);
}

.spa-cal-day.selected{
  border-color:var(--sage);
  box-shadow:0 0 0 3px var(--sage-tint);
  background:var(--surface);
}

.spa-cal-day-num{
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-soft);
  margin-bottom:6px;
}

.spa-cal-day.today .spa-cal-day-num{
  color:var(--sage-deep);
}

.spa-cal-events{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.spa-cal-event{
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  border:none;
  border-radius:7px;
  padding:4px 6px;
  font-size:11px;
  text-align:left;
  cursor:pointer;
  line-height:1.2;
}

.spa-cal-event.confirmed{
  background:var(--sage);
  color:#fff;
}

.spa-cal-event.reschedule{
  background:var(--clay-tint);
  color:var(--clay);
}

.spa-cal-event.cancelled{
  background:var(--rose-tint);
  color:var(--rose);
}

.spa-cal-event-time{
  font-weight:700;
  flex-shrink:0;
}

.spa-cal-event-name{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:500;
}

.spa-cal-more{
  border:none;
  background:transparent;
  color:var(--ink-soft);
  font-size:11px;
  font-weight:600;
  padding:2px 4px;
  cursor:pointer;
  text-align:left;
}

.spa-cal-legend{
  display:flex;
  gap:16px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--border-soft);
  font-size:12px;
  color:var(--ink-soft);
}

.spa-cal-legend .dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:50%;
  margin-right:6px;
  vertical-align:middle;
}

.spa-cal-legend .dot.confirmed{ background:var(--sage); }
.spa-cal-legend .dot.reschedule{ background:var(--clay); }
.spa-cal-legend .dot.cancelled{ background:var(--rose); }

.spa-cal-side{
  padding:16px;
  position:sticky;
  top:18px;
}

.spa-cal-side-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:calc(100vh - 220px);
  overflow:auto;
}

.spa-cal-side-empty{
  padding:24px 8px;
  text-align:center;
  color:var(--ink-faint);
  font-size:13px;
}

.spa-cal-side-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:100%;
  border:1px solid var(--border-soft);
  background:var(--bg);
  border-radius:12px;
  padding:10px 12px;
  cursor:pointer;
  text-align:left;
  transition:border-color .12s ease, background .12s ease;
}

.spa-cal-side-item:hover{
  border-color:var(--sage);
  background:var(--surface);
}

.spa-cal-side-time{
  font-size:12px;
  font-weight:700;
  color:var(--sage-deep);
  min-width:42px;
  padding-top:2px;
}

.spa-cal-side-body{
  flex:1;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:2px;
}

.spa-cal-event-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  margin-top:6px;
  flex-shrink:0;
}

.spa-cal-event-dot.confirmed{ background:var(--sage); }
.spa-cal-event-dot.reschedule{ background:var(--clay); }
.spa-cal-event-dot.cancelled{ background:var(--rose); }

.spa-cal-detail-hero{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:16px;
}

.spa-cal-detail-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-bottom:16px;
}

.spa-cal-detail-meta > div{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px;
}

.spa-topbar-actions .spa-btn-ghost{
  display:inline-flex;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

.spa-topbar-actions .spa-btn-primary{
  text-decoration:none;
}

@media (max-width: 1100px){
  .spa-cal-layout{
    grid-template-columns:1fr;
  }
  .spa-cal-side{
    position:static;
  }
  .spa-cal-side-list{
    max-height:280px;
  }
  .spa-cal-day{
    min-height:88px;
  }
}

@media (max-width: 720px){
  .spa-cal-event-name{ display:none; }
  .spa-cal-day{ min-height:72px; padding:6px; }
  .spa-cal-month{ font-size:18px; }
}

/* ---------- Paramètres ---------- */
.spa-settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}

.spa-settings-card{
  padding:0 0 22px;
}

.spa-settings-card .spa-card-head{
  margin-bottom:6px;
}

.spa-settings-form{
  padding:0 22px;
}

.spa-settings-form .spa-field-control{
  background:#fff;
  border:1px solid var(--border);
}

.spa-settings-form .spa-field-control:focus-within{
  background:#fff;
  border-color:var(--sage);
  box-shadow:0 0 0 3px var(--sage-tint);
}

.spa-settings-form .spa-field-control input,
.spa-settings-form .spa-field-control textarea{
  color:#000;
}

.spa-settings-form .spa-field-control input::placeholder,
.spa-settings-form .spa-field-control textarea::placeholder{
  color:var(--ink-faint);
}

.spa-settings-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.spa-field-control-textarea{
  align-items:flex-start;
}

.spa-field-control-textarea i{
  margin-top:3px;
}

.spa-field-control textarea{
  border:none;
  outline:none;
  background:transparent;
  width:100%;
  font-size:14px;
  color:var(--ink);
  font-family:inherit;
  resize:vertical;
  min-height:72px;
  line-height:1.45;
}

.spa-field-control textarea::placeholder{ color:var(--ink-faint); }

.spa-settings-actions{
  display:flex;
  justify-content:flex-end;
  margin-top:6px;
}

@media (max-width: 980px){
  .spa-settings-grid{
    grid-template-columns:1fr;
  }
  .spa-settings-row{
    grid-template-columns:1fr;
  }
}