/* ---------- Themes ---------- */
/* "natural" aussi sur :root (fallback pages sans data-theme). */
:root,
[data-theme="natural"] {
  --bg-sidebar: #0F2419;
  --bg-sidebar-active: #050E07;
  --fg-sidebar: #F1E9D4;
  --fg-sidebar-muted: #8C9B8E;
  --modal-head-bg: #0F2419;
  --modal-head-fg: #F1E9D4;
  --modal-head-fg-muted: #8C9B8E;
  --check-fill: var(--green);
  --check-ink: #FFFFFF;
  --glass-blur: blur(32px) saturate(1.6);
  --glass-bg: color-mix(in srgb, var(--bg-elevated) 86%, transparent);
  --modal-glass: color-mix(in srgb, color-mix(in srgb, var(--bg-elevated) 84%, white) 66%, transparent);
  --modal-blur: blur(48px) saturate(1.9);
  --modal-foot-bg: color-mix(in srgb, var(--bg-subtle) 88%, transparent);
  --bg: #F5EFE0;
  --bg-elevated: #FBF8EE;
  --bg-card: #FFFFFF;
  --bg-subtle: #EFE7D2;
  --bg-input: #FDFBF3;
  --bg-hover: #F0E8D2;
  --border: #E6DCC2;
  --border-strong: #D8CCAE;
  --fg: #0F2419;
  --fg-muted: #6B7268;
  --fg-subtle: #9CA39C;
  --accent: #C9A95E;
  --accent-soft: #F0E4C2;
  --green: #2D7A4F;
  --green-soft: #E1ECDC;
  --red: #C44545;
  --red-soft: #F5DCD7;
  --orange: #E89A3C;
  --orange-soft: #FAEAD0;
  --blue: #4B85C9;
  --blue-soft: #DDE8F2;
  --notif-bg: rgba(15, 36, 25, 0.70);
  --notif-fg: #F1E9D4;
  --shadow-sm: 0 1px 2px rgba(15, 36, 25, 0.05);
  --shadow-md: 0 4px 16px rgba(15, 36, 25, 0.08);
  --shadow-lg: 0 12px 40px rgba(15, 36, 25, 0.14);
  /* Ombre portée très légère et diffuse sous les contrôles (look macOS). */
  --shadow-control: 0 1px 1.5px rgba(15, 36, 25, 0.06), 0 2px 7px rgba(15, 36, 25, 0.05);
  /* Bouton principal (thème naturel) : vert du menu, un cran plus clair. */
  --btn-primary-bg: #16331F;
  --btn-primary-bg-hover: #1E4429;
  --btn-primary-bg-active: #0E2716;
  --btn-primary-fg: #F1E9D4;
  --btn-primary-border: transparent;
}

[data-theme="light"] {
  --bg-sidebar: #FFFFFF;
  --bg-sidebar-active: #ECECE8;
  --fg-sidebar: #1A1D1B;
  --fg-sidebar-muted: #8A8C88;
  --modal-head-bg: #F0F0EE;
  --modal-head-fg: #1B201D;
  --modal-head-fg-muted: #73766F;
  --check-fill: var(--accent);
  --check-ink: #FFFFFF;
  --glass-blur: blur(32px) saturate(1.5);
  --glass-bg: color-mix(in srgb, var(--bg-elevated) 78%, transparent);
  --modal-glass: color-mix(in srgb, var(--bg-elevated) 64%, transparent);
  --modal-blur: blur(48px) saturate(1.8);
  --modal-foot-bg: color-mix(in srgb, #F0F0EE 86%, transparent);
  --bg: #F9F9F8;
  --bg-elevated: #FFFFFF;
  --bg-card: #FFFFFF;
  --bg-subtle: #F1F1EF;
  --bg-input: #FFFFFF;
  --bg-hover: #EEEEEB;
  --border: #E7E6E2;
  --border-strong: #D5D4CE;
  --fg: #181B19;
  --fg-muted: #6A6E68;
  --fg-subtle: #9D9F9A;
  --accent: #B89656;
  --accent-soft: #F1EBD8;
  --green: #2D7A4F;
  --green-soft: #DCEAD9;
  --red: #C44545;
  --red-soft: #F5DCD7;
  --orange: #E89A3C;
  --orange-soft: #FAEAD0;
  --blue: #4B85C9;
  --blue-soft: #DCE7F1;
  --notif-bg: rgba(255, 255, 255, 0.72);
  --notif-fg: #181B19;
  --shadow-sm: 0 1px 2px rgba(22, 24, 22, 0.04);
  --shadow-md: 0 4px 16px rgba(22, 24, 22, 0.06);
  --shadow-lg: 0 12px 40px rgba(22, 24, 22, 0.10);
  /* Ombre portée très légère et diffuse sous les contrôles (look macOS). */
  --shadow-control: 0 1px 1.5px rgba(22, 24, 22, 0.05), 0 2px 7px rgba(22, 24, 22, 0.045);
  /* Bouton principal (thème clair) : accent doré, sans bordure. */
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 88%, black);
  --btn-primary-bg-active: color-mix(in srgb, var(--accent) 76%, black);
  --btn-primary-fg: #FFFFFF;
  --btn-primary-border: transparent;
}

[data-theme="dark"] {
  color-scheme: dark;
  --bg-sidebar: #060707;
  --bg-sidebar-active: #1B1D1C;
  --fg-sidebar: #E7E3D6;
  --fg-sidebar-muted: #7A7972;
  --modal-head-bg: #060707;
  --modal-head-fg: #E7E3D6;
  --modal-head-fg-muted: #7A7972;
  --check-fill: var(--accent);
  /* Thème sombre : le doré est clair → encre foncée sur les fonds dorés */
  --check-ink: #2A2208;
  --glass-blur: blur(32px) saturate(1.5);
  --glass-bg: color-mix(in srgb, var(--bg-elevated) 72%, transparent);
  --modal-glass: color-mix(in srgb, color-mix(in srgb, var(--bg-elevated) 86%, white) 64%, transparent);
  --modal-blur: blur(48px) saturate(1.7);
  --modal-foot-bg: color-mix(in srgb, var(--bg-subtle) 82%, transparent);
  --bg: #0F0F0F;
  --bg-elevated: #181918;
  --bg-card: #1C1D1C;
  --bg-subtle: #212220;
  --bg-input: #252624;
  --bg-hover: #242523;
  --border: #2C2D2B;
  --border-strong: #3B3C39;
  --fg: #EAE6DB;
  --fg-muted: #9A9890;
  --fg-subtle: #6A6962;
  --accent: #D4B97D;
  --accent-soft: #3A3320;
  --green: #5DA87A;
  --green-soft: #1F3324;
  --red: #D86A6A;
  --red-soft: #3A1F1F;
  --orange: #E8A858;
  --orange-soft: #3A2A14;
  --blue: #7AA8DC;
  --blue-soft: #1C2A3A;
  --notif-bg: rgba(10, 11, 10, 0.72);
  --notif-fg: #EAE6DB;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.5);
  /* Ombre portée très légère et diffuse sous les contrôles (look macOS). */
  --shadow-control: 0 1px 2px rgba(0, 0, 0, 0.32), 0 2px 8px rgba(0, 0, 0, 0.26);
  /* Bouton principal (thème sombre) : accent doré clair → texte foncé pour le contraste. */
  --btn-primary-bg: var(--accent);
  --btn-primary-bg-hover: color-mix(in srgb, var(--accent) 88%, black);
  --btn-primary-bg-active: color-mix(in srgb, var(--accent) 76%, black);
  --btn-primary-fg: #1A1D1B;
  --btn-primary-border: transparent;
}

/* ---------- Base ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--fg);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
  transition: background-color 0.3s ease, color 0.3s ease;
}
#root { height: 100%; }

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
  padding: 0;
}
input, select, textarea {
  font: inherit;
  color: inherit;
}
a { color: inherit; text-decoration: none; }

/* ---------- App layout ---------- */
.app {
  display: flex;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  display: flex;
  flex-direction: column;
  padding: 28px 16px 16px;
  border-right: 1px solid var(--border);
  transition: background-color 0.3s ease;
  container-type: inline-size;
  container-name: sidebar;
  position: relative;
  z-index: 20;
  overflow: visible;
}
.sidebar-bottom { overflow: visible; }

.brand {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 8px 18px;
  margin-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
}
.brand-mark {
  width: 30px;
  height: 30px;
  background: var(--accent);
  -webkit-mask: url(assets/logo/logo-mark.png) center / contain no-repeat;
  mask: url(assets/logo/logo-mark.png) center / contain no-repeat;
  flex-shrink: 0;
  display: none;
}
.brand-word {
  width: 112px;
  height: 30px;
  background: var(--accent);
  -webkit-mask: url(assets/logo/logo-wordmark.png) left center / contain no-repeat;
  mask: url(assets/logo/logo-wordmark.png) left center / contain no-repeat;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 14px;
  border-radius: 10px;
  color: var(--fg-sidebar-muted);
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease;
  position: relative;
  text-align: left;
  width: 100%;
}
.nav-item:hover {
  color: var(--fg-sidebar);
  background: color-mix(in srgb, var(--fg-sidebar) 6%, transparent);
}
.nav-item.active {
  background: var(--bg-sidebar-active);
  color: var(--fg-sidebar);
}
.nav-item.active::before {
  content: '';
  position: absolute;
  left: -16px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.nav-item svg { width: 18px; height: 18px; flex-shrink: 0; }

.sidebar-bottom {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.user-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 8px;
  border-top: 1px solid color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.18s ease;
}
.user-card:hover { background: color-mix(in srgb, var(--fg-sidebar) 5%, transparent); }
.user-avatar {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: linear-gradient(135deg, #C9A95E, #8C7340);
  overflow: hidden;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 600;
}
.user-name { font-weight: 600; color: var(--fg-sidebar); font-size: 13px; }
.user-role { font-size: 11.5px; color: var(--fg-sidebar-muted); }

.sidebar-footer {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 4px 0;
  font-size: 12px;
  color: var(--fg-sidebar-muted);
  border-top: 1px solid color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
  margin-top: 8px;
}
.sf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 7px 9px;
  border-radius: 7px;
  color: var(--fg-sidebar-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.sf-btn svg { flex-shrink: 0; }
.sf-btn:hover { background: color-mix(in srgb, var(--fg-sidebar) 8%, transparent); color: var(--fg-sidebar); }
/* Idle: two icon-only buttons centred, side by side. First click adds .revealed —
   the button grows inline (label expands to the RIGHT of its icon), pushing its
   sibling along; a second click runs the action. The sidebar has overflow:visible,
   so in the narrow rail the revealed pill spills into the main column. */
.sf-label {
  display: block;
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: max-width 0.34s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.24s ease, margin-left 0.34s cubic-bezier(0.4, 0, 0.2, 1);
}
.sf-btn.revealed {
  background: var(--bg-sidebar-active);
  color: var(--fg-sidebar);
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 200;
}
.sf-btn.revealed .sf-label {
  max-width: 170px;
  opacity: 1;
  margin-left: 8px;
  transition: max-width 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, opacity 0.22s ease 0.22s, margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}
/* Touch / tablet confirmation bubble above the footer buttons */
.sf-confirm {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  right: auto;
  width: 260px;
  max-width: calc(100vw - 24px);
  z-index: 300;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 14px;
  animation: fadeIn 0.16s ease;
}
.sf-confirm-head { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--fg); }
.sf-confirm-head svg { color: var(--accent); }
.sf-confirm-msg { font-size: 12.5px; color: var(--fg-muted); margin: 5px 0 12px; line-height: 1.45; }
.sf-confirm-actions { display: flex; gap: 8px; }
.sf-confirm-actions button { flex: 1; padding: 9px 10px; border-radius: var(--radius); font-size: 13px; font-weight: 600; cursor: pointer; transition: filter 0.14s, background 0.14s; }
.sf-confirm-cancel { background: var(--bg-subtle); color: var(--fg); border: 1px solid var(--border-strong); }
.sf-confirm-cancel:hover { background: var(--bg-hover); }
.sf-confirm-ok { background: var(--accent); color: #1a1306; border: 1px solid var(--accent); }
.sf-confirm-ok.danger { background: var(--red); border-color: var(--red); color: #fff; }
.sf-confirm-ok:hover { filter: brightness(0.95); }

/* ---------- Main ---------- */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}
.topbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-card);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* ---------- Topbar : zone « créer » segmentée (design system) ----------
   3 boutons .snt-btn sur desktop ; sur tablette/mobile ils se replient
   derrière une bascule « + » (état Alpine `createOpen` sur .topbar). */
.topbar-create-group { display: flex; gap: 8px; flex-shrink: 0; align-items: stretch; }
.topbar-create-group .snt-btn { height: 40px; padding-top: 0; padding-bottom: 0; }
.topbar-search { position: relative; display: flex; align-items: center; }
.topbar-search > .global-search { width: 100%; }
/* Barre de recherche à la même hauteur que les boutons « créer » (40px). */
.topbar-search .quick-search { height: 40px; box-sizing: border-box; }
.topbar-create-toggle { display: none; }

@media (max-width: 1080px) {
  .topbar-create-toggle {
    display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
    border-radius: var(--radius); background: var(--btn-primary-bg); color: var(--btn-primary-fg);
    box-shadow: var(--shadow-control); transition: background 0.16s, transform 0.18s var(--ease-out);
  }
  .topbar-create-toggle:active { transform: scale(0.92); }
  .topbar.create-open .topbar-create-toggle { background: var(--bg-subtle); color: var(--fg); }
  .topbar-create-group {
    overflow: hidden; max-width: 0; opacity: 0; transform: translateX(-8px);
    transition: max-width 0.32s var(--ease-out), opacity 0.22s, transform 0.32s var(--ease-out);
  }
  .topbar.create-open .topbar-create-group { max-width: 220px; opacity: 1; transform: translateX(0); }
  .topbar-create-group .snt-btn { padding: 0; width: 42px; height: 42px; flex-shrink: 0; }
  .topbar-create-group .snt-btn > span:last-child { display: none; }
  .topbar-create-group .snt-btn svg { width: 20px; height: 20px; }
}

/* ---------- Quick actions bar ---------- */
.quick-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.quick-action {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid var(--border);
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, transform 0.08s ease;
}
.quick-action:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.quick-action:active { transform: scale(0.96); }
.quick-action.quick-primary {
  background: var(--btn-primary-bg, var(--bg-sidebar));
  color: var(--btn-primary-fg, var(--fg-sidebar));
  border-color: var(--btn-primary-border, var(--btn-primary-bg, var(--bg-sidebar)));
}
.quick-action.quick-primary:hover { background: var(--btn-primary-bg-hover, var(--bg-sidebar-active)); border-color: var(--btn-primary-bg-hover, var(--bg-sidebar-active)); }
.quick-action svg { color: currentColor; }

.quick-search {
  flex: 1;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 7px 12px;
  color: var(--fg-muted);
  transition: border-color 0.15s, background 0.15s;
}
.quick-search:focus-within { border-color: var(--accent); background: var(--bg-card); }
.quick-search input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-size: 13px;
  color: var(--fg);
  min-width: 0;
}
.quick-search input::placeholder { color: var(--fg-subtle); }
.quick-search svg { color: var(--fg-muted); flex-shrink: 0; }
.quick-kbd {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 11px;
  color: var(--fg-muted);
  font-weight: 500;
}

.cabinet-pick {
  flex-shrink: 0;
}
.icon-btn {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  transition: background 0.15s, color 0.15s;
  position: relative;
}
.icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
.icon-btn svg { width: 18px; height: 18px; }
/* Bouton notifications de la topbar : carré arrondi .snt-icon-btn (maquette),
   contexte de positionnement pour la pastille. */
.topbar-notif { position: relative; flex-shrink: 0; }
.notif-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--bg-card);
}

.page {
  flex: 1;
  overflow-y: auto;
  padding: 8px 40px 60px;
}

/* Vue calendrier : la page ne scrolle pas — seul l'agenda défile, gardant la
   barre d'outils et les filtres fixes au-dessus. */
.page-calendar {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding-bottom: 24px;
}
.page-calendar .cal-toolbar,
.page-calendar > div:not(.cal-scroll) { flex-shrink: 0; }
.cal-scroll {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border-radius: 14px;
}
/* Vue calendrier mobile (façon iPhone) : masquée sur desktop. */
.cal-mobile { display: none; }
.page-header {
  margin-bottom: 28px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.page-title {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.025em;
  margin: 0 0 4px;
  color: var(--fg);
}
.page-subtitle {
  color: var(--fg-muted);
  font-size: 15px;
  margin: 0;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13.5px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease, filter 0.15s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}
.btn:active { transform: scale(0.96); }
.btn svg { width: 16px; height: 16px; }
/* Ombre portée très légère et diffuse sous les boutons pleins (look macOS).
   Les boutons fantômes/texte (.btn-ghost) restent sans ombre. */
.btn-primary, .btn-secondary, .btn-accent { box-shadow: var(--shadow-control); }
.btn-primary:active, .btn-secondary:active, .btn-accent:active { box-shadow: var(--shadow-sm); }
.btn-primary:active { background: var(--btn-primary-bg-active, var(--btn-primary-bg-hover, var(--bg-sidebar-active))); }
.btn-primary {
  background: var(--btn-primary-bg, var(--bg-sidebar));
  color: var(--btn-primary-fg, var(--fg-sidebar));
  border-color: var(--btn-primary-border, transparent);
}
.btn-primary:hover { background: var(--btn-primary-bg-hover, var(--bg-sidebar-active)); }
/* Couleurs du bouton principal par theme : voir --btn-primary-* dans les blocs [data-theme] en haut du fichier. */
.btn-secondary {
  background: var(--bg-card);
  color: var(--fg);
  border-color: var(--border);
}
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-ghost {
  color: var(--fg-muted);
}
.btn-ghost:hover { background: var(--bg-hover); color: var(--fg); }
.btn-accent {
  background: var(--accent);
  color: #fff;
}
.btn-accent svg { color: #fff; }
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 90%, black); color: #fff; }
.btn-accent:active { color: #fff; }
.btn-sm { padding: 6px 10px; font-size: 12.5px; }

/* Variants BEM (markup : class="btn btn--danger", "btn btn--secondary", …).
   Alignés sur les boutons sémantiques du Design (.snt-btn--*). */
.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-border); box-shadow: var(--shadow-control); }
.btn--primary:hover { background: var(--btn-primary-bg-hover); }
.btn--secondary { background: var(--bg-card); color: var(--fg); border-color: var(--border); box-shadow: var(--shadow-control); }
.btn--secondary:hover { background: var(--bg-subtle); border-color: var(--border-strong); }
.btn--danger { background: var(--red); color: #fff; box-shadow: var(--shadow-control); }
.btn--danger:hover { background: color-mix(in srgb, var(--red) 88%, #000); }
.btn--warning { background: var(--orange); color: #fff; box-shadow: var(--shadow-control); }
.btn--warning:hover { background: color-mix(in srgb, var(--orange) 88%, #000); }
.btn--success { background: var(--green); color: #fff; box-shadow: var(--shadow-control); }
.btn--success:hover { background: color-mix(in srgb, var(--green) 88%, #000); }
.btn--cancel { background: transparent; color: var(--fg-muted); border-color: transparent; }
.btn--cancel:hover { background: var(--bg-hover); color: var(--fg); }
.btn--sm { padding: 6px 10px; font-size: 12.5px; }
.btn--primary:active, .btn--secondary:active, .btn--danger:active, .btn--warning:active, .btn--success:active { box-shadow: var(--shadow-sm); }
/* Bouton d'action icône-seule : même hauteur que les boutons texte (.btn),
   carré, fond + bordure transparents au repos ; au survol/actif un fond
   légèrement contrasté à coins arrondis. À placer dans le pied des modaux
   à côté des boutons Enregistrer / Annuler. */
.btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.08s ease;
}
.btn-action svg { width: 18px; height: 18px; }
.btn-action:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  color: var(--fg);
}
.btn-action:active {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 30%, transparent);
  color: var(--fg);
  transform: scale(0.96);
}

/* Clic-shrink universel pour boutons icônes et lignes cliquables */
.icon-btn { transition: background 0.15s, color 0.15s, transform 0.08s ease; }
.icon-btn:active { transform: scale(0.92); }
.nav-item { transition: background 0.18s ease, color 0.18s ease, transform 0.08s ease; }
.nav-item:active { transform: scale(0.98); }
.sub-nav button { transition: background 0.15s, color 0.15s, transform 0.08s ease; }
.sub-nav button:active { transform: scale(0.98); }
.seg button { transition: background 0.15s, color 0.15s, transform 0.08s ease; }
.seg button:active { transform: scale(0.94); }

/* ---------- Cards (spec Design .snt-card) ---------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px;
  transition: background 0.3s, border-color 0.3s;
}
.card-tight { padding: 16px; }
.card-flush { padding: 0; }
.card-hover { cursor: pointer; }
.card-hover:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); }
.card-flush { padding: 0; overflow: visible; }
/* Les coins arrondis sont portés par les lignes elles-mêmes (et non par
   overflow:hidden) afin que les bulles d'info au survol (.tt) puissent
   déborder du cadre de la carte. */
.card-flush > :first-child { border-top-left-radius: 14px; border-top-right-radius: 14px; }
.card-flush > :last-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

/* ---------- Dashboard hero ---------- */
.hero {
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  border-radius: 18px;
  padding: 28px 32px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 18px;
  min-height: 460px;
  position: relative;
  overflow: hidden;
}
/* Feuille flouée décorative à droite de l'aperçu : couvre toute la hauteur du
   cadre, sa base est cachée derrière la bordure droite (overflow: hidden). */
.hero-leaf {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  filter: blur(11px) saturate(1.1);
  opacity: 0;
  width: auto;
  height: 180%;
  max-width: 56%;
  object-fit: contain;
}
.hero-leaf-left {
  left: -210px;
  top: 34%;
  object-position: center left;
  transform: translate(-60px, -50%) rotate(10deg) scaleX(-1);
  animation: heroLeafLeft 1.1s 0.2s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
.hero-leaf-right {
  right: -210px;
  top: 66%;
  object-position: center right;
  transform: translate(60px, -50%) rotate(-10deg);
  animation: heroLeafRight 1.1s 0.2s cubic-bezier(0.22, 0.7, 0.2, 1) forwards;
}
@keyframes heroLeafLeft {
  to { opacity: 0.2; transform: translate(0, -50%) rotate(10deg) scaleX(-1); }
}
@keyframes heroLeafRight {
  to { opacity: 0.2; transform: translate(0, -50%) rotate(-10deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-leaf { animation: none; opacity: 0.2; }
  .hero-leaf-left { transform: translateY(-50%) rotate(10deg) scaleX(-1); }
  .hero-leaf-right { transform: translateY(-50%) rotate(-10deg); }
}
/* Contenu du hero au-dessus du feuillage */
.hero-header, .hero-list, .hero-empty, .hero-cta-row { position: relative; z-index: 1; }
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
  pointer-events: none;
}
.hero-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-date {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-sub {
  color: var(--fg-sidebar-muted);
  font-size: 13px;
  margin-top: 2px;
}
.hero-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hero-nav-btn {
  width: 34px; height: 34px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
  color: var(--fg-sidebar);
  display: grid; place-items: center;
}
.hero-nav-btn:hover { background: color-mix(in srgb, var(--fg-sidebar) 8%, transparent); }
.hero-today {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
  font-weight: 500;
  font-size: 13px;
}
.hero-today:hover { background: color-mix(in srgb, var(--fg-sidebar) 8%, transparent); }
.hero-count {
  text-align: right;
  font-size: 13px;
  color: var(--fg-sidebar-muted);
  margin-left: 12px;
}
.hero-count strong {
  display: block;
  color: var(--fg-sidebar);
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.hero-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 8px; }
.hero-marker {
  text-align: center;
  font-size: 12.5px;
  color: var(--fg-sidebar-muted);
  letter-spacing: 0.04em;
  padding: 6px 0;
}
.appt {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 14px 18px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fg-sidebar) 6%, transparent);
  border-left: 3px solid transparent;
  margin: 0;
  transition: background 0.18s ease;
  cursor: pointer;
}
.appt:hover { background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent); }
.appt-time { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 90px; white-space: nowrap; }
.appt-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--blue); flex-shrink: 0; }
.appt-name { flex: 1; }
.appt-amount { font-weight: 600; color: var(--accent); margin-right: 10px; }
.appt-icon { color: var(--fg-sidebar-muted); display: flex; align-items: center; gap: 8px; }
.appt-icon svg { width: 16px; height: 16px; }
.appt.upcoming { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); }
.appt.past { opacity: 0.55; }
.appt.past .appt-time { font-weight: 500; }

/* RDV en cours — point pulsant + accent */
.appt.current {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 16%, transparent);
  opacity: 1;
}
.appt-dot.live {
  width: 9px; height: 9px;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7);
  animation: apptPulse 1.8s ease-out infinite;
}
@keyframes apptPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.appt-badge-live {
  margin-left: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #4ade80;
  border: 1px solid color-mix(in srgb, #4ade80 50%, transparent);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
  background: color-mix(in srgb, #06150D 55%, transparent);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.35), inset 0 0 0 0.5px color-mix(in srgb, #4ade80 30%, transparent);
}
/* Thème clair : le hero passe en blanc, l'ombre noire à 0.35 halote le badge et
   dénature la couleur — on l'allège nettement. */
[data-theme="light"] .appt-badge-live {
  box-shadow: 0 1px 3px rgba(22, 24, 22, 0.12), inset 0 0 0 0.5px color-mix(in srgb, #4ade80 30%, transparent);
}
.appt-chev { transition: transform 0.2s ease; }
.appt-wrap.open .appt-chev { transform: rotate(180deg); }
/* Quand le détail est ouvert, la ligne se « soude » au panneau :
   coins bas carrés, plus d'espace ni de décalage au survol. */
.appt-wrap.open .appt {
  border-radius: 10px 10px 0 0;
  margin-bottom: 0;
}
.appt-wrap.open .appt:hover { background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent); }

/* Panneau de détail du RDV (sous la ligne) */
.appt-wrap { margin: 0; }
/* Repli/dépli fluide du panneau de détail (grid-template-rows 0fr → 1fr). */
.appt-detail-collapse {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.appt-wrap.open .appt-detail-collapse { grid-template-rows: 1fr; }
.appt-detail-inner {
  overflow: hidden;
  min-height: 0;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.22s ease, transform 0.26s ease;
}
.appt-wrap.open .appt-detail-inner {
  opacity: 1;
  transform: translateY(0);
}
.appt-detail {
  margin: 0 0 4px;
  padding: 14px 18px 16px;
  border-radius: 0 0 10px 10px;
  background: color-mix(in srgb, var(--fg-sidebar) 4%, transparent);
  border-left: 3px solid transparent;
  border-top: 1px solid color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
}
/* Le liseré d'accent de la ligne se prolonge sur le panneau de détail */
.appt-wrap:has(.appt.current) .appt-detail {
  border-left-color: var(--green);
  background: color-mix(in srgb, var(--green) 9%, transparent);
}
.appt-wrap:has(.appt.upcoming) .appt-detail {
  border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.appt-detail-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px 20px;
}
.appt-detail-item { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.appt-detail-label {
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-sidebar-muted);
  font-weight: 700;
}
.appt-detail-value { font-size: 13.5px; font-weight: 600; color: var(--fg-sidebar); }
/* Liens de navigation rapide sous la grille de détail (voir/modifier dans le calendrier) */
.appt-detail-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.appt-detail-links .appt-detail-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 13px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-sidebar);
  background: color-mix(in srgb, var(--fg-sidebar) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 16%, transparent);
  transition: background 0.14s, transform 0.08s;
}
.appt-detail-links .appt-detail-link:hover { background: color-mix(in srgb, var(--fg-sidebar) 15%, transparent); }
.appt-detail-links .appt-detail-link:active { transform: scale(0.96); }
.appt-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
}
.appt-act {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  transition: background 0.14s, border-color 0.14s, transform 0.08s;
}
.appt-act:active { transform: scale(0.96); }
.appt-act.realise { background: var(--green); color: #fff; }
.appt-act.realise:hover { filter: brightness(1.08); }
.appt-cancel-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-left: auto;
}
.appt-cancel-label { font-size: 12.5px; color: var(--fg-sidebar-muted); font-weight: 600; }
.appt-act.cancel {
  padding: 8px 12px;
  background: color-mix(in srgb, var(--fg-sidebar) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 18%, transparent);
  color: var(--fg-sidebar);
}
.appt-act.cancel:hover { background: color-mix(in srgb, var(--fg-sidebar) 16%, transparent); }
.appt-act.cancel.danger { color: #f7a8a8; border-color: color-mix(in srgb, #f7a8a8 40%, transparent); }
.appt-act.cancel.danger:hover { background: color-mix(in srgb, #c44545 30%, transparent); }

/* ----- Flux post-action : brouillon de facture → facture validée ----- */
.appt-flow {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: apptFlowIn 0.32s cubic-bezier(0.2, 0.8, 0.25, 1);
}
@keyframes apptFlowIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.appt-flow-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.appt-flow-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
}
.appt-flow-status.green { color: #6fd49a; }
.appt-flow-status.red { color: #f3a0a0; }
.appt-flow-status.orange { color: #e9b873; }
.appt-flow-status.blue { color: #8fbce6; }
.appt-flow-undo {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg-sidebar-muted);
  padding: 5px 9px;
  border-radius: 8px;
  transition: background 0.14s, color 0.14s;
}
.appt-flow-undo:hover { background: color-mix(in srgb, var(--fg-sidebar) 12%, transparent); color: var(--fg-sidebar); }

.appt-draft-card, .appt-invoice-card {
  background: color-mix(in srgb, var(--fg-sidebar) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--fg-sidebar);
}
.appt-draft-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 12px;
}
.appt-draft-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--fg-sidebar) 8%, transparent);
  border-radius: 10px;
  font-size: 13.5px;
  margin-bottom: 14px;
}
.appt-draft-amount { font-weight: 700; }
.appt-draft-actions { display: flex; align-items: center; justify-content: center; gap: 10px; }
.appt-flow-skip {
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-sidebar-muted);
  padding: 9px 12px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.14s, color 0.14s;
}
.appt-flow-skip:hover { background: color-mix(in srgb, var(--fg-sidebar) 12%, transparent); color: var(--fg-sidebar); }
.appt-flow-skip.ghost { border: 1px solid color-mix(in srgb, var(--fg-sidebar) 20%, transparent); }

.appt-invoice-card.validated { border-color: color-mix(in srgb, #6fd49a 45%, transparent); background: color-mix(in srgb, #6fd49a 10%, transparent); }
.appt-invoice-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.appt-invoice-num { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; }
.appt-invoice-meta { font-size: 12px; color: var(--fg-sidebar-muted); margin-top: 2px; }
.appt-invoice-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.appt-invoice-badge.draft { background: color-mix(in srgb, #e9b873 22%, transparent); color: #e9b873; }
.appt-invoice-badge.validated { background: color-mix(in srgb, #6fd49a 22%, transparent); color: #6fd49a; }
.appt-invoice-amount {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.appt-invoice-unpaid { font-size: 12px; font-weight: 700; color: #f3a0a0; letter-spacing: 0; }

/* ----- Entrée « Non facturé » (RDV volontairement non facturé) ----- */
.appt-invoice-card.non-facturee {
  border-color: color-mix(in srgb, var(--fg-sidebar) 18%, transparent);
  background: color-mix(in srgb, var(--fg-sidebar) 5%, transparent);
}
.appt-invoice-badge.non-facturee {
  background: color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
  color: var(--fg-sidebar-muted);
}
.appt-invoice-amount.na {
  color: var(--fg-sidebar-muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.appt-invoice-na-note {
  font-size: 12px;
  font-weight: 700;
  color: var(--fg-sidebar-muted);
  letter-spacing: 0;
  text-decoration: none;
}

/* ----- Boutons de chargement (spinner) ----- */
/* Spinner réutilisable : hérite de la couleur du texte (currentColor) pour
   fonctionner aussi bien sur fond clair que sur les boutons pleins. */
.btn-spinner {
  display: inline-block;
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, currentColor 26%, transparent);
  border-top-color: currentColor;
  animation: btnSpin 0.62s linear infinite;
}
.btn-spinner.lg { width: 22px; height: 22px; border-width: 2.5px; }
@keyframes btnSpin { to { transform: rotate(360deg); } }
/* État verrouillé pendant le chargement : non cliquable, légèrement atténué.
   La largeur du bouton est conservée (le libellé « … » remplace l'action). */
.btn.is-loading,
.appt-act.is-loading,
.hero-cta.is-loading,
.quick-action.is-loading { pointer-events: none; opacity: 0.92; }
.btn.is-loading:active,
.appt-act.is-loading:active { transform: none; }

/* État « pending » des boutons d'action — portage fidèle du DS .snt-btn--pending
   (voir components/core/Button.jsx). À utiliser sur tout bouton d'action qui
   déclenche une opération asynchrone : le bouton devient inactif, son icône de
   tête est masquée et remplacée par un spinner, et le libellé (placé dans un
   <span>) clignote. Fonctionne quel que soit le socle (.btn, .btn-primary, …) :
   la mise en page est normalisée en inline-flex le temps du chargement.
   Markup attendu :  <button class="btn btn--primary" :class="{'btn--pending': saving}"
                             :disabled="saving"><svg.../><span>Enregistrer</span></button>
   Aucun spinner manuel à ajouter : il est injecté en ::before. */
.btn--pending {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  pointer-events: none;
}
.btn--pending:active { transform: none; }
/* Icône de tête masquée pendant le chargement (le spinner prend sa place). */
.btn--pending > svg { display: none; }
/* Spinner injecté en tête de contenu (premier enfant flex, aligné par le gap). */
.btn--pending::before {
  content: "";
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  border-radius: 999px;
  border: 2px solid color-mix(in srgb, currentColor 26%, transparent);
  border-top-color: currentColor;
  animation: btnSpin 0.62s linear infinite;
}
/* Libellé : clignotement doux (identique au DS). */
.btn--pending > span { animation: sntBtnPendingFade 1.3s ease-in-out infinite; }
@keyframes sntBtnPendingFade { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .btn--pending > span { animation: none; opacity: 0.6; }
}

/* ----- Carte « génération en cours » (squelette animé) ----- */
.appt-gen-card {
  background: color-mix(in srgb, var(--fg-sidebar) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 14%, transparent);
  border-radius: 14px;
  padding: 16px 18px;
  color: var(--fg-sidebar);
  animation: cardReveal 0.36s cubic-bezier(0.2, 0.8, 0.25, 1);
}
.appt-gen-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 16px;
}
.appt-gen-head .btn-spinner {
  border-color: color-mix(in srgb, var(--fg-sidebar) 22%, transparent);
  border-top-color: var(--accent);
}
.appt-gen-rows { display: flex; flex-direction: column; gap: 11px; }
/* Bloc squelette : bande lumineuse qui balaie de gauche à droite. */
.gen-skel {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: color-mix(in srgb, var(--fg-sidebar) 9%, transparent);
}
.gen-skel::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fg-sidebar) 17%, transparent), transparent);
  animation: genShimmer 1.15s ease-in-out infinite;
}
@keyframes genShimmer { to { transform: translateX(100%); } }
.appt-gen-progress {
  margin-top: 16px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
  overflow: hidden;
}
.appt-gen-progress i {
  display: block;
  height: 100%;
  width: 40%;
  border-radius: 999px;
  background: var(--accent);
  animation: genProgress 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
@keyframes genProgress {
  0% { margin-left: -40%; }
  100% { margin-left: 100%; }
}

/* Apparition des cartes du flux (brouillon → facture) */
.appt-draft-card,
.appt-invoice-card { animation: cardReveal 0.4s cubic-bezier(0.2, 0.8, 0.25, 1); }
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
/* Pop du badge « Validée » à la fin du flux */
.appt-invoice-badge.validated { animation: badgePop 0.42s 0.08s cubic-bezier(0.34, 1.56, 0.5, 1) both; }
@keyframes badgePop {
  from { opacity: 0; transform: scale(0.55); }
  to { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-spinner, .gen-skel::after, .appt-gen-progress i,
  .appt-draft-card, .appt-invoice-card, .appt-gen-card,
  .appt-invoice-badge.validated { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (max-width: 699px) {
  .appt-draft-actions { flex-wrap: wrap; }
  .appt-draft-actions .appt-act.realise { justify-content: center; flex: 1; }
}

@media (max-width: 699px) {
  .appt-detail-grid { grid-template-columns: 1fr 1fr; }
  /* Boutons d'annulation alignés en grille régulière, pleine largeur */
  .appt-actions { flex-direction: column; align-items: stretch; }
  .appt-act.realise { justify-content: center; }
  .appt-cancel-group {
    margin-left: 0;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
    flex-wrap: nowrap;
  }
  .appt-cancel-label { grid-column: 1 / -1; }
  .appt-cancel-group .appt-act.cancel { justify-content: center; padding: 9px 8px; }
  /* Pas de mention « En cours » sur mobile (gain de place) */
  .appt-badge-live { display: none; }
}

.hero-cta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  position: relative;
  z-index: 1;
  margin-top: 8px;
}
.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--fg-sidebar) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
  color: var(--fg-sidebar);
  font-weight: 500;
  font-size: 13px;
  transition: background 0.18s;
}
.hero-cta:hover { background: color-mix(in srgb, var(--fg-sidebar) 12%, transparent); }
.hero-cta svg { width: 16px; height: 16px; }

/* ---------- Stat cards ---------- */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 16px;
}
.stat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}
.stat-icon {
  width: 42px; height: 42px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.stat-icon svg { width: 20px; height: 20px; }
.stat-label { font-size: 12.5px; color: var(--fg-muted); }
.stat-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }

/* ---------- Headline / quickactions ---------- */
.greeting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}
.greeting-actions { display: flex; gap: 10px; }

/* ---------- Calendar ---------- */
.cal-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.cal-tb-left, .cal-tb-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  min-width: 0;
}
.cal-tb-right { flex: 1 1 auto; justify-content: flex-end; }
.cal-title { flex-shrink: 0; }
.cal-create { flex-shrink: 0; }
/* Boutons mobiles de la barre calendrier : masqués sur desktop */
.cal-icon-bar, .cal-fab, .cal-tools-close, .cal-tools-scrim, .cal-search-mobile { display: none; }
.cal-search-inline { display: flex; }
/* Barre d'icônes compacte (façon calendrier iPhone) — boutons réutilisables */
.cal-icon-bar { gap: 6px; align-items: center; flex-shrink: 0; position: relative; }
.cal-icon-btn {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: background 0.14s, color 0.14s, border-color 0.14s;
}
.cal-icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
.cal-icon-btn.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 40%, transparent); color: var(--fg); }
.cal-icon-btn.has-filters { position: relative; }
.cal-icon-btn.has-filters::after {
  content: '';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  border: 1.5px solid var(--bg-card);
}
.cal-view-wrap { position: relative; display: inline-flex; }
.cal-view-scrim { position: fixed; inset: 0; z-index: 70; }
.cal-view-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 71;
  min-width: 170px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  padding: 6px;
  animation: menuPop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.cal-view-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
}
.cal-view-opt svg:first-child { color: var(--fg-muted); }
.cal-view-opt:hover { background: var(--bg-hover); }
.cal-view-opt.active { color: var(--fg); font-weight: 600; }
.cal-view-opt.active svg:first-child { color: var(--accent); }
.cal-view-check { margin-left: auto; color: var(--accent); }
/* Recherche mobile : bulle flottante en verre dépoli, ancrée sous la loupe
   (même langage visuel que les notifications). */
.cal-search-bubble {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(320px, calc(100vw - 28px));
  z-index: 75;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 14px;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 14%, transparent);
  padding: 10px;
  animation: menuPop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
.cal-search-bubble .cal-search { width: 100%; background: var(--bg-input); }
.cal-search-scrim { position: fixed; inset: 0; z-index: 74; }

/* ---------- Calendrier mobile (façon iPhone : grille de jours + agenda) ---------- */
.cal-m { display: flex; flex-direction: column; }
.cal-m-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px 8px;
  border-bottom: 1px solid var(--border);
}
.cal-m-weekdays span {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--fg-subtle);
  text-transform: uppercase;
}
.cal-m-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 4px;
  gap: 2px;
}
.cal-m-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 7px 0 6px;
  border-radius: 12px;
  min-height: 52px;
  justify-content: flex-start;
  background: transparent;
  transition: background 0.12s;
}
.cal-m-cell.empty { background: transparent; pointer-events: none; }
.cal-m-num {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.cal-m-cell.dim .cal-m-num { color: var(--fg-subtle); font-weight: 500; }
.cal-m-cell.today .cal-m-num { background: var(--accent); color: #1a1306; font-weight: 800; }
.cal-m-cell.selected:not(.today) .cal-m-num { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-m-cell.selected { background: var(--accent-soft); }
.cal-m-cell:not(.empty):not(.selected):active { background: var(--bg-subtle); }
.cal-m-dots { display: flex; gap: 3px; height: 6px; align-items: center; }
.cal-m-dot { width: 6px; height: 6px; border-radius: 999px; }

.cal-m-agenda { padding: 8px 14px 24px; }
.cal-m-agenda-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 4px 12px;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.cal-m-agenda-day { font-size: 16px; font-weight: 700; text-transform: capitalize; }
.cal-m-agenda-count { font-size: 12.5px; color: var(--fg-muted); }
.cal-m-appt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 12px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  text-align: left;
}
.cal-m-appt:active { background: var(--bg-subtle); }
.cal-m-bar { width: 4px; align-self: stretch; min-height: 26px; border-radius: 999px; flex-shrink: 0; }
.cal-m-appt-time { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 52px; }
.cal-m-appt.allday .cal-m-appt-time { font-size: 11.5px; font-weight: 600; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.03em; }
.cal-m-appt-name { flex: 1; font-size: 14.5px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-m-appt-end { font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.cal-m-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 36px 16px;
  color: var(--fg-muted);
  text-align: center;
}
.cal-m-empty svg { color: var(--fg-subtle); }
.cal-pager {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.cal-range {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-pager-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border-radius: 8px;
  color: var(--fg-muted);
}
.cal-pager-btn:hover { background: var(--bg-hover); color: var(--fg); }
.cal-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 12px;
  flex: 0 1 260px;
  min-width: 150px;
}
.cal-search input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 13px;
}
.cal-search svg { width: 16px; height: 16px; color: var(--fg-muted); }

/* ============ Calendrier — rail de filtres (spec Design .cal-filter-rail) ============ */
.cal-body { display: flex; align-items: flex-start; gap: 16px; }
.cal-body #calendar-view { flex: 1 1 auto; min-width: 0; }
/* Bouton toggle des filtres (toolbar) */
.cal-filter-toggle {
  display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px;
  flex-shrink: 0; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); color: var(--fg); font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-control); transition: background .14s, border-color .14s, color .14s;
}
.cal-filter-toggle svg { width: 17px; height: 17px; color: var(--fg-muted); transition: color .14s; }
.cal-filter-toggle:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.cal-filter-toggle.active { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 38%, transparent); color: var(--accent); }
.cal-filter-toggle.active svg { color: var(--accent); }
.cal-filter-count { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; }
/* Bouton-icône (recherche) : carré, même hauteur que le toggle Filtres */
.cal-filter-toggle--icon { width: 38px; padding: 0; justify-content: center; gap: 0; position: relative; }
/* Barre de recherche inline dans la toolbar (remplace la nav de date) */
.cal-search--toolbar { height: 38px; box-sizing: border-box; flex: 1 1 auto; min-width: 0; }
/* Recherche ouverte : la zone gauche prend toute la place, la barre s'étire */
.cal-toolbar.search-open .cal-tb-left { flex: 1 1 auto; }
.cal-toolbar.search-open .cal-tb-right { flex: 0 0 auto; }
.cal-search__clear { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; color: var(--fg-muted); flex-shrink: 0; transition: background .12s, color .12s; }
.cal-search__clear:hover { background: var(--bg-subtle); color: var(--fg); }
/* Rail (carte gauche) */
.cal-filter-rail {
  width: 250px; flex-shrink: 0; align-self: stretch; display: flex; flex-direction: column;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-sm);
}
.cal-filter-rail__head { display: flex; align-items: center; gap: 10px; padding: 15px 12px 13px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.cal-filter-rail__title { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--fg); }
.cal-filter-rail__title svg { width: 15px; height: 15px; color: var(--accent); flex-shrink: 0; }
.cal-filter-rail__close { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm); display: grid; place-items: center; color: var(--fg-muted); transition: background .14s, color .14s; }
.cal-filter-rail__close svg { width: 16px; height: 16px; }
.cal-filter-rail__close:hover { background: var(--bg-subtle); color: var(--fg); }
.cal-filter-rail__body { display: flex; flex-direction: column; gap: 16px; padding: 16px; }
.cal-filter-field { display: flex; flex-direction: column; gap: 8px; }
.cal-filter-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); }
.cal-filter-rail .cal-search { flex: none; width: 100%; background: var(--bg-input); }
/* Option (ligne à cocher) façon .snt-radio-row */
.cal-filter-opt { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border-radius: var(--radius); cursor: pointer; font-size: 13px; color: var(--fg); transition: background .12s; }
.cal-filter-opt:hover { background: var(--bg-hover); }
.cal-filter-opt input { accent-color: var(--accent); width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; }
.cal-filter-opt .cal-filter-opt-main { min-width: 0; flex: 1; }
.cal-filter-opt .sub { font-size: 11px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Reset */
.cal-filter-reset { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 38px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--bg-card); color: var(--fg); font-size: 13px; font-weight: 600; transition: background .14s, opacity .14s; }
.cal-filter-reset:hover:not(:disabled) { background: var(--bg-subtle); }
.cal-filter-reset:disabled { opacity: 0.45; cursor: default; }
/* Toggle « Mes rendez-vous » (spec Design .cal-mine-check) */
.cal-mine-check { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius); background: var(--bg-card); font-size: 13.5px; font-weight: 600; color: var(--fg); cursor: pointer; transition: background .14s, border-color .14s, color .14s; }
.cal-mine-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.cal-mine-check:hover { border-color: var(--accent); }
.cal-mine-check.active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.cal-mine-check .snt-checkbox { width: 20px; height: 20px; }
.cal-mine-check__label { flex: 1; }
/* Filtres = triggers .snt-select pleine largeur, options dépliées inline */
.cal-filter-field .snt-select { width: 100%; height: 40px; box-sizing: border-box; font-size: 13px; font-weight: 600; }
.cal-filter-field .snt-select .snt-select__summary { flex: 1; min-width: 0; display: inline-flex; align-items: center; gap: 8px; overflow: hidden; }
.cal-filter-field .snt-select .snt-select__summary > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-filter-field .snt-select .cal-filter-ico { width: 15px; height: 15px; color: var(--fg-muted); flex-shrink: 0; }
.cal-filter-field .snt-select .snt-select__chev { flex-shrink: 0; transition: transform 0.2s ease; }
.cal-filter-field .snt-select.snt-select--open .snt-select__chev { transform: rotate(180deg); }
.cal-filter-suboptions { display: flex; flex-direction: column; gap: 2px; padding: 4px 2px 0; }
.cal-filter-opt .snt-pfilter__dot { flex-shrink: 0; box-shadow: 0 0 0 2px var(--bg-card); }
.cal-filter-field .snt-select .snt-pfilter__stack { flex-shrink: 0; }
/* Menu déroulant flottant des filtres (teleporté dans body, positionné par
   x-anchor) — verre du DS façon .snt-pfilter__menu, sans positionnement CSS. */
.cal-filter-menu {
  z-index: 4000; box-sizing: border-box; min-width: 200px;
  background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 6px; max-height: 340px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent;
}
.cal-filter-menu::-webkit-scrollbar { width: 8px; }
.cal-filter-menu::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
.cal-filter-menu .snt-pfilter__opt, .cal-filter-menu .snt-pfilter__all { cursor: pointer; }
.cal-filter-menu .snt-pfilter__dot { flex-shrink: 0; }
/* Rail : viewport + track à 2 pages (filtres | mini-calendrier) + pagination */
/* Transitions d'ouverture/fermeture (rail de filtres + barre de recherche) */
.cal-anim-enter { transition: opacity 0.24s var(--ease-out), transform 0.24s var(--ease-out); }
.cal-anim-enter-start { opacity: 0; transform: translateX(-10px); }
.cal-anim-enter-end { opacity: 1; transform: translateX(0); }
.cal-anim-leave { transition: opacity 0.16s ease, transform 0.16s ease; }
.cal-anim-leave-start { opacity: 1; transform: translateX(0); }
.cal-anim-leave-end { opacity: 0; transform: translateX(-10px); }
.cal-anim-fade-enter { transition: opacity 0.2s var(--ease-out); }
.cal-anim-fade-enter-start { opacity: 0; }
.cal-anim-fade-enter-end { opacity: 1; }
.cal-anim-fade-leave { transition: opacity 0.14s ease; }
.cal-anim-fade-leave-start { opacity: 1; }
.cal-anim-fade-leave-end { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .cal-anim-enter, .cal-anim-leave, .cal-anim-fade-enter, .cal-anim-fade-leave { transition: none; } }
/* Le calendrier lui-même « respire » quand on ouvre/ferme le rail de filtres. */
@keyframes cal-reflow { from { opacity: 0.5; transform: translateX(8px) scale(0.996); } to { opacity: 1; transform: none; } }
.cal-reflowing { animation: cal-reflow 0.32s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)); }
@media (prefers-reduced-motion: reduce) { .cal-reflowing { animation: none; } }

.cal-filter-rail__viewport { flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.cal-filter-rail__track { display: flex; height: 100%; transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); }
.cal-filter-rail__track.dragging { transition: none; user-select: none; }
.cal-filter-rail__track.dragging * { user-select: none; }
.cal-filter-rail__page { flex: 0 0 100%; width: 100%; height: 100%; overflow-y: auto; }
.cal-filter-rail__dots { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-top: 1px solid var(--border); flex-shrink: 0; }
.cal-filter-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); transition: background 0.18s, width 0.18s; }
.cal-filter-dot:hover { background: var(--fg-subtle); }
.cal-filter-dot.active { background: var(--accent); width: 22px; }
.cal-filter-mini { padding: 16px; }
.cal-filter-mini .snt-cal { width: 100%; border: none; box-shadow: none; padding: 0; border-radius: 0; }
.cal-filter-backdrop { display: none; }
/* Mobile : rail en tiroir */
@media (max-width: 900px) {
  .cal-filter-rail { position: fixed; top: 0; left: 0; bottom: 0; width: min(300px, 86vw); z-index: 120; border-radius: 0; align-self: auto; box-shadow: var(--shadow-lg); }
  .cal-filter-backdrop.on { display: block; position: fixed; inset: 0; z-index: 119; background: color-mix(in srgb, var(--bg-sidebar) 40%, transparent); }
}

.seg {
  display: flex;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
  gap: 0;
  flex-shrink: 0;
}
.seg button {
  position: relative;
  z-index: 1;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  transition: color 0.2s ease, transform 0.08s ease;
}
.seg button.active {
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
}
/* Pilule glissante (spec Design .snt-seg__pill) — activée par JS (progressive
   enhancement) : sans JS, la pilule statique .seg button.active reste. */
.seg--js button.active { background: transparent; }
.seg-pill {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 0;
  z-index: 0;
  border-radius: var(--radius-sm);
  background: var(--bg-sidebar);
  box-shadow: var(--shadow-control);
  pointer-events: none;
  transition: left 0.28s var(--ease-spring), width 0.28s var(--ease-spring);
}
[data-theme="light"] .seg-pill { background: #2A2D2A; }
/* Thème clair : --bg-sidebar vaut #FFFFFF → le segment actif statique serait
   blanc sur carte blanche (invisible). Pilule sombre comme .seg-pill. */
[data-theme="light"] .seg button.active { background: #2A2D2A; color: #F1E9D4; }

.cal-grid {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: grid;
  position: relative;
  --cal-gutter: 60px;
  grid-template-columns: 60px repeat(7, minmax(0, 1fr));
}
.cal-head {
  padding: 14px 10px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: var(--fg-muted);
  text-transform: uppercase;
  font-weight: 600;
  position: sticky;
  top: 0;
  z-index: 6;
  background: var(--bg-card);
}
.cal-head:last-child { border-right: none; }
.cal-head.today { background: var(--bg-sidebar); color: var(--fg-sidebar); z-index: 7; }
.cal-head .day-num {
  display: block;
  font-size: 24px;
  font-weight: 700;
  color: var(--fg);
  margin-top: 4px;
  letter-spacing: -0.02em;
}
.cal-head.today .day-num { color: var(--fg-sidebar); }

/* ============ Vue mensuelle (spec Design .cal-month — grille unique, cases égales) ============ */
.cal-month { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-card); box-shadow: var(--shadow-sm); }
.cal-month-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.cal-month-dow { padding: 10px 8px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; color: var(--fg-muted); }
.cal-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: minmax(108px, 1fr); }
.cal-month-cell { position: relative; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; cursor: pointer; transition: background 0.12s; }
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-grid > .cal-month-cell:nth-last-child(-n+7) { border-bottom: none; }
.cal-month-cell:hover { background: var(--bg-subtle); }
.cal-month-cell.weekend { background: color-mix(in srgb, var(--bg-subtle) 55%, transparent); }
.cal-month-cell.out { background: color-mix(in srgb, var(--bg-subtle) 70%, transparent); }
.cal-month-cell.out .cal-month-num { color: var(--fg-subtle); opacity: 0.6; }
.cal-month-num { width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; font-weight: 500; color: var(--fg); border-radius: 999px; flex-shrink: 0; }
.cal-month-cell.today .cal-month-num { background: var(--bg-sidebar); color: var(--fg-sidebar); font-weight: 800; }
[data-theme="light"] .cal-month-cell.today .cal-month-num,
[data-theme="dark"] .cal-month-cell.today .cal-month-num { background: var(--accent); color: #fff; }
.cal-month-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.cal-month-pill { display: flex; align-items: center; gap: 5px; padding: 2px 6px; border-radius: 6px; font-size: 11px; font-weight: 600; min-width: 0; width: 100%; text-align: left; transition: filter 0.12s; }
.cal-month-pill:hover { filter: brightness(0.95); }
.cal-month-pill-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.cal-month-pill-t { font-variant-numeric: tabular-nums; flex-shrink: 0; }
.cal-month-pill-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cal-month-more { font-size: 10.5px; color: var(--fg-muted); font-weight: 600; padding-left: 2px; }

/* ============ Menus contextuels du calendrier (spec Design .cal-ctxmenu) ============ */
@keyframes cal-ctx-in { from { opacity: 0; transform: scale(0.96) translateY(-2px); } to { opacity: 1; transform: none; } }
@keyframes cal-ctx-out { to { opacity: 0; transform: scale(0.97); } }
.cal-ctxmenu { position: fixed; z-index: 200; width: 232px; padding: 6px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: cal-ctx-in 0.12s ease; }
.cal-ctxmenu__head { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-subtle); padding: 7px 10px 5px; }
.cal-ctxmenu__head--ev { text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--fg); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 8px; }
.cal-ctxmenu__row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border-radius: var(--radius-sm); text-align: left; font-size: 13.5px; font-weight: 500; color: var(--fg); cursor: pointer; transition: background 0.12s; }
.cal-ctxmenu__row:hover, .cal-ctxmenu__row.is-open { background: var(--bg-hover); }
.cal-ctxmenu__row svg { flex-shrink: 0; }
/* Icône par défaut du menu = gris muted (spec Design) ; les icônes à couleur
   explicite (motifs, créer) gardent leur couleur via style inline. */
.cal-ctxmenu__row > svg:first-child { color: var(--fg-muted); }
.cal-ctxmenu__row.danger { color: var(--red); }
.cal-ctxmenu__row.danger svg { color: var(--red); }
.cal-ctxmenu__chev { margin-left: auto; color: var(--fg-subtle); }
.cal-ctxmenu__sep { height: 1px; background: var(--border); margin: 4px 4px; }
.cal-ctxmenu__flyout { position: fixed; z-index: 210; width: 216px; padding: 6px; background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); animation: cal-ctx-in 0.12s ease; }
/* Variante « riche » (icône colorée + libellé + description) pour le dropdown Créer */
.cal-ctxmenu__item { display: flex; align-items: center; gap: 11px; width: 100%; padding: 8px 10px; border-radius: var(--radius-sm); text-align: left; cursor: pointer; transition: background 0.12s; }
.cal-ctxmenu__item:hover { background: var(--bg-hover); }
.cal-ctxmenu__ic { width: 34px; height: 34px; border-radius: var(--radius-sm); display: grid; place-items: center; flex-shrink: 0; }
.cal-ctxmenu__ic svg { width: 18px; height: 18px; }
.cal-ctxmenu__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.cal-ctxmenu__label { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.cal-ctxmenu__desc { font-size: 11.5px; color: var(--fg-muted); }
@media (prefers-reduced-motion: reduce) { .cal-ctxmenu, .cal-ctxmenu__flyout { animation: none; } }
/* Items du modal « RDV multiples » */
.cal-multi-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 12px 14px; border-radius: var(--radius); text-align: left; cursor: pointer; transition: filter 0.12s, transform 0.08s; }
.cal-multi-item:hover { filter: brightness(0.97); }
.cal-multi-item:active { transform: scale(0.99); }
.cal-multi-item__ic { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.cal-multi-item__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-multi-item__title { font-weight: 600; font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-multi-item__meta { font-size: 12.5px; color: var(--fg-muted); }

.cal-row { display: contents; }
.cal-time {
  padding: 4px 8px;
  text-align: right;
  font-size: 11px;
  color: var(--fg-muted);
  border-right: 1px solid var(--border);
  height: 60px;
  position: relative;
}
.cal-cell {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 50%, transparent);
  border-right: 1px solid var(--border);
  height: 60px;
  position: relative;
  transition: background 0.15s;
}
.cal-cell:last-child { border-right: none; }
.cal-cell:hover { background: var(--bg-subtle); }
/* Au survol d'un événement, ne pas révéler le fond de survol « créer » ni
   l'affordance « +heure » derrière lui (l'événement occupe la case). */
.cal-cell:has(.cal-event:hover) { background: transparent !important; }
.cal-cell:has(.cal-event:hover) .cal-add { opacity: 0 !important; }
.cal-cell.today-col { background: color-mix(in srgb, var(--accent) 4%, var(--bg-card)); }
.cal-event {
  position: absolute;
  left: 4px;
  right: 4px;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 12px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  cursor: pointer;
  z-index: 2;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.15s, box-shadow 0.15s;
}
.cal-event:hover { transform: scale(1.02); box-shadow: var(--shadow-md); z-index: 3; }
.cal-event.accent { background: var(--accent-soft); border-left-color: var(--accent); }
.cal-event.green { background: var(--green-soft); border-left-color: var(--green); }
.cal-event.muted { background: var(--bg-subtle); border-left-color: var(--fg-subtle); }
/* Nom : peut rétrécir/tronquer, l'heure garde toujours sa place (flex-shrink:0). */
.cal-event-name { font-weight: 600; line-height: 1.25; display: flex; align-items: flex-start; gap: 4px; min-height: 0; flex: 0 1 auto; overflow: hidden; }
.cal-event-name svg { width: 12px; height: 12px; }
.cal-event-name .cal-ev-ico { margin-top: 2px; }
/* Titre tronqué sur N lignes (line-clamp posé en inline selon la hauteur). */
.cal-event-name .cal-ev-txt {
  min-width: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.cal-event-time { color: var(--fg-muted); font-size: 11px; margin-top: 1px; display: flex; align-items: center; gap: 4px; flex: 0 0 auto; white-space: nowrap; }
/* Trait « maintenant » pleine largeur (calque au niveau de la grille) */
.cal-now {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  /* Sous l'en-tête (z6/7) et la rangée « toute la journée » (z5) : la ligne
     ne vit que dans le contenu horaire et se cache derrière eux au défilement.
     Au-dessus des cases (z0) et des événements horaires (z2/3). */
  z-index: 4;
  pointer-events: none;
}
.cal-now-track {
  position: absolute;
  left: var(--cal-gutter, 60px);
  right: 0;
  top: 0;
  height: 2px;
  transform: translateY(-50%);
  background: var(--accent);
}
.cal-now-dot {
  position: absolute;
  top: 0;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  background: var(--accent);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent);
}
.cal-now-time {
  position: absolute;
  left: 0;
  /* Étiquette posée juste au-dessus du trait (comme le DS) pour ne pas
     chevaucher l'étiquette d'heure de la colonne de gauche ; alignée à droite
     comme les heures. */
  top: -8px;
  width: var(--cal-gutter, 60px);
  text-align: right;
  padding-right: 8px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: 0.02em;
}
/* Cases cliquables du bandeau « toute la journée » (créer un événement journalier). */
.cal-allday-daycell { position: relative; display: grid; place-items: center; cursor: pointer; transition: background 0.12s; }
.cal-allday-daycell:hover { background: color-mix(in srgb, var(--accent) 8%, var(--bg-card)) !important; }
.cal-allday-add { opacity: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-muted); transition: opacity 0.12s; pointer-events: none; }
.cal-allday-daycell:hover .cal-allday-add { opacity: 0.75; }
.cal-allday-span--day:hover { background: color-mix(in srgb, var(--accent) 6%, var(--bg-card)) !important; }
.cal-allday-add--day { color: var(--fg-subtle); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; opacity: 0; transition: opacity 0.12s; }
.cal-allday-span--day:hover .cal-allday-add--day { opacity: 0.8; }
/* Bandeau « toute la journée » : collant juste sous l'en-tête, une cellule par
   colonne de jour, aligné sur la grille horaire. */
.cal-allday-gutter {
  position: sticky;
  top: var(--cal-head-h, 56px);
  z-index: 5;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
}
.cal-allday-cell {
  position: sticky;
  top: var(--cal-head-h, 56px);
  z-index: 5;
  background: var(--bg-card);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  min-height: 32px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cal-allday-cell:last-child { border-right: none; }
.cal-allday-cell.today-col { background: color-mix(in srgb, var(--accent) 5%, var(--bg-card)); }
.cal-allday-chip {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.25;
  padding: 3px 7px;
  border-radius: 6px;
  background: var(--blue-soft);
  border-left: 3px solid var(--blue);
  color: var(--fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}
.cal-allday-chip.accent { background: var(--accent-soft); border-left-color: var(--accent); }
.cal-allday-chip.green { background: var(--green-soft); border-left-color: var(--green); }
.cal-allday-chip.orange { background: var(--orange-soft); border-left-color: var(--orange); }

/* ---------- Patients ---------- */
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 18px;
  align-items: center;
  flex-wrap: wrap;
}
.search-input {
  flex: 1;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 14px;
}
.search-input input {
  border: none;
  outline: none;
  background: transparent;
  flex: 1;
  font-size: 13.5px;
}
.search-input svg { width: 16px; height: 16px; color: var(--fg-muted); }

.table {
  width: 100%;
  border-collapse: collapse;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.table thead th {
  text-align: left;
  padding: 14px 18px;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.table tbody tr {
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background 0.12s;
  cursor: pointer;
}
.table tbody tr:last-child { border-bottom: none; }
.table tbody tr:hover { background: var(--bg-subtle); }
/* Tableau en lecture seule (ex. détail des prestations d'une facture) :
   pas de curseur cliquable ni de changement de fond au survol. */
.table-readonly tbody tr { cursor: default; }
.table-readonly tbody tr:hover { background: transparent; }
.table td {
  padding: 14px 18px;
  font-size: 13.5px;
  color: var(--fg);
}
.patient-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}
.patient-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
}
.patient-name { font-weight: 600; }
.patient-meta { font-size: 12px; color: var(--fg-muted); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--fg-muted);
}
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-orange { background: var(--orange-soft); color: var(--orange); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-blue { background: var(--blue-soft); color: var(--blue); }
.badge-accent { background: var(--accent-soft); color: var(--accent); }
.badge-dot::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}

/* ---------- Patient fiche ---------- */
.fiche {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
}
.fiche-side {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px;
  height: fit-content;
}
.fiche-side-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 18px;
}
.fiche-side-nav button {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--fg-muted);
  font-weight: 500;
  transition: all 0.15s;
}
.fiche-side-nav button:hover { background: var(--bg-subtle); color: var(--fg); }
.fiche-side-nav button.active {
  background: var(--accent-soft);
  color: var(--fg);
  font-weight: 600;
}
.fiche-side-nav svg { width: 17px; height: 17px; }
.fiche-content { display: flex; flex-direction: column; gap: 16px; }

.solde-card {
  border: 1px solid var(--orange);
  background: color-mix(in srgb, var(--orange) 7%, var(--bg-card));
  border-radius: 14px;
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.solde-icon {
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--orange-soft);
  color: var(--orange);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.solde-icon svg { width: 24px; height: 24px; }
.solde-label {
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  font-weight: 700;
}
.solde-sublabel { color: var(--orange); font-weight: 500; margin-top: 2px; }
.solde-amount {
  margin-left: auto;
  font-size: 38px;
  font-weight: 700;
  color: var(--orange);
  letter-spacing: -0.02em;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.field-label { font-weight: 600; font-size: 13.5px; }
.field-help { color: var(--fg-muted); font-size: 12.5px; }
.field-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.field-card-text { font-weight: 600; }
.field-card-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.field-actions { display: flex; gap: 6px; }
/* Boutons d'action dans les cases (field-card) : carrés à bords arrondis,
   apparence unifiée (modèle : prestation préférée). */
.field-card .icon-btn,
.field-actions .icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg-muted);
}
.field-card .icon-btn:hover,
.field-actions .icon-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--fg);
}
.field-card .icon-btn svg,
.field-actions .icon-btn svg { width: 15px; height: 15px; }

/* ---------- Billing list ---------- */
/* Disposition flex : la colonne « patient » se tronque (ellipsis) au lieu de
   chevaucher ses voisines. Les colonnes secondaires (n° puis date) se masquent
   par ordre de priorité quand la place manque. */
.bill-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 26px 16px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition: background 0.12s;
  cursor: pointer;
}
.bill-row:hover { background: var(--bg-subtle); }
.bill-row:last-child { border-bottom: none; }
.bill-marker {
  width: 4px;
  align-self: stretch;
  flex-shrink: 0;
  background: var(--red);
  border-radius: 2px;
}
.bill-marker.paid { background: var(--green); }
.bill-marker.warning { background: var(--orange); }
.bill-marker.accent { background: var(--accent); }
.bill-marker.blue { background: var(--blue); }
.bill-marker.red { background: var(--red); }
.bill-marker.muted { background: var(--border-strong); }
.bill-name.bill-name-stack { display: flex; flex-direction: column; gap: 1px; -webkit-line-clamp: none; }
.bill-sub { font-size: 12.5px; color: var(--fg-muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sous-ligne n° + date sous le nom : visible seulement en tablette/mobile */
.bill-submeta, .bill-submeta-inline { display: none; }
.bill-status.tobill { color: var(--accent); }

/* Carte "Ajouter un moyen de paiement" + sélecteur d'icône */
.method-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 76px;
  border: 2px dashed var(--border-strong);
  border-radius: 14px;
  background: transparent;
  color: var(--fg-muted);
  font-size: 14px;
  font-weight: 600;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.method-add-card:hover { border-color: var(--accent); background: var(--bg-subtle); color: var(--fg); }
.icon-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.icon-pick-btn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg-muted);
  display: grid;
  place-items: center;
  transition: all 0.12s;
}
.icon-pick-btn:hover { border-color: var(--border-strong); }
.icon-pick-btn.active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--bg-sidebar);
}
/* Thème clair : --bg-sidebar devient blanc → l'icône active disparaît sur le
   fond crème. On force une teinte ambre foncée, nettement lisible. */
[data-theme="light"] .icon-pick-btn.active { color: #5A4718; }
/* Thème sombre : --accent-soft est très sombre → l'icône foncée est illisible.
   On passe la pastille active en ambre plein avec une icône foncée et contrastée. */
[data-theme="dark"] .icon-pick-btn.active { background: var(--accent); color: #2A2208; }
.bill-num { width: 104px; flex-shrink: 0; font-weight: 600; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; }
.bill-name { flex: 1; min-width: 0; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.25; }
.bill-date { width: 96px; flex-shrink: 0; color: var(--fg-muted); font-size: 13px; text-align: right; }
.bill-status { width: 82px; flex-shrink: 0; font-weight: 600; font-size: 13px; text-align: right; }
.bill-status.unpaid { color: var(--red); }
.bill-status.paid { color: var(--green); }
.bill-status.waiting { color: var(--orange); }
.bill-status.draft { color: var(--fg-muted); }
.bill-status.avoir { color: var(--orange); }
.bill-status.devis { color: var(--blue); }
.bill-amount { width: 92px; flex-shrink: 0; font-weight: 700; font-size: 15px; text-align: right; }

/* ============ Facturation — vues enrichies ============ */
/* Cases & radios réutilisables (apparence, paramètres) */
.cbx {
  width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0;
  border: 1.5px solid var(--border-strong); background: var(--bg-input);
  display: grid; place-items: center; cursor: pointer; color: transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.cbx.on { background: var(--accent); border-color: var(--accent); color: var(--check-ink); }
.cbx:active { transform: scale(0.92); }
.rdo {
  width: 18px; height: 18px; border-radius: 999px; flex-shrink: 0; position: relative;
  border: 1.5px solid var(--border-strong); cursor: pointer; transition: border-color 0.15s;
}
.rdo.on { border-color: var(--fg-sidebar); }
.rdo.on::after { content: ''; position: absolute; inset: 3px; border-radius: 999px; background: var(--fg-sidebar); }

/* Barre d'outils Historique : onglets de type + recherche + filtres statut */
.hist-toolbar { padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.hist-toolbar-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hist-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 9px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 10px;
  padding: 9px 14px; color: var(--fg-muted);
}
.hist-search input { border: none; outline: none; background: transparent; flex: 1; font-size: 14px; color: var(--fg); }
.hist-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.hist-checkline { display: flex; align-items: center; gap: 9px; font-size: 13.5px; font-weight: 500; cursor: pointer; color: var(--fg-muted); }
.hist-num.draft { font-style: italic; color: var(--fg-muted); font-weight: 600; }
.bill-amount.muted-amount { color: var(--fg-subtle); }
.bill-amount.avoir-amount { color: var(--orange); }

/* Suivi des chèques */
.cheque-period {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  flex-wrap: wrap; padding: 14px 18px; margin-bottom: 16px;
}
.cheque-since { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--fg-muted); }
.cheque-since-date {
  display: flex; gap: 2px; background: var(--bg-subtle); border-radius: 8px;
  padding: 6px 12px; font-weight: 600; color: var(--fg);
}
.cheque-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 22px; }
.cheque-statcard { display: flex; align-items: center; gap: 16px; padding: 22px; }
.cheque-stat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.cheque-stat-icon.pending { background: var(--orange-soft); color: var(--orange); }
.cheque-stat-icon.cleared { background: var(--green-soft); color: var(--green); }
.cheque-stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--fg-muted); }
.cheque-stat-value { font-size: clamp(15px, 1.6vw, 24px); font-weight: 800; letter-spacing: -0.02em; margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cheque-stat-sub { font-size: 13px; color: var(--fg-subtle); }
.cheque-section-head {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--fg-muted);
}
.cheque-section-head.cleared { margin-top: 26px; }
.cheque-section-head .cheque-count {
  background: var(--accent-soft); color: var(--accent); font-size: 12px;
  border-radius: 999px; min-width: 20px; height: 20px; padding: 0 6px;
  display: grid; place-items: center; letter-spacing: 0;
}
.cheque-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; }
.cheque-row .bill-marker { align-self: stretch; min-height: 38px; }
.cheque-remis { text-align: right; font-size: 12.5px; color: var(--fg-muted); line-height: 1.35; }
.cheque-point-btn {
  width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--green-soft); color: var(--green); border: 1px solid transparent;
  transition: background 0.15s, transform 0.08s;
}
.cheque-point-btn:hover { background: color-mix(in srgb, var(--green) 22%, transparent); }
.cheque-point-btn:active { transform: scale(0.92); }
/* Édition de la date d'encaissement en ligne (lors du pointage d'un chèque) */
.bill-row.is-pointing { background: color-mix(in srgb, var(--accent) 7%, transparent); }
.cheque-point-edit { display: flex; align-items: center; gap: 8px; }
/* Bouton « Tout sélectionner » aligné à droite de l'en-tête de section. */
.cheque-selall { margin-left: auto; text-transform: none; letter-spacing: 0; }
.cheque-date-label { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); white-space: nowrap; }
.cheque-date-input {
  border: 1px solid var(--border-strong); border-radius: 8px; padding: 7px 10px;
  font-size: 13px; font-weight: 600; color: var(--fg); background: var(--bg-input);
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.cheque-date-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cheque-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 54px 20px; color: var(--fg-subtle); text-align: center;
}
.cheque-empty-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--bg-subtle); display: grid; place-items: center; color: var(--fg-subtle); }

/* Paramètres — RIB + RDV non réalisés */
.rib-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.rib-grid .form-field.full { grid-column: 1 / -1; }
.rdv-block { border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-top: 12px; }
.rdv-block-head { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
.rdv-block-head .rdv-tag { width: 26px; height: 26px; border-radius: 8px; background: var(--red-soft); color: var(--red); display: grid; place-items: center; }
.rdv-toggle-row { display: flex; align-items: flex-start; gap: 12px; }
.rdv-pricing { margin: 14px 0 0 32px; padding-left: 16px; border-left: 2px solid var(--border); }
.rdv-pricing-label { font-size: 12.5px; font-weight: 600; color: var(--fg-muted); margin-bottom: 10px; }
.rdv-radio-grid { display: flex; flex-direction: column; gap: 9px; }
.rdv-radio-row { display: flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.rdv-pct-input {
  margin-top: 12px; display: inline-flex; align-items: center; gap: 8px;
  background: var(--bg-input); border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px;
}
.rdv-pct-input input { width: 56px; border: none; outline: none; background: transparent; font-weight: 700; font-size: 14px; color: var(--fg); }

/* Apparence — éléments à afficher + format des factures */
.elem-group { margin-top: 18px; }
.elem-group-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
.elem-group-head .elem-ico { width: 26px; height: 26px; border-radius: 8px; background: var(--bg-subtle); color: var(--fg-muted); display: grid; place-items: center; }
.elem-list { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
.elem-row { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; cursor: pointer; transition: background 0.12s; }
.elem-row + .elem-row { border-top: 1px solid var(--border); }
.elem-row:hover { background: var(--bg-subtle); }
.elem-row.on { background: var(--accent-soft); }
.elem-row.on:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.elem-row-text { display: flex; flex-direction: column; gap: 2px; }
.elem-row-title { font-weight: 600; font-size: 14px; }
.elem-row-desc { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }
.format-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.format-card {
  border: 1.5px solid var(--border); border-radius: 12px; padding: 16px; cursor: pointer;
  display: flex; flex-direction: column; gap: 8px; transition: border-color 0.15s, background 0.15s; position: relative;
}
.format-card.on { border-color: var(--fg-sidebar); background: var(--bg-subtle); }
.format-card-top { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; }
.format-card-badge { font-size: 11px; font-weight: 700; color: var(--blue); background: var(--blue-soft); padding: 2px 7px; border-radius: 6px; }
.format-card-desc { font-size: 12.5px; color: var(--fg-muted); line-height: 1.4; }
.num-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) {
  .cheque-stats, .rib-grid, .format-cards, .num-grid { grid-template-columns: 1fr; }
}
/* Colonne montant + statut empil\u00e9s (gain de place horizontal) */
.bill-amount-col {
  width: 104px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.bill-amount-col .bill-amount { width: auto; }
.bill-amount-col .bill-status { width: auto; font-size: 11.5px; font-weight: 600; }
.bill-row .row-actions { width: var(--actions-w, 150px); flex-shrink: 0; }
.bill-actions { display: flex; gap: 4px; }

/* ----- Sélection multiple des RDV réalisés ----- */
.bill-check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  background: var(--bg-card);
  display: grid;
  place-items: center;
  color: transparent;
  box-shadow: var(--shadow-control);
  transition: background 0.14s, border-color 0.14s, color 0.14s, transform 0.08s, box-shadow 0.14s;
}
.bill-check svg { stroke-width: 3; }
.bill-check:hover { border-color: var(--accent); }
.bill-check.on { background: var(--accent); border-color: var(--accent); color: var(--check-ink); }
.bill-check.partial { background: var(--accent); border-color: var(--accent); color: var(--check-ink); }
.bill-check:active { transform: scale(0.9); }
.bill-row.selectable.selected { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.bill-row.selectable.selected:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* En-t\u00eate de groupe patient : permet de s\u00e9lectionner tous les RDV d'une\n   personne d'un seul clic (case de groupe \u00e0 \u00e9tat plein/partiel). */
.bill-group-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 11px 26px 11px 20px;
  background: var(--bg-subtle);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  cursor: pointer;
  transition: background 0.12s;
}
.bill-group-head:hover { background: var(--bg-hover); }

/* En-têtes de sections « à facturer » (Passés / Réalisés / En attente) :
   hauteur uniforme même quand certaines n'ont pas de segmented control. */
.bill-section-head { min-height: 61px; box-sizing: border-box; }
.bill-group-name { font-weight: 700; font-size: 14px; letter-spacing: -0.01em; }
.bill-group-meta { margin-left: auto; font-size: 12.5px; color: var(--fg-muted); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Lignes regroup\u00e9es : l\u00e9g\u00e8re indentation pour marquer l'appartenance au groupe. */
.bill-row-grouped { padding-left: 30px; }
@media (max-width: 880px) { .bill-group-meta { font-size: 12px; } }
/* Bandeau de contrôles (mode d'affichage + tout sélectionner) */
.bill-head-controls { display: flex; align-items: center; gap: 10px; }
.seg.seg-sm button { padding: 5px 11px; font-size: 12.5px; }
.bill-submeta-row { font-size: 12.5px; color: var(--fg-muted); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Mode chronologique : la ligne s'aligne à gauche SANS réserver la place de la
   case. La case est repliée (largeur 0, gap flex annulé) ; au survol elle se
   déploie en décalant le contenu vers la droite avec une animation — uniquement
   sur appareils à pointeur. Dès qu'une case est cochée, la classe disparaît et
   toutes les cases redeviennent visibles. */
.bill-hide-checks .bill-row.selectable .bill-check {
  width: 0;
  border-width: 0;
  box-shadow: none;
  opacity: 0;
  overflow: hidden;
  margin-right: -14px; /* annule le gap flex de 14px */
  transition: width 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), margin-right 0.22s cubic-bezier(0.2, 0.8, 0.25, 1), opacity 0.16s ease, border-width 0.2s;
}
@media (hover: hover) {
  .bill-hide-checks .bill-row.selectable:hover .bill-check,
  .bill-hide-checks .bill-row.selectable:focus-within .bill-check {
    width: 20px;
    border-width: 1.5px;
    opacity: 1;
    margin-right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bill-hide-checks .bill-row.selectable .bill-check { transition: none; }
}
/* Tactile / mobile : pas de survol → la case reste masquée (colonne supprimée)
   et l'action « Cocher » du menu de droite déclenche la sélection. */
@media (max-width: 699px) {
  .bill-hide-checks .bill-row.selectable { grid-template-columns: 4px 1fr auto; }
  .bill-hide-checks .bill-row.selectable .bill-check { display: none; }
  .bill-hide-checks .bill-row.selectable .bill-marker { grid-column: 1; }
  .bill-hide-checks .bill-row.selectable .bill-name { grid-column: 2; }
  .bill-hide-checks .bill-row.selectable .bill-amount-col { grid-column: 3; }
  .bill-hide-checks .bill-row.selectable .row-actions { grid-column: 2 / 4; }
}
.bill-rowact { display: contents; }

/* Barre d'action flottante quand une sélection est active */
.bill-selbar {
  position: fixed;
  bottom: 24px;
  left: calc(50% + 130px);
  transform: translateX(-50%);
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 12px 14px 12px 22px;
  background: var(--modal-glass);
  backdrop-filter: var(--modal-blur);
  -webkit-backdrop-filter: var(--modal-blur);
  border: 1px solid color-mix(in srgb, var(--fg) 10%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  animation: selbarUp 0.24s cubic-bezier(0.2, 0.85, 0.3, 1);
}
@keyframes selbarUp {
  from { opacity: 0; transform: translate(-50%, 12px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}
.bill-selbar-info { display: flex; align-items: center; gap: 12px; }
.bill-selbar-count { font-weight: 700; font-size: 14px; }
.bill-selbar-dot { width: 4px; height: 4px; border-radius: 999px; background: var(--border-strong); }
.bill-selbar-total { font-weight: 800; font-size: 15px; }
.bill-selbar-note { font-size: 12.5px; color: var(--fg-muted); padding-left: 12px; border-left: 1px solid var(--border); }
.bill-selbar-actions { display: flex; gap: 8px; }
@media (max-width: 999px) {
  .bill-selbar { left: 16px; right: 16px; transform: none; flex-direction: column; align-items: stretch; gap: 12px; }
  @keyframes selbarUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
  .bill-selbar-actions .btn { flex: 1; justify-content: center; }
}

/* ============ Suivi des dépenses ============ */
/* Zone de dépôt — lecture automatique des factures électroniques */
.exp-dropzone {
  display: flex; align-items: center; gap: 18px;
  padding: 18px 22px; margin-bottom: 16px;
  border: 1.5px dashed var(--border-strong); border-radius: 16px;
  background: var(--bg-subtle); cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.exp-dropzone:hover, .exp-dropzone.drag { border-color: var(--accent); background: var(--accent-soft); }
.exp-dropzone-icon {
  width: 48px; height: 48px; border-radius: 13px; flex-shrink: 0;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.exp-dropzone.drag .exp-dropzone-icon { background: var(--accent); color: var(--check-ink); }
.exp-dropzone-text { flex: 1; min-width: 0; }
.exp-dropzone-text strong { display: block; font-size: 14.5px; }
.exp-dropzone-text span { font-size: 12.5px; color: var(--fg-muted); }
.exp-dropzone-cta { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; font-size: 13px; color: var(--accent); flex-shrink: 0; }

/* Synthèse */
.exp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 16px; }
.cheque-stat-icon.exp-ic-total { background: var(--accent-soft); color: var(--accent); }
.cheque-stat-icon.exp-ic-tva { background: var(--blue-soft); color: var(--blue); }
.cheque-stat-icon.exp-ic-unpaid { background: var(--orange-soft); color: var(--orange); }

/* Tri */
.exp-sort { display: flex; align-items: center; gap: 8px; color: var(--fg-muted); }

/* ======== Ligne de dépense — grille CSS ========
   marker | main | clip | date | amounts | status | actions
   4px    |  1fr | 32px | 90px |  148px  |  40px  |  36px
*/
.exp-row {
  display: grid;
  grid-template-columns: 4px 1fr 32px 90px 148px 40px 36px;
  align-items: center; gap: 10px;
  padding: 11px 16px; border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background 0.12s;
}
.exp-row:hover { background: var(--bg-subtle); }
.exp-row:last-of-type { border-bottom: none; }

.exp-cell-main { min-width: 0; }
.exp-main-line {
  display: flex; align-items: center; gap: 7px; min-width: 0; overflow: hidden;
}
.exp-supplier {
  font-weight: 700; font-size: 14px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; min-width: 0;
}
.exp-objet {
  font-size: 13px; color: var(--fg-muted); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; margin-top: 2px;
}
.exp-meta {
  display: flex; align-items: center; gap: 6px; flex-wrap: nowrap;
  font-size: 12px; color: var(--fg-subtle); margin-top: 2px; overflow: hidden;
}
.exp-meta > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exp-meta-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--border-strong); flex-shrink: 0; }
.exp-facturx-tag { display: inline-flex; align-items: center; gap: 3px; color: var(--accent); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.exp-cat-badge { flex-shrink: 0; }

.exp-att-flag {
  width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; border: 1px solid var(--border);
  background: var(--bg-card); color: var(--fg-subtle); cursor: pointer;
  justify-self: center;
}
.exp-att-flag.has { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); }
.exp-att-flag.empty { border-style: dashed; opacity: 0.45; cursor: default; }

.exp-date { text-align: right; font-size: 12.5px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.exp-amounts { text-align: right; }
.exp-amounts .bill-amount { font-size: 14px; font-weight: 700; white-space: nowrap; width: auto; }
.exp-ht { font-size: 11px; color: var(--fg-subtle); margin-top: 2px; white-space: nowrap; }

.exp-status {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid transparent; cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
  justify-self: center;
}
.exp-status.paid  { color: var(--green); background: var(--green-soft); border-color: color-mix(in srgb,var(--green) 30%,transparent); }
.exp-status.unpaid { color: var(--red); background: var(--red-soft); border-color: color-mix(in srgb,var(--red) 30%,transparent); }
.exp-status:hover { filter: brightness(0.9); transform: scale(1.08); }
.exp-status-label { display: none; }

.exp-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; font-size: 12.5px; color: var(--fg-muted); border-top: 1px solid var(--border);
}
.exp-foot-total { font-weight: 700; color: var(--fg); }

/* ===========================================================================
   Écran « Dépenses » (dépenses professionnelles) — porté du Design System
   (ui_kits/app/ExpensesScreen.jsx + ExpenseModal.jsx). Réutilise .cheque-stat*,
   .bill-row, .bill-date, .cash-label, .cash-amount.out déjà présents.
   =========================================================================== */
.cheque-stats--3 { grid-template-columns: repeat(3, 1fr); }
.cheque-stat-icon.exp-total { background: var(--accent-soft); color: var(--accent); }
.cheque-stat-icon.exp-tva { background: var(--blue-soft); color: var(--blue); }

.bill-toolbar-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bill-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 22px; color: var(--fg-muted); font-size: 14px; text-align: center; }
.bill-empty-icon { width: 48px; height: 48px; border-radius: 50%; background: var(--bg-subtle); display: grid; place-items: center; color: var(--fg-subtle); }

/* Ligne de dépense — flex autonome (n'hérite pas de la grille .cash-row) */
.dep-row { display: flex; align-items: center; gap: 14px; padding: 12px 20px; border-bottom: 1px solid var(--border); min-height: 68px; container-type: inline-size; }
.dep-row:last-child { border-bottom: none; }
.dep-row:hover { background: var(--bg-subtle); }
.dep-row .exp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.dep-row-top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.dep-row-icon { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; }
.dep-row .cash-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 0; }
.dep-row .exp-meta { margin-left: 50px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dep-date-stack { display: none; margin-left: 50px; font-size: 12px; color: var(--fg-muted); }
/* Les actions (via .bill-rowact display:contents) deviennent des items flex de
   .dep-row ; .row-actions a width:100% par défaut (prévu pour la grille .bill-row)
   → le neutraliser ici sinon il écrase .exp-main (flex:1) à 0. */
.dep-row .bill-rowact { display: contents; }
.dep-row .row-actions { width: auto; flex-shrink: 0; }
.dep-badge-tva { flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); }
@container (max-width: 560px) { .dep-row .bill-date { display: none; } .dep-date-stack { display: block; } }
@media (max-width: 1180px) { .dep-meta-note { display: none; } }
@media (max-width: 980px) { .dep-meta-method { display: none; } }

/* Méta catégorie (pastille + libellé) */
.exp-cat { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; flex-shrink: 0; }
.exp-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.exp-meta-sep { color: var(--border-strong); margin: 0 1px; }

/* Formulaire 2 colonnes (modaux) */
.cab-form { display: flex; flex-direction: column; gap: 16px; }
.cab-form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 680px) { .cab-form-2col { grid-template-columns: 1fr; } }

/* Champ obligatoire (astérisque) — DS */
.req { color: var(--red); }

/* Durée h/min + suffixe % ou € (modaux Prestation / TVA) — port DS app.css */
.presta-dur-row { display: flex; gap: 10px; }
.presta-dur-field { position: relative; flex: 1; }
.presta-dur-field input { padding: 11px 38px 11px 14px; }
.presta-dur-field span { position: absolute; right: 13px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--fg-subtle); pointer-events: none; }
.presta-pct-field { max-width: 140px; }
.presta-pct-field input { padding-right: 30px; }

/* Bandeau d'information (Taxes) — port DS app.css */
.bill-info-banner { display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; margin-top: 14px; background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: var(--radius-lg); font-size: 13px; color: var(--fg); line-height: 1.5; }
.bill-info-banner .bill-info-banner__icon { color: var(--accent); flex-shrink: 0; margin-top: 1px; }

/* Badge statut cliquable (Taxes : Actif/Inactif) — reset bouton */
.tva-status-toggle { background: none; border: none; padding: 0; margin: 0; cursor: pointer; flex-shrink: 0; display: inline-flex; align-items: center; }
.tva-status-toggle:hover { opacity: 0.85; }

/* Modal dépense : TVA récupérable + pièce jointe */
.dep-tva-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; background: var(--bg-subtle); border-radius: var(--radius); }
.dep-tva-row-label { font-size: 13.5px; font-weight: 600; }
.dep-tva-row-help { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.dep-file { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--radius); font-size: 13.5px; }
.dep-file--empty { border: 1px dashed var(--border-strong); color: var(--fg-muted); cursor: pointer; transition: border-color 0.15s, color 0.15s; }
.dep-file--empty:hover { border-color: var(--accent); color: var(--fg); }
.dep-file--filled { border: 1px solid var(--border); background: var(--bg-subtle); }
.dep-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dep-file-remove { flex-shrink: 0; color: var(--fg-muted); display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: none; background: transparent; cursor: pointer; }
.dep-file-remove:hover { background: var(--bg-hover); color: var(--red); }

/* Gestionnaire de catégories de dépenses (modal) — porté du DS CategoriesModal.jsx
   (réutilise .method-grid / .method-card / .method-icon comme Moyens de paiement). */
.cat-card { position: relative; }
.method-icon--editable { position: relative; cursor: pointer; }
.method-icon-edit--hover { opacity: 0; transition: opacity 0.14s ease; }
.method-icon--editable:hover .method-icon-edit--hover { opacity: 1; }
.method-icon--pick { position: relative; cursor: pointer; border: none; }
/* Sous-modal de suppression + migration */
.catman-migrate { display: flex; flex-direction: column; gap: 14px; }
.catman-migrate-warn { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius); background: color-mix(in srgb, var(--red) 10%, var(--bg-card)); color: var(--red); font-size: 13.5px; font-weight: 600; }
.catman-migrate-warn svg, .catman-migrate-warn > div:first-child { flex-shrink: 0; }

/* Responsive — masquage progressif des colonnes */
@media (max-width: 1020px) {
  .exp-row { grid-template-columns: 4px 1fr 90px 148px 40px 36px; }
  .exp-att-flag { display: none; }
}
@media (max-width: 740px) {
  .exp-row { grid-template-columns: 4px 1fr 148px 40px 36px; }
  .exp-date { display: none; }
}
@media (max-width: 520px) {
  .exp-row { grid-template-columns: 4px 1fr 40px 36px; padding: 10px 12px; }
  .exp-amounts { display: none; }
}

/* ----- Modale dépense ----- */
.exp-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; margin-bottom: 14px;
  border: 1.5px dashed var(--border-strong); border-radius: 14px;
  background: var(--bg-subtle); cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.exp-drop:hover, .exp-drop.drag { border-color: var(--accent); background: var(--accent-soft); }
.exp-drop.reading { cursor: default; border-color: var(--accent); }
.exp-drop-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.exp-drop-text { flex: 1; min-width: 0; }
.exp-drop-text strong { display: block; font-size: 14px; }
.exp-drop-text span { font-size: 12px; color: var(--fg-muted); }
.exp-spin { animation: exp-spin 0.8s linear infinite; }
@keyframes exp-spin { to { transform: rotate(360deg); } }

.exp-readbanner {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: 11px; font-size: 13px; line-height: 1.4; margin-bottom: 16px;
}
.exp-readbanner svg { flex-shrink: 0; }
.exp-readbanner.green { background: var(--green-soft); color: var(--green); }
.exp-readbanner.blue { background: var(--blue-soft); color: var(--blue); }
.exp-readbanner.orange { background: var(--orange-soft); color: var(--orange); }

.exp-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.exp-form-grid .form-field { margin-bottom: 0; }
.exp-money {
  display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 16px; align-items: start;
  margin: 16px 0; padding: 16px; background: var(--bg-subtle); border-radius: 14px;
}
.exp-tva-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.exp-tva-chip {
  padding: 8px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); cursor: pointer; font-weight: 600; font-size: 13px; color: var(--fg-muted);
}
.exp-tva-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.exp-tva-custom {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); padding: 0 10px 0 4px; height: 35px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.exp-tva-custom input {
  width: 54px; border: none; background: transparent; outline: none;
  font-weight: 600; font-size: 13px; color: var(--fg); text-align: right;
  padding: 8px 4px; font-family: inherit; -moz-appearance: textfield;
}
.exp-tva-custom input::-webkit-outer-spin-button,
.exp-tva-custom input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.exp-tva-custom input::placeholder { color: var(--fg-subtle); font-weight: 500; }
.exp-tva-custom span { font-weight: 600; font-size: 13px; color: var(--fg-muted); }
.exp-tva-custom:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.exp-tva-custom.on { border-color: var(--accent); background: var(--accent-soft); }
.exp-tva-custom.on input, .exp-tva-custom.on span { color: var(--accent); }
.exp-ttc-box { text-align: right; min-width: 130px; padding-left: 16px; border-left: 1px solid var(--border); }
.exp-ttc-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fg-muted); display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.exp-auto { background: var(--accent-soft); color: var(--accent); font-size: 9.5px; padding: 2px 5px; border-radius: 5px; letter-spacing: 0; }
.exp-ttc-value { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 0 2px; }
.exp-ttc-sub { font-size: 12px; color: var(--fg-subtle); }
@media (max-width: 620px) {
  .exp-form-grid { grid-template-columns: 1fr; }
  .exp-money { grid-template-columns: 1fr; }
  .exp-ttc-box { text-align: left; padding-left: 0; border-left: none; border-top: 1px solid var(--border); padding-top: 12px; }
  .exp-ttc-label { justify-content: flex-start; }
}

.exp-attach-add {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 13px; border: 1.5px dashed var(--border-strong); border-radius: 12px;
  background: var(--bg-input); color: var(--fg-muted); font-weight: 600; font-size: 13.5px; cursor: pointer;
}
.exp-attach-add:hover { border-color: var(--accent); color: var(--accent); }

/* Actions de l'en-tête Dépenses (transfert banque, retrait, ajout) */
.exp-head-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ============ Champ date « à la française » ============ */
/* Affiche jj/mm/aaaa (ou un libellé gris) + icône calendrier ; le sélecteur
   natif est superposé en transparence pour garder le calendrier du navigateur. */
.frdate {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-input); cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.frdate-ic { color: var(--fg-muted); flex-shrink: 0; }
.frdate-text { font-size: 14px; font-weight: 600; color: var(--fg); font-variant-numeric: tabular-nums; }
.frdate.empty .frdate-text { color: var(--fg-subtle); font-weight: 500; }
.frdate:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* Input natif : réduit à néant, activé uniquement via showPicker() */
.frdate-native {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
  margin: 0; padding: 0; border: none;
}
.frdate-native::-webkit-calendar-picker-indicator { display: none; }

/* Saisie d'un montant (€) — même gabarit que .frdate pour aligner les hauteurs
   des lignes date / montant dans les modales. */
.amt-field {
  display: flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 11px 14px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-input);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.amt-field:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.amt-field input {
  border: none; background: transparent; outline: none; width: 100%;
  font-weight: 600; font-size: 14px; color: var(--fg); font-family: inherit;
  -moz-appearance: textfield;
}
/* Annule le gabarit global des inputs .form-field (padding/bordure) pour que
   la hauteur soit pilotée par .amt-field (alignée sur .frdate). */
.form-field .amt-field input[type="number"] {
  padding: 0; border: none; border-radius: 0; background: transparent;
  width: 100%;
}
/* Annule le padding hérité du global input dans .frdate pour aligner
   sa hauteur sur celle de .amt-field (tous deux ~44 px). */
.form-field .frdate .frdate-text-input,
.form-field .frdate .frdate-native {
  padding: 0; border: none; background: transparent; width: 100%;
}
.amt-field input::-webkit-outer-spin-button,
.amt-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amt-field .amt-cur { color: var(--fg-muted); font-weight: 600; flex-shrink: 0; }

/* ---------- Catégories de dépenses ---------- */
.exp-cat-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.exp-cat-manage {
  background: none; border: none; cursor: pointer; padding: 0;
  color: var(--accent); font-weight: 600; font-size: 12.5px;
  display: inline-flex; align-items: center; gap: 5px;
}
.exp-cat-manage:hover { text-decoration: underline; }
.exp-cat-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.exp-cat-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg-card); cursor: pointer; font-weight: 600; font-size: 13px;
  color: var(--fg-muted); transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.exp-cat-chip .cat-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.exp-cat-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--fg); }
.exp-cat-chip.add { color: var(--accent); border-style: dashed; }
.exp-cat-addbox {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--accent); border-radius: 9px; padding: 4px 6px 4px 10px;
  background: var(--accent-soft);
}
.exp-cat-addbox input {
  border: none; background: transparent; outline: none; font-family: inherit;
  font-size: 13px; font-weight: 600; color: var(--fg); width: 130px;
}
.exp-cat-addbox button {
  border: none; cursor: pointer; width: 26px; height: 26px; border-radius: 7px;
  display: grid; place-items: center; color: #fff; background: var(--green);
}
.exp-cat-addbox button.cancel { background: var(--bg-hover); color: var(--fg-muted); }

/* Pastille catégorie sur les lignes de dépense */
.exp-cat-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--border);
}
.exp-cat-badge .cat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* Gestionnaire de catégories (modale) */
.catmgr-list { display: flex; flex-direction: column; gap: 8px; }
.catmgr-row {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-input);
}
.catmgr-swatches { display: flex; gap: 6px; }
.catmgr-swatch { width: 22px; height: 22px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; }
.catmgr-swatch.on { border-color: var(--fg); }
/* Nouveau design : pastille + icône pinceau + popup swatches */
.catmgr-color-area { position: relative; display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.catmgr-color-dot { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; display: block; border: 2px solid rgba(0,0,0,.12); }
.catmgr-brush-btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--fg-muted); cursor: pointer; display: grid; place-items: center; transition: border-color .14s, color .14s; }
.catmgr-brush-btn:hover { border-color: var(--accent); color: var(--accent); }
.catmgr-color-pop { position: absolute; top: calc(100% + 6px); left: 0; z-index: 120; background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 10px; display: grid; grid-template-columns: repeat(5,1fr); gap: 7px; box-shadow: 0 8px 24px rgba(0,0,0,.14); min-width: 170px; }
.catmgr-color-pop-swatch { width: 26px; height: 26px; border-radius: 50%; cursor: pointer; border: 2.5px solid transparent; transition: transform .12s, border-color .12s; }
.catmgr-color-pop-swatch:hover { transform: scale(1.15); }
.catmgr-color-pop-swatch.on { border-color: var(--fg); transform: scale(1.18); }

/* ---- Spectrum color picker ---- */
.spc-trigger {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-input); color: var(--fg-muted); font-weight: 600;
  font-size: 13px; cursor: pointer; transition: border-color .14s;
}
.spc-trigger:hover { border-color: var(--accent); color: var(--fg); }
.spc-preview { width: 20px; height: 20px; border-radius: 50%; background: var(--spc-col,#888); border: 2px solid rgba(0,0,0,.14); flex-shrink: 0; }
.spc-pop {
  position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 300;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px;
  padding: 12px; box-shadow: 0 -10px 36px rgba(0,0,0,.2); width: 244px;
}
.spc-canvas-wrap { position: relative; border-radius: 8px; overflow: hidden; user-select: none; }
.spc-canvas { display: block; width: 220px; height: 140px; cursor: crosshair; }
.spc-cursor {
  position: absolute; width: 13px; height: 13px; border-radius: 50%;
  border: 2.5px solid #fff; box-shadow: 0 0 0 1.5px rgba(0,0,0,.5);
  transform: translate(-50%,-50%); pointer-events: none;
}
.spc-hue {
  -webkit-appearance: none; appearance: none; display: block;
  width: 100%; height: 14px; border-radius: 7px; margin-top: 10px;
  background: linear-gradient(to right,#f00,#ff0,#0f0,#0ff,#00f,#f0f,#f00);
  outline: none; cursor: pointer; border: none;
}
.spc-hue::-webkit-slider-thumb {
  -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; border: 2px solid #bbb; box-shadow: 0 1px 5px rgba(0,0,0,.3); cursor: pointer;
}
.spc-hue::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%; background: #fff;
  border: 2px solid #bbb; cursor: pointer; box-sizing: border-box;
}
.spc-hex-row { display: flex; align-items: center; gap: 9px; margin-top: 10px; }
.spc-swatch-big { width: 34px; height: 34px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border); }
.spc-hex-in {
  flex: 1; border: 1px solid var(--border); border-radius: 8px;
  padding: 7px 10px; font-family: monospace; font-size: 13px; font-weight: 600;
  background: var(--bg-input); color: var(--fg); outline: none; letter-spacing: .04em;
}
.spc-hex-in:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.spc-presets { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.spc-preset { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: transform .12s, border-color .12s; flex-shrink: 0; }
.spc-preset:hover { transform: scale(1.15); }
.spc-preset.on { border-color: var(--fg); transform: scale(1.18); }
.catmgr-row input.catmgr-name {
  flex: 1; min-width: 0; border: 1px solid transparent; background: transparent;
  border-radius: 8px; padding: 6px 8px; font-family: inherit; font-size: 14px;
  font-weight: 600; color: var(--fg); outline: none;
}
.catmgr-row input.catmgr-name:focus { border-color: var(--border); background: var(--bg-card); }
.catmgr-add {
  display: flex; align-items: center; gap: 8px; width: 100%; justify-content: center;
  padding: 11px; border: 1.5px dashed var(--border-strong); border-radius: 11px;
  background: var(--bg-input); color: var(--fg-muted); font-weight: 600; font-size: 13.5px;
  cursor: pointer; margin-top: 10px;
}
.catmgr-add:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Filtre par période ---------- */
.period-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--border); margin-top: 12px; padding-top: 12px;
}
.period-bar-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fg-subtle); display: inline-flex; align-items: center; gap: 6px;
}
.period-custom { display: inline-flex; align-items: center; gap: 8px; }
.period-custom .frdate { min-height: 38px; padding: 7px 12px; width: 150px; }
.period-custom .period-sep { color: var(--fg-subtle); font-size: 13px; }
.period-range-note { margin-left: auto; font-size: 12.5px; color: var(--fg-muted); }

@media (max-width: 720px) {
  .period-custom { width: 100%; }
  .period-custom .frdate { flex: 1; width: auto; }
  .period-range-note { margin-left: 0; width: 100%; }
}

/* Topbar date-nav */
.topbar-date-nav { display: flex; align-items: center; gap: 6px; margin-right: 4px; }
.topbar-date-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-input); color: var(--fg); font-weight: 600; font-size: 13px; cursor: pointer; white-space: nowrap; transition: border-color .14s; position: relative; }
.topbar-date-btn:hover { border-color: var(--accent); }
.topbar-date-btn input[type=date] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
@media (max-width: 900px) { .topbar-date-nav { display: none; } }
/* Cash-row type label responsive */
.cash-meta-type-text { display: inline; }
@media (max-width: 700px) { .cash-meta-type-text { display: none; } }

/* ---------- Pagination (charger plus) ---------- */
.load-more-row { display: flex; justify-content: center; padding: 14px 20px; border-top: 1px solid var(--border); }
.load-more-row button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 22px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg-input); color: var(--fg-muted); font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.load-more-row button:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* ---------- Tarifs — sous-onglets ---------- */
.rate-subtab-bar { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 11px; padding: 4px; width: fit-content; }
.rate-subtab-bar button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 18px; border: none; border-radius: 8px; background: transparent; font-weight: 600; font-size: 13.5px; color: var(--fg-muted); cursor: pointer; transition: all 0.15s; }
.rate-subtab-bar button.active { background: var(--bg-card); color: var(--fg); box-shadow: 0 1px 4px rgba(0,0,0,0.1); }
.rate-subtab-bar button:hover:not(.active) { color: var(--fg); }

/* Lignes de prestation redessinées */
.rate-row2 { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background 0.12s; }
.rate-row2:last-child { border-bottom: none; }
.rate-row2:hover { background: var(--bg-subtle); }
.rate-dot2 { width: 13px; height: 13px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 15%, transparent); }
.rate-row2-main { flex: 1; min-width: 0; }
.rate-price-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-weight: 700; font-size: 12.5px; background: var(--green-soft); color: var(--green); font-variant-numeric: tabular-nums; }
.rate-dur-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-weight: 600; font-size: 12px; color: var(--fg-muted); background: var(--bg-subtle); }
.rate-pct-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-weight: 700; font-size: 12.5px; }
.rate-color-pick { display: flex; gap: 9px; flex-wrap: wrap; padding-top: 2px; }
.rate-color-swatch { width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid transparent; cursor: pointer; transition: border-color 0.15s, transform 0.12s; outline: none; }
.rate-color-swatch.on { border-color: var(--fg) !important; transform: scale(1.18); }
.rate-color-swatch:hover:not(.on) { transform: scale(1.1); }

/* Taux de TVA */
.tva-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 20px; border-bottom: 1px solid var(--border); transition: background 0.12s; }
.tva-row:hover { background: var(--bg-subtle); }
.tva-row-main { flex: 1; min-width: 0; }
.tva-default-badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: #FFF5D6; color: #9B7206; border: 1px solid #EDD37A; font-weight: 700; font-size: 11.5px; }
.tva-edit-row { padding: 16px 20px; border-bottom: 1px solid var(--border); background: var(--bg-subtle); }
.tva-edit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-bottom: 14px; }
.tva-edit-actions { display: flex; gap: 8px; justify-content: flex-end; }
.tva-add-row {
  display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%;
  padding: 14px; border: none; background: transparent;
  color: var(--fg-muted); font-weight: 600; font-size: 14px; cursor: pointer;
  border-top: 1.5px dashed var(--border); transition: background 0.12s, color 0.12s;
}
.tva-add-row:hover { background: var(--bg-subtle); color: var(--accent); }
.tva-info-banner {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px;
  border-radius: 12px; background: #EBF3FD; color: #2563EB;
  margin-top: 16px; font-size: 13.5px; line-height: 1.55; border: 1px solid #BFD7F8;
}
.tva-info-banner svg { flex-shrink: 0; margin-top: 1px; }

/* ============ Caisse — espèces ============ */
.cheque-stat-icon.cash-ic-in { background: var(--green-soft); color: var(--green); }
.cheque-stat-icon.cash-ic-out { background: var(--red-soft); color: var(--red); }

/* Actions rapides */
.cash-quick { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.cash-quick-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-card); color: var(--fg); font-weight: 600; font-size: 13.5px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cash-quick-btn svg { color: var(--fg-muted); transition: color 0.15s; }
.cash-quick-btn:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cash-quick-btn:hover svg { color: var(--accent); }

/* Ligne du journal de caisse */
.cash-row {
  display: grid; grid-template-columns: 36px 1fr auto 130px 120px auto;
  align-items: center; gap: 14px;
  padding: 10px 20px; border-bottom: 1px solid var(--border); cursor: pointer;
}
.cash-row:hover { background: var(--bg-subtle); }
.cash-row:last-of-type { border-bottom: none; }
.cash-row-icon { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.cash-row-icon.in { background: var(--green-soft); color: var(--green); }
.cash-row-icon.out { background: var(--red-soft); color: var(--red); }
.cash-cell-main { min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.cash-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin-bottom: 2px; }
.cash-date { font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cash-amount { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.cash-amount.in { color: var(--green); }
.cash-amount.out { color: var(--red); }
.cash-balance {
  text-align: right; font-variant-numeric: tabular-nums; font-weight: 600;
  color: var(--fg-muted); font-size: 13.5px; white-space: nowrap;
  padding-left: 16px; border-left: 1px solid var(--border);
}

/* Modale : sens du mouvement (entrée / sortie) */
.cash-sense-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 18px; }
.cash-sense {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--bg-card); color: var(--fg-muted); font-weight: 600; font-size: 14px; cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.cash-sense.in.on { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.cash-sense.out.on { border-color: var(--red); background: var(--red-soft); color: var(--red); }

/* Modale : choix de catégorie */
.cash-cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.cash-cat-chip {
  display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center;
  padding: 13px 8px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--bg-card); color: var(--fg-muted); font-weight: 600; font-size: 12.5px;
  cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; line-height: 1.25;
}
.cash-cat-chip svg { color: var(--fg-subtle); transition: color 0.15s; }
.cash-cat-chip.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.cash-cat-chip.on svg { color: var(--accent); }

/* Responsive caisse */
@media (max-width: 960px) { .cash-row { grid-template-columns: 36px 1fr auto 110px auto; } .cash-balance { display: none; } }
@media (max-width: 680px) {
  .cash-row { grid-template-columns: 36px 1fr auto auto; gap: 12px; padding: 13px 16px; }
  .cash-date { display: none; }
  .cash-cat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .cash-cat-grid { grid-template-columns: 1fr; }
  .cash-cat-chip { flex-direction: row; justify-content: flex-start; gap: 10px; text-align: left; }
}
.exp-filechip { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.exp-filechip-icon { width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.exp-filechip-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-filechip-meta { font-size: 12px; color: var(--fg-muted); margin-top: 1px; }

.exp-paidrow { display: flex; align-items: flex-end; gap: 18px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.exp-paidtoggle { flex: 1; display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.exp-paidtoggle .cbx { margin-top: 1px; }

/* ----- Modale de facturation groupée ----- */
.combine-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px 14px;
  background: var(--accent-soft);
  color: var(--fg);
  border-radius: 11px;
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 18px;
}
.combine-note svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.combine-group { margin-bottom: 20px; }
.combine-group:last-of-type { margin-bottom: 14px; }
.combine-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.combine-patient { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 15px; }
.combine-avatar {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
}
.combine-draftbadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  color: color-mix(in srgb, var(--accent) 75%, var(--fg));
}
.combine-table { margin-bottom: 0; }
.combine-table .ta-right, .ta-right { text-align: right; }
.combine-mult { color: var(--fg-muted); font-weight: 600; }
/* Sous-total rendu comme pied du tableau : soudé aux lignes du dessus. */
.combine-subtotal-row td {
  padding: 11px 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
}
.combine-subtotal-row td:last-child { color: var(--fg); font-weight: 700; }
.combine-grand {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 18px;
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  border-radius: 14px;
  font-weight: 700;
  font-size: 15px;
  margin-top: 4px;
}
.combine-grand span:last-child { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }

/* Priorité d'affichage : on masque d'abord le n° de facture, puis la date. */
@media (max-width: 1040px) { .bill-num { display: none; } }
@media (max-width: 880px) { .bill-date { display: none; } }

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
}

/* Bouton « Plus » du dock mobile : masqué hors mobile portrait */
.nav-more-wrap { display: none; position: relative; }

/* Bloc bas du tableau de bord : « Prochains rendez-vous » + « À facturer » */
.dash-cols {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.next-appt {
  display: grid;
  grid-template-columns: 84px 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 22px;
  cursor: pointer;
  transition: background 0.12s;
}
.next-appt:hover { background: var(--bg-subtle); }
.next-appt.has-border { border-bottom: 1px solid var(--border); }
.next-appt-when { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.next-appt-time { font-weight: 600; }
.next-appt-main { min-width: 0; }
.next-appt-main > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-appt-amount { font-weight: 700; text-align: right; white-space: nowrap; }
.next-appt-chev { flex-shrink: 0; }

/* Mobile : une seule colonne, lignes restructurées proprement */
@media (max-width: 880px) {
  .dash-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .next-appt {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    gap: 2px 12px;
    padding: 13px 16px;
  }
  .next-appt-when {
    grid-row: 1;
    grid-column: 1;
    flex-direction: row;
    align-items: baseline;
    gap: 8px;
  }
  .next-appt-main { grid-row: 2; grid-column: 1; }
  .next-appt-amount { grid-row: 1; grid-column: 2; align-self: center; }
  .next-appt-chev { grid-row: 2; grid-column: 2; align-self: center; }
}
.section-head-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
}
.section-head-count {
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 999px;
}

.todo-row {
  display: grid;
  grid-template-columns: 4px 1fr 130px 110px;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  cursor: pointer;
  transition: background 0.12s;
}
.todo-row:hover { background: var(--bg-subtle); }
.todo-marker { width: 4px; align-self: stretch; background: var(--orange); border-radius: 2px; }
.todo-name { font-weight: 600; }
.todo-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }

/* ---------- Sidebar sub-nav (deuxième menu) ---------- */
/* Collé au menu principal, fond CLAIR (case), pousse la topbar comme
   le menu principal. Le séparateur reprend la couleur sombre du menu
   principal pour faire continuité visuelle. */
.main { position: relative; }
.main:has(.sublayout) {
  padding-left: 200px;
}
.sublayout {
  display: block;
  margin: 0;
  min-height: 0;
}
/* Toggle/scrim/bouton-fermer du tiroir secondaire : mobile uniquement */
.topbar-sub-toggle, .sub-scrim, .sub-side-close { display: none; }
.sub-side {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 200px;
  background: var(--bg-card);
  color: var(--fg);
  border: none;
  border-right: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 22px 12px 18px;
  overflow-y: auto;
  z-index: 6;
  display: flex;
  flex-direction: column;
}
.sub-side h2 {
  font-size: 11px;
  font-weight: 700;
  margin: 0 0 14px;
  padding: 0 10px 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-muted);
  border-bottom: 1px solid var(--border);
}
.sub-nav { display: flex; flex-direction: column; gap: 2px; }

/* Pied du menu secondaire + sélecteur de thème */
.sub-side-foot {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  justify-content: center;
}
.theme-switch {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.theme-switch-toggle {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  color: var(--fg-muted);
  transition: background 0.16s, color 0.16s, opacity 0.26s ease, transform 0.34s cubic-bezier(0.34, 1.56, 0.5, 1);
}
.theme-switch-toggle svg { display: block; }
.theme-switch-toggle:hover { background: var(--bg-hover); color: var(--fg); }
/* Pilule dépliée : masquée par défaut, remplace le bouton rond à l'ouverture */
.theme-pill {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(0.6);
  transform-origin: bottom center;
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.36s cubic-bezier(0.34, 1.56, 0.5, 1);
}
.theme-switch.open .theme-switch-toggle { opacity: 0; pointer-events: none; transform: scale(0.4) rotate(-30deg); }
.theme-switch.open .theme-pill { opacity: 1; pointer-events: auto; transform: translateX(-50%) scale(1); }
.theme-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: var(--accent);
  transition: transform 0.4s cubic-bezier(0.34, 1.4, 0.4, 1);
  z-index: 0;
}
.theme-opt {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  transition: color 0.18s, transform 0.18s;
}
.theme-opt svg { display: block; }
.theme-opt:hover { color: var(--fg); }
.theme-opt:active { transform: scale(0.86); }
.theme-opt.active { color: var(--check-ink, #2A2208); }
.sub-nav button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--fg-muted);
  font-weight: 500;
  text-align: left;
  width: 100%;
  box-shadow: none;
}
.sub-nav button:hover {
  background: var(--bg-subtle);
  color: var(--fg);
}
.sub-nav button.active {
  background: var(--bg-subtle);
  color: var(--fg);
  font-weight: 600;
}
.sub-nav button.active::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}
.sub-nav svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Variante pour la fiche patient : nom + ville sur fond clair */
.sub-side-patient {
  padding: 0 10px 14px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--border);
}
.sub-side-patient-name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--fg);
  line-height: 1.2;
}
.sub-side .muted,
.sub-side .small { color: var(--fg-muted); }
.sub-side .btn-ghost { color: var(--fg-muted); }
.sub-side .btn-ghost:hover {
  color: var(--fg);
  background: var(--bg-subtle);
}

/* La topbar a aussi sa bordure inférieure remplacée par la couleur du menu
   principal quand le sub-side est présent (continuité visuelle). */
.main:has(.sublayout) .topbar {
  border-bottom-color: var(--border);
}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  /* Référence unique du fond flou des modaux (aligné sur le modal RDV). */
  background: color-mix(in srgb, var(--bg-sidebar) 40%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: grid;
  place-items: center;
  animation: fade 0.22s ease;
}
.modal-backdrop.closing {
  animation: fadeOut 0.14s ease forwards;
}
.modal {
  background: var(--modal-glass);
  backdrop-filter: var(--modal-blur);
  -webkit-backdrop-filter: var(--modal-blur);
  border-radius: 18px;
  width: min(720px, 92vw);
  max-height: 88vh;
  overflow: hidden;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 18%, transparent);
  animation: pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
  display: flex;
  flex-direction: column;
}
.modal-backdrop.closing .modal {
  animation: popOut 0.14s ease forwards;
}
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes popOut {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(0.96); }
}
.modal-head {
  background: color-mix(in srgb, var(--modal-head-bg) 88%, transparent);
  color: var(--modal-head-fg);
  padding: 22px 26px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid color-mix(in srgb, var(--modal-head-fg) 10%, transparent);
}
.modal-head h3 { margin: 0; font-size: 22px; letter-spacing: -0.02em; font-weight: 700; }
.modal-head p { margin: 4px 0 0; color: var(--modal-head-fg-muted); font-size: 13.5px; }
.modal-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  color: var(--modal-head-fg);
  display: grid; place-items: center;
}
.modal-close:hover { background: color-mix(in srgb, var(--modal-head-fg) 12%, transparent); }
.modal-body { padding: 24px 26px; overflow-y: auto; }
/* Ascenseur fin et discret (au lieu de la bande système par défaut). */
.modal-body::-webkit-scrollbar { width: 8px; }
.modal-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 4px; }
.modal-body::-webkit-scrollbar-track { background: transparent; }
.modal-body { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
/* Modaux à étapes : hauteur constante d'une étape à l'autre. Le corps reste
   transparent pour partager le même matériau « verre » que l'en-tête et le
   pied — un seul panneau cohérent façon macOS ; la lisibilité vient du flou,
   pas d'un fond opaque. */
.wizard-body { height: 462px; }
.modal-foot {
  padding: 16px 26px;
  border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  background: color-mix(in srgb, var(--fg) 4%, transparent);
}
.modal-foot .spacer { flex: 1; }
/* Boutons icône-seule du pied de modale : pas de fond ni bordure au repos
   (même hauteur que les boutons texte pour l'alignement), fond contrasté
   au survol et au clic. */
.modal-foot .icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--fg-muted);
}
.modal-foot .icon-btn:hover {
  background: color-mix(in srgb, var(--fg) 12%, transparent);
  border-color: transparent;
  color: var(--fg);
}
.modal-foot .icon-btn:active {
  background: color-mix(in srgb, var(--fg) 20%, transparent);
  border-color: transparent;
  color: var(--fg);
  transform: scale(0.96);
}

/* ---------- Lecteur de facture (visionneuse PDF) ---------- */
.pdf-backdrop {
  position: fixed;
  inset: 0;
  z-index: 130;
  background: color-mix(in srgb, var(--bg-sidebar) 52%, transparent);
  backdrop-filter: blur(7px) saturate(1.3);
  -webkit-backdrop-filter: blur(7px) saturate(1.3);
  display: flex;
  flex-direction: column;
  animation: fade 0.22s ease;
}
.pdf-backdrop.closing { animation: fadeOut 0.14s ease forwards; }

.pdf-toolbar {
  flex-shrink: 0;
  height: 60px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: 0 18px;
  background: color-mix(in srgb, var(--bg-sidebar) 88%, transparent);
  color: var(--fg-sidebar);
  border-bottom: 1px solid color-mix(in srgb, #000 22%, transparent);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22);
}
.pdf-toolbar-side { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pdf-toolbar-right { justify-content: flex-end; }
.pdf-file-ic {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
  color: var(--accent);
}
.pdf-file-meta { display: flex; flex-direction: column; min-width: 0; }
.pdf-file-name { font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-file-sub { font-size: 11.5px; color: var(--fg-sidebar-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pdf-zoom {
  display: flex; align-items: center; gap: 2px;
  background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent);
  border-radius: 9px; padding: 3px;
}
.pdf-zoom-btn {
  width: 30px; height: 30px; border-radius: 7px;
  display: grid; place-items: center; color: var(--fg-sidebar);
  transition: background 0.14s;
}
.pdf-zoom-btn:hover { background: color-mix(in srgb, var(--fg-sidebar) 16%, transparent); }
.pdf-zoom-val {
  min-width: 56px; height: 30px; padding: 0 8px; border-radius: 7px;
  font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  color: var(--fg-sidebar); transition: background 0.14s;
}
.pdf-zoom-val:hover { background: color-mix(in srgb, var(--fg-sidebar) 16%, transparent); }

.pdf-tool-btn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 36px; padding: 0 14px; border-radius: 9px;
  font-size: 13px; font-weight: 600; color: var(--fg-sidebar);
  background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent);
  transition: background 0.14s, transform 0.1s;
}
.pdf-tool-btn:hover { background: color-mix(in srgb, var(--fg-sidebar) 18%, transparent); }
.pdf-tool-btn:active { transform: scale(0.97); }
.pdf-tool-close { width: 36px; padding: 0; justify-content: center; }
.pdf-tool-close:hover { background: var(--red); color: #fff; }

.pdf-scroll {
  flex: 1;
  overflow: auto;
  padding: 32px 24px 56px;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}
.pdf-scroll::-webkit-scrollbar { width: 12px; }
.pdf-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--fg-sidebar) 30%, transparent); border-radius: 6px; border: 3px solid transparent; background-clip: padding-box; }
.pdf-page-wrap {
  transform: scale(var(--pdf-zoom, 1));
  transform-origin: top center;
  transition: transform 0.16s ease;
}
.pdf-page {
  width: 794px;
  min-height: 1123px;
  background: #fff;
  color: #1c1c1a;
  box-shadow: 0 16px 60px rgba(0, 0, 0, 0.4);
  padding: 64px 60px;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  line-height: 1.5;
}

/* En-tête facture */
.inv-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; padding-bottom: 28px; border-bottom: 2px solid #1c1c1a; }
.inv-issuer { display: flex; gap: 16px; }
.inv-monogram {
  width: 48px; height: 48px; border-radius: 11px; flex-shrink: 0;
  background: #0F2419; color: #F1E9D4;
  display: grid; place-items: center; font-size: 22px; font-weight: 700;
}
.inv-issuer-name { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.inv-issuer-title { font-size: 13px; color: #6b6b64; margin-bottom: 8px; }
.inv-issuer-lines { display: flex; flex-direction: column; font-size: 12px; color: #45453f; }
.inv-doc-head { text-align: right; flex-shrink: 0; }
.inv-doc-title { font-size: 30px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #0F2419; }
.inv-doc-num { font-size: 13px; font-weight: 600; color: #45453f; margin: 4px 0 10px; }
.inv-doc-status {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.inv-doc-status.unpaid { background: #F5DCD7; color: #9c3030; }
.inv-doc-status.paid { background: #E1ECDC; color: #226641; }

/* Parties */
.inv-parties { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 30px; }
.inv-party-label { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a90; margin-bottom: 6px; }
.inv-party-name { font-size: 15px; font-weight: 700; margin-bottom: 5px; }
.inv-party-lines { display: flex; flex-direction: column; font-size: 12px; color: #45453f; gap: 1px; }

/* Tableau prestations */
.inv-table { width: 100%; border-collapse: collapse; margin-bottom: 4px; }
.inv-table thead th {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #9a9a90;
  text-align: left; padding: 0 0 10px; border-bottom: 1px solid #e2e2dc;
}
.inv-table tbody td { padding: 14px 0; font-size: 13px; border-bottom: 1px solid #efefe9; }
.inv-c-num { text-align: right; font-variant-numeric: tabular-nums; }
.inv-strong { font-weight: 700; }

/* Totaux + règlement */
.inv-totals-row { display: flex; justify-content: space-between; gap: 32px; margin-top: 26px; }
.inv-pay-note { font-size: 12px; color: #45453f; max-width: 320px; }
.inv-pay-title { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #9a9a90; margin-bottom: 6px; }
.inv-pay-note p { margin: 0 0 4px; }
.inv-iban { font-variant-numeric: tabular-nums; color: #1c1c1a; }
.inv-totals { width: 280px; flex-shrink: 0; }
.inv-total-line { display: flex; justify-content: space-between; font-size: 13px; padding: 7px 0; color: #45453f; }
.inv-total-line.grand {
  font-size: 17px; font-weight: 800; color: #0F2419;
  border-top: 2px solid #1c1c1a; margin-top: 4px; padding-top: 12px;
}
.inv-total-line.balance { margin-top: 8px; padding: 9px 12px; border-radius: 8px; background: #F5DCD7; color: #9c3030; font-weight: 700; white-space: nowrap; }
.inv-total-line.balance.paid { background: #E1ECDC; color: #226641; }

/* Pied de facture */
.inv-foot { margin-top: auto; padding-top: 28px; font-size: 10.5px; color: #9a9a90; line-height: 1.5; }
.inv-foot p { margin: 0 0 2px; }
.inv-foot-contact { margin-top: 8px !important; font-weight: 600; color: #6b6b64; }

/* Impression : on ne sort que la feuille A4, sans la barre d'outils. */
@media print {
  body * { visibility: hidden !important; }
  .pdf-backdrop, .pdf-backdrop * { visibility: visible !important; }
  .pdf-backdrop {
    position: absolute !important; inset: 0; display: block !important;
    background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  }
  .pdf-toolbar { display: none !important; }
  .pdf-scroll { overflow: visible !important; padding: 0 !important; display: block !important; }
  .pdf-page-wrap { transform: none !important; }
  .pdf-page {
    width: 100% !important; min-height: 0 !important; box-shadow: none !important;
    padding: 0 !important; margin: 0 !important;
  }
  @page { size: A4; margin: 14mm; }
}

.summary {
  background: var(--accent-soft);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 13.5px;
}
.summary-row.muted { color: var(--fg-muted); }
.summary-row.bold { font-weight: 700; font-size: 17px; border-top: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); padding-top: 10px; margin-top: 4px; color: var(--green); }

.kv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  padding: 20px 24px;
  background: var(--bg-subtle);
  border-radius: 14px;
}
.kv-label { font-size: 11px; color: var(--fg-muted); letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; }
.kv-value { font-weight: 700; font-size: 17px; margin-top: 2px; }
.kv-value.amount { color: var(--fg); }

/* ---------- Tarifs : liste (port fidèle du DS BillRates : rate-row) ---------- */
.rate-list { display: flex; flex-direction: column; }
.rate-row { display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); transition: background 0.12s; }
.rate-row:last-child { border-bottom: none; }
.rate-row:hover { background: var(--bg-subtle); }
.rate-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 2.5px color-mix(in srgb, currentColor 16%, transparent); }
.rate-main { flex: 1; min-width: 0; }
.rate-title-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rate-name { font-weight: 700; font-size: 14.5px; color: var(--fg); }
@media (max-width: 860px) {
  .rate-row { gap: 10px; padding: 11px 16px; }
}

/* ---------- Cabinet / messagerie ---------- */
.cabinet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.member-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}
.member-avatar {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 50%, #7a5a2a));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 22px;
  margin-bottom: 8px;
}
.member-name { font-weight: 700; font-size: 15px; }
.member-role { color: var(--fg-muted); font-size: 12.5px; }
.member-meta {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  width: 100%;
  justify-content: center;
}
.member-stat { text-align: center; font-size: 12px; color: var(--fg-muted); }
.member-stat strong { display: block; color: var(--fg); font-size: 18px; font-weight: 700; }

.chat {
  display: grid;
  grid-template-columns: 280px 1fr;
  height: 540px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
.chat-list { border-right: 1px solid var(--border); overflow-y: auto; }
.chat-item {
  display: flex;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  cursor: pointer;
  transition: background 0.12s;
}
.chat-item:hover { background: var(--bg-subtle); }
.chat-item.active { background: var(--accent-soft); }
.chat-item-avatar {
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-weight: 600;
  flex-shrink: 0;
}
.chat-item-name { font-weight: 600; font-size: 13.5px; }
.chat-item-preview { color: var(--fg-muted); font-size: 12px; margin-top: 2px; }
.chat-item-time { font-size: 11px; color: var(--fg-subtle); margin-left: auto; }

.chat-thread { display: flex; flex-direction: column; }
.chat-thread-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg-subtle);
}
.chat-thread-body {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.msg {
  max-width: 70%;
  padding: 9px 14px;
  border-radius: 16px;
  font-size: 13.5px;
  line-height: 1.4;
}
.msg.in {
  background: var(--bg-subtle);
  border-bottom-left-radius: 4px;
  align-self: flex-start;
}
.msg.out {
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.msg-time { font-size: 10.5px; color: var(--fg-subtle); margin-top: 4px; }
.chat-input {
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}
.chat-input input {
  flex: 1;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 9px 16px;
  font-size: 13.5px;
  outline: none;
}
.chat-input input:focus { border-color: var(--accent); }

/* ---------- Stats ---------- */
.chart-card { padding: 24px; }
.chart-card h3 { margin: 0 0 18px; font-size: 16px; font-weight: 700; }
.chart {
  height: 200px;
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.chart-bar {
  flex: 1;
  border-radius: 6px 6px 0 0;
  background: linear-gradient(to top, var(--bg-sidebar), color-mix(in srgb, var(--bg-sidebar) 70%, var(--accent)));
  position: relative;
  transition: opacity 0.15s;
  min-height: 4px;
}
.chart-bar:hover { opacity: 0.85; }
.chart-bar.accent {
  background: linear-gradient(to top, var(--accent), color-mix(in srgb, var(--accent) 60%, #fff));
}
.chart-x {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  font-size: 11px;
  color: var(--fg-muted);
}
.chart-x span { flex: 1; text-align: center; }

.donut {
  width: 160px; height: 160px;
  margin: 0 auto;
}

/* ---------- Settings forms ---------- */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.setting-row:last-child { border-bottom: none; }
.setting-label { font-weight: 600; font-size: 14px; }
.setting-help { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; max-width: 460px; }

.select {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg-subtle);
  font-size: 13px;
  font-weight: 500;
  min-width: 90px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.select:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.select[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  background: var(--accent-soft);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.select svg { width: 14px; height: 14px; color: var(--fg-muted); }
/* Select pleine largeur (ex. moyen de paiement dans la modale d'encaissement) */
.pay-method-select { display: flex; }
.pay-method-select, .pay-method-select > span, .pay-method-select > span > span { width: 100%; }
.pay-method-select .select { width: 100%; justify-content: space-between; padding: 11px 14px; min-width: 0; }

/* ---------- Notifications: bell dropdown ---------- */
.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  width: 380px;
  max-height: 540px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 16%, transparent);
  z-index: 50;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: slideDown 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  color: var(--fg);
}
.notif-head {
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: none;
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
}
.notif-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: var(--fg-sidebar); }
.notif-clear { font-size: 12px; color: var(--fg-sidebar); font-weight: 600; opacity: 0.85; }
.notif-clear:hover { opacity: 1; }
.notif-clear:hover { text-decoration: underline; }
.notif-list { overflow-y: auto; flex: 1; background: transparent; }
.notif-item {
  display: flex;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  cursor: pointer;
  transition: background 0.12s;
  position: relative;
}
.notif-item:hover { background: color-mix(in srgb, var(--fg) 6%, transparent); }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.notif-item.unread::before {
  content: '';
  position: absolute;
  left: 9px;
  top: 22px;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 999px;
}
.notif-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.notif-icon svg { width: 16px; height: 16px; }
.notif-icon.green { background: var(--green-soft); color: var(--green); }
.notif-icon.blue { background: var(--blue-soft); color: var(--blue); }
.notif-icon.orange { background: var(--orange-soft); color: var(--orange); }
.notif-icon.red { background: var(--red-soft); color: var(--red); }
.notif-icon.accent { background: var(--accent-soft); color: var(--accent); }
.notif-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; color: var(--fg); }
.notif-body { font-size: 12.5px; color: color-mix(in srgb, var(--fg) 70%, transparent); margin-top: 2px; line-height: 1.4; }
.notif-time { font-size: 11px; color: var(--fg-muted); margin-top: 4px; font-weight: 500; }
.notif-empty {
  padding: 60px 20px;
  text-align: center;
  color: var(--fg-muted);
  font-size: 13px;
}

/* ---------- macOS-style toast ---------- */
.toast-stack {
  position: fixed;
  top: 18px;
  right: 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Les toasts doivent toujours passer au-dessus de TOUT, y compris les modaux
     (modaux applicatifs, aperçu PDF z-index 10000, etc.). */
  z-index: 2147483001;
  width: 360px;
  pointer-events: none;
}
.toast {
  background: var(--notif-bg);
  color: var(--notif-fg);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 10px;
  max-height: 240px;
  overflow: hidden;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid color-mix(in srgb, var(--notif-fg) 12%, transparent);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25), inset 0 0 0 0.5px rgba(255, 255, 255, 0.14);
  pointer-events: auto;
  cursor: pointer;
  animation: toastIn 0.42s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  transition: max-height 0.34s cubic-bezier(0.4,0,0.2,1), opacity 0.26s ease, transform 0.28s ease, margin 0.34s cubic-bezier(0.4,0,0.2,1), padding 0.34s cubic-bezier(0.4,0,0.2,1);
}
.toast.out {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(-6px);
  pointer-events: none;
}
.toast-app {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 90%, white);
  color: #1a1306;
  display: grid; place-items: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.toast-content { flex: 1; min-width: 0; }
.toast-app-name {
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--notif-fg) 60%, transparent);
  font-weight: 600;
  margin-bottom: 1px;
}
.toast-title { font-weight: 600; font-size: 13.5px; line-height: 1.3; }
.toast-body {
  font-size: 12.5px;
  opacity: 0.85;
  line-height: 1.35;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast-close {
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--notif-fg);
  opacity: 0;
  background: color-mix(in srgb, var(--notif-fg) 10%, transparent);
  transition: opacity 0.15s;
}
.toast:hover .toast-close { opacity: 1; }

/* notif list item collapse-on-remove */
.notif-item {
  max-height: 200px;
  transition: max-height 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.22s ease, padding 0.3s cubic-bezier(0.4,0,0.2,1);
}
.notif-item.removing {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
  pointer-events: none;
}
.notif-item-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  color: var(--fg-subtle);
  opacity: 0;
  transition: opacity 0.15s, background 0.15s;
}
.notif-item:hover .notif-item-close { opacity: 1; }
.notif-item-close:hover { background: var(--bg-hover); color: var(--fg); }

/* ---------- Animations ---------- */
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes toastIn {
  0% { opacity: 0; transform: translateY(-16px) scale(0.96); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes toastOut {
  to { opacity: 0; transform: translateY(-12px) scale(0.97); }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ---------- Misc ---------- */
.row { display: flex; align-items: center; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 10px; }
.muted { color: var(--fg-muted); }
.small { font-size: 12.5px; }
.spacer { flex: 1; }
.divider { height: 1px; background: var(--border); margin: 12px 0; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-muted);
}
.tag svg { width: 13px; height: 13px; }
.tag:hover { border-color: var(--border-strong); color: var(--fg); }
/* Filtre appliqué (.active) ou menu ouvert (aria-expanded) : fond accentué */
.tag.active,
.tag[aria-expanded="true"] {
  background: var(--accent-soft);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--fg);
}
.tag[aria-expanded="true"] { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent); }

.no-scrollbar::-webkit-scrollbar { width: 6px; }
.no-scrollbar::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 3px; }
.no-scrollbar::-webkit-scrollbar-track { background: transparent; }

/* ================================================================
   FORM FIELDS — fond plus clair
   ================================================================
   Les champs de saisie utilisent --bg-input (plus clair que --bg-subtle)
   pour bien contraster avec la page. */
.field-card {
  background: var(--bg-input);
}
.search-input,
.cal-search {
  background: var(--bg-input);
}
.chat-input input {
  background: var(--bg-input);
}
.select {
  background: var(--bg-input);
}
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="password"],
textarea,
select {
  background: var(--bg-input);
}
.kv-grid {
  background: var(--bg-input);
}

/* ================================================================
   SIDEBAR NOTIFICATION (PC)
   ================================================================ */
.sidebar-notif-wrap {
  position: relative;
  padding: 0 0 6px;
}
.nav-notif {
  width: 100%;
  text-align: left;
}
.nav-notif-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sidebar-notif-dot {
  position: absolute;
  top: -2px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--accent);
  border: 2px solid var(--bg-sidebar);
}
.nav-notif-count {
  margin-left: auto;
  background: var(--accent);
  color: #1a1306;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  min-width: 18px;
  text-align: center;
}
/* Dropdown ancré à droite du sidebar */
.notif-dropdown-side {
  position: fixed;
  left: 232px;
  bottom: 120px;
  top: auto;
  right: auto;
  margin-top: 0;
  width: 360px;
  max-height: 60vh;
  animation: slideRight 0.2s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* Topbar divider (legacy) */
.topbar-divider {
  width: 1px;
  height: 22px;
  background: var(--border);
}

/* ================================================================
   RESPONSIVE — PC / TABLETTE / MOBILE
   ================================================================
   Breakpoints :
   - ≥ 1100px : sidebar 240px + sub-side sombre 200px collé, topbar
                avec barre d'actions rapides complète.
   - 700–1099px : sidebar collapse en rail d'icônes (72px), labels
                  des actions rapides masqués (icônes seules).
   - < 700px : sidebar devient une barre de navigation horizontale
               en bas. Sub-nav devient onglets horizontaux scrollables.
               Toasts collés en haut près de l'icône de notification.
   ================================================================ */

/* --- Tablette (≤ 1099px) --- */
@media (max-width: 1099px) {
  /* Toast stack : centré en largeur sous la barre du haut */
  .toast-stack {
    top: 56px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(420px, calc(100vw - 24px));
    align-items: stretch;
  }
  /* Factures : n° + date passent sous le nom du patient (gain de largeur) */
  .bill-row .bill-num,
  .bill-row .bill-date { display: none; }
  .bill-submeta {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--fg-muted);
    margin-top: 2px;
  }
  .bill-submeta-inline { display: inline; }
  .bill-name { display: flex; flex-direction: column; gap: 1px; white-space: normal; }
  .sidebar {
    width: 72px;
    padding: 24px 10px 12px;
    align-items: center;
  }
  .brand {
    padding: 4px 0 16px;
    margin-bottom: 10px;
    justify-content: center;
    border-bottom: 1px solid color-mix(in srgb, var(--fg-sidebar) 12%, transparent);
    width: 100%;
  }
  .brand-word { display: none; }
  .brand-mark { display: block; }
  .nav-item {
    justify-content: center;
    padding: 12px 0;
    width: 48px;
    height: 44px;
    gap: 0;
  }
  .nav-item.active::before {
    left: -10px;
  }
  .nav-label { display: none; }

  .user-card {
    justify-content: center;
    padding: 12px 0;
  }
  .user-meta { display: none; }
  .user-avatar { width: 36px; height: 36px; }

  /* Rail 72px : les deux boutons du pied s'empilent, en icône seule ;
     l'interaction passe par la bulle de confirmation (tactile/tablette). */
  .sidebar-footer {
    flex-direction: column;
    gap: 4px;
    padding: 12px 0 0;
    align-items: center;
  }
  .sf-btn { justify-content: center; padding: 8px; }
  .sf-confirm { left: 0; }

  /* Topbar : actions rapides plus compactes — masquer les labels textuels */
  .topbar { padding: 12px 20px; }
  .quick-action span,
  .quick-action {
    font-size: 12.5px;
  }
  .quick-kbd { display: none; }
  .cabinet-pick span { display: none; }

  /* Sub-side : reste 200px sombre mais légèrement plus compact */
  .sublayout {
    margin: -8px -28px -50px -28px;
    min-height: calc(100vh - 64px);
  }
  .sublayout > :not(.sub-side) { padding: 16px 28px 50px; }

  .page { padding: 8px 28px 50px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .cabinet-grid { grid-template-columns: repeat(2, 1fr); }
  .fiche { grid-template-columns: 1fr; }
}

/* --- Mobile (≤ 699px) --- */
@media (max-width: 699px) {
  body { font-size: 13.5px; }

  /* Barre calendrier (mobile/tablette) : icônes séparées façon iPhone
     (recherche, vues, filtres) ; le bouton Créer devient un FAB flottant. */
  .cal-tb-right { display: none; }
  .cal-icon-bar { display: flex; }
  .cal-fab {
    display: grid;
    place-items: center;
    position: fixed;
    right: 16px;
    bottom: 80px;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    padding: 0;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
    box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 16%, transparent);
    z-index: 60;
  }
  .cal-fab:hover { background: var(--glass-bg); }

  /* Vue iPhone : on remplace la grille horaire par la grille de jours + agenda.
     Le sélecteur de vue (Mois/Semaine/Jour) n'a plus de sens ici. */
  .cal-scroll { display: none; }
  #calendar-view { display: none; }
  .cal-mobile { display: block; flex: 1; min-height: 0; overflow-y: auto; }
  .cal-view-wrap { display: none; }
  /* Recherche mobile : bulle ancrée sous la loupe, au-dessus de la vue. */
  .cal-search-bubble {
    width: min(340px, calc(100vw - 24px));
    z-index: 200;
  }
  .cal-search-scrim { z-index: 199; }

  /* Calendrier plein écran sur mobile : pas de marge latérale ni de coins
     arrondis sur la grille, pour maximiser la surface affichée. */
  .page-calendar { padding: 4px 0 0; }
  .page-calendar .cal-toolbar,
  .page-calendar .cal-search-mobile { padding-left: 14px; padding-right: 14px; }
  .cal-scroll { border-radius: 0; }
  .cal-grid { border-left: none; border-right: none; border-radius: 0; }
  /* Barre d'outils compacte : titre + icônes sur la même ligne (gain de hauteur),
     navigation + plage de dates dessous. */
  .page-calendar .cal-toolbar { margin-bottom: 8px; row-gap: 8px; column-gap: 10px; align-items: center; }
  .cal-tb-left { display: contents; }
  .cal-title { order: 1; flex: 1 1 auto; font-size: 21px; }
  .cal-icon-bar { order: 2; margin-left: auto; }
  .cal-pager { order: 3; }
  .cal-range { order: 4; flex: 1 1 auto; text-align: right; font-size: 15px; }
  .cal-pager .btn-sm { padding: 6px 10px; }
  /* La rangée de filtres devient un tiroir coulissant depuis le bas */
  .cal-filters {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 130;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    margin: 0;
    padding: 18px 16px calc(18px + env(safe-area-inset-bottom));
    background: var(--bg-elevated);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 40px rgba(0,0,0,0.18);
    /* Fermé : masqué + léger décalage. À l'état OUVERT on retire toute
       transform : sinon le tiroir deviendrait le bloc conteneur des menus
       (position:fixed) et les déroulants des filtres s'ouvriraient hors écran. */
    visibility: hidden;
    opacity: 0;
    transform: translateY(18px);
    transition: transform 0.28s cubic-bezier(0.3, 0.9, 0.3, 1), opacity 0.22s ease, visibility 0.28s;
  }
  .cal-filters.tools-open { visibility: visible; opacity: 1; transform: none; }
  .cal-tools-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-sidebar) 45%, transparent);
    z-index: 129;
    animation: fadeIn 0.2s ease;
  }
  .cal-tools-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: var(--bg-subtle);
    color: var(--fg-muted);
  }
  .cal-search-inline { display: none; }
  .cal-filters .cal-search { flex: none; width: 100%; }
  .cal-filters .cal-mine { width: 100%; justify-content: flex-start; }
  /* Filtres compacts : une rangée d'onglets qui s'enroule (au lieu de trois
     boutons pleine largeur empilés) → occupe le moins de place possible. */
  .cal-filter-chips { width: 100%; flex-wrap: wrap; }
  .cal-filters .cal-filter-chips .tag { flex: 1 1 auto; width: auto; justify-content: center; }
  .cal-filters::before {
    content: 'Filtres';
    font-weight: 700;
    font-size: 15px;
    color: var(--fg);
    padding-right: 40px;
  }

  /* Recherche mobile : barre dépliée sous la toolbar */
  .cal-search-mobile {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    animation: slideDown 0.2s ease;
  }
  .cal-search-mobile .cal-search { flex: 1; }

  /* Toast : pleine largeur, centré sous la barre du haut */
  .toast-stack {
    top: 52px;
    left: 8px;
    right: 8px;
    transform: none;
    width: auto;
  }

  /* SaveBar du design system : sur petit écran on resserre et on masque le
     libellé « Réinitialiser » (l'icône suffit), le message reste prioritaire. */
  .snt-savebar { padding: 8px 10px 8px 14px; gap: 10px; }
  .snt-savebar__actions .snt-btn--secondary span { display: none; }

  .app {
    flex-direction: column;
    height: 100vh;
  }

  /* Sidebar → dock horizontal en bas */
  .sidebar {
    order: 2;
    width: 100%;
    height: 64px;
    flex-direction: row;
    padding: 0;
    border-right: none;
    border-top: 1px solid var(--border);
    align-items: stretch;
    justify-content: space-around;
    z-index: 30;
    position: relative;
  }
  .brand { display: none; }
  .nav {
    flex-direction: row;
    margin: 0;
    flex: 1;
    justify-content: space-around;
    align-items: center;
    gap: 0;
    padding: 0 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav-item {
    flex: 1;
    max-width: 96px;
    min-width: 48px;
    height: 100%;
    flex-shrink: 0;
    padding: 0;
    border-radius: 8px;
  }
  .nav-item.active::before {
    left: 50%;
    transform: translateX(-50%);
    top: auto;
    bottom: -2px;
    width: 24px;
    height: 3px;
    border-radius: 3px 3px 0 0;
  }
  /* Dock mobile : 4 entrées principales + bouton « Plus ». Les autres
     (Statistiques, Cabinet, Paramètres) passent dans la feuille « Plus ».
     Les boutons remplissent toute la hauteur/largeur disponible pour
     offrir une cible tactile généreuse, sans changer l'aspect des icônes. */
  .nav { overflow: visible; justify-content: space-around; align-items: stretch; padding: 0 4px; }
  .nav-overflow { display: none; }
  .nav-more-wrap { display: flex; align-items: stretch; justify-content: center; flex: 1; max-width: 96px; min-width: 48px; }
  .nav-more-btn { width: 100%; height: 100%; padding: 0; }
  .nav-more-scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-sidebar) 45%, transparent);
    z-index: 40;
    animation: fadeIn 0.16s ease;
  }
  .nav-more-sheet {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 6px;
    min-width: 248px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow-lg);
    padding: 8px;
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 2px;
    animation: sheetUp 0.2s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .nav-more-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 13px 14px;
    border-radius: 11px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--fg);
    text-align: left;
  }
  .nav-more-item svg { color: var(--fg-muted); flex-shrink: 0; }
  .nav-more-item:hover { background: var(--bg-hover); }
  .nav-more-item.active { background: var(--bg-sidebar); color: var(--fg-sidebar); }
  .nav-more-item.active svg { color: var(--fg-sidebar); }
  .nav-more-item.danger { color: var(--red); }
  .nav-more-item.danger svg { color: var(--red); }
  /* En-tête profil + séparateur en tête de la feuille « Plus » (mobile) */
  .nav-more-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--border);
  }
  .nav-more-user .user-avatar { width: 40px; height: 40px; }
  .nav-more-user .user-name { color: var(--fg); }
  .nav-more-user .user-role { color: var(--fg-muted); }
  .nav-more-sep { height: 1px; background: var(--border); margin: 4px 6px; }
  .sidebar-bottom { display: none; }

  .main {
    order: 1;
    flex: 1;
    min-height: 0;
  }

  .topbar {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: nowrap;
  }
  .topbar .btn { padding: 6px 10px; font-size: 12.5px; }
  .topbar-divider { display: none; }
  /* Quick-actions : un seul bouton « + » (menu) + recherche extensible + cloche */
  .quick-actions { gap: 8px; }
  .qa-full { display: none; }
  .qa-compact { display: inline-flex; }
  .qa-divider { display: none; }
  .quick-action svg { width: 16px; height: 16px; }
  .quick-search { display: flex; flex: 1; }
  .quick-kbd { display: none; }
  .cabinet-pick { display: none; }

  .page {
    padding: 4px 14px 24px;
  }
  .page-title { font-size: 24px; }
  .page-header { gap: 12px; }
  .greeting { flex-direction: column; gap: 12px; }
  .greeting-actions { flex-wrap: wrap; }

  /* Sublayout mobile : la barre secondaire devient un TIROIR glissant
     depuis la gauche, déclenché par un bouton « toggle ». */
  .main:has(.sublayout) { padding-left: 0; }
  .sublayout {
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0;
    min-height: 0;
  }
  .sublayout > :not(.sub-side):not(.sub-scrim) { padding: 0; }

  /* Bouton d'ouverture du tiroir, intégré à la barre du haut (gauche) +
     titre de la section, comme un en-tête contextuel. */
  .topbar-sub-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 7px 10px 7px 6px;
    margin-right: 4px;
    border-radius: 10px;
    color: var(--fg);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    max-width: 48vw;
  }
  .topbar-sub-toggle:hover { background: var(--bg-hover); }
  .topbar-sub-toggle svg { color: var(--fg-muted); flex-shrink: 0; }
  .topbar-sub-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  /* Sur ces pages, la recherche du haut laisse la place au titre contextuel */
  .topbar:has(.topbar-sub-toggle) .global-search { display: none; }
  .topbar:has(.topbar-sub-toggle) .qa-divider { display: none; }
  .topbar:has(.topbar-sub-toggle) .quick-actions { flex: 1; justify-content: flex-end; }

  .sub-scrim {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-sidebar) 50%, transparent);
    backdrop-filter: blur(2px);
    z-index: 90;
    animation: fadeIn 0.18s ease;
  }
  .sub-side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 84vw;
    z-index: 91;
    background: var(--bg-card);
    color: var(--fg);
    border: none;
    border-right: 1px solid var(--border);
    border-radius: 0;
    padding: 18px 14px;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform 0.26s cubic-bezier(0.3, 0.9, 0.3, 1);
    box-shadow: none;
  }
  .sub-side.open { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,0.25); }
  .sub-side .sub-side-foot { margin-top: auto; padding-top: 18px; justify-content: flex-start; }
  .sub-side-close {
    display: grid;
    place-items: center;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    color: var(--fg-muted);
    background: var(--bg-subtle);
  }
  .sub-side h2 { display: block; padding-right: 40px; }
  .sub-side-patient {
    padding: 8px 4px 12px;
    margin-bottom: 8px;
    border-bottom-color: var(--border);
  }
  .sub-side-patient-name { color: var(--fg); }
  .sub-side .muted, .sub-side .small { color: var(--fg-muted); }
  .sub-side .btn-ghost { color: var(--fg-muted); }
  .sub-side .btn-ghost:hover { color: var(--fg); background: var(--bg-subtle); }
  /* Nav verticale dans le tiroir */
  .sub-nav { flex-direction: column; gap: 2px; overflow: visible; }
  .sub-nav button {
    width: 100%;
    padding: 12px 14px;
    font-size: 14px;
    color: var(--fg-muted);
    white-space: normal;
  }
  .sub-nav button:hover { color: var(--fg); background: var(--bg-subtle); }
  .sub-nav button.active {
    background: var(--bg-subtle);
    color: var(--fg);
    box-shadow: none;
    border-radius: 8px;
  }
  .sub-nav button.active::before { display: block; }

  /* Stats / cards : 1 colonne */
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .stat { padding: 14px; gap: 10px; }
  .stat-value { font-size: 18px; }
  .cabinet-grid { grid-template-columns: 1fr; }

  /* Hero */
  .hero { padding: 20px; min-height: 0; }
  .hero-cta-row { grid-template-columns: 1fr; }
  /* Lignes de rendez-vous (aperçu de la journée) plus basses, action à droite. */
  .appt { gap: 10px; padding: 9px 12px; }
  .appt-time { min-width: 0; font-size: 13px; }
  .appt-amount { margin-right: 2px; }
  .appt-icon { margin-left: auto; }
  .hero-date { font-size: 18px; }
  .hero-count strong { font-size: 24px; }

  /* Liste patients : sur mobile, on masque dernière visite / prochain RDV /
     solde — le drapeau € près du nom signale déjà les impayés. On conserve
     la carte (fond, bordure, coins arrondis) et les couleurs. */
  .table.table-dense {
    display: table;
    white-space: normal;
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    background: var(--bg-card);
  }
  .table.table-dense th:nth-child(3),
  .table.table-dense td:nth-child(3),
  .table.table-dense th:nth-child(4),
  .table.table-dense td:nth-child(4),
  .table.table-dense th:nth-child(5),
  .table.table-dense td:nth-child(5) { display: none; }
  /* Coins arrondis explicites (les <table> ne clippent pas toujours le radius) */
  .table.table-dense thead th:first-child { border-top-left-radius: 14px; }
  .table.table-dense thead th.th-actions { border-top-right-radius: 14px; }
  .table.table-dense tfoot td { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }
  .table.table-dense .th-actions,
  .table.table-dense .td-actions { width: 96px; }
  .table.table-dense .td-actions .row-actions { width: 76px; }

  /* Tables : scroll horizontal */
  .table { display: block; overflow-x: auto; white-space: nowrap; }

  /* Lignes de facturation : empilées */
  .bill-row {
    display: grid;
    grid-template-columns: 4px 1fr auto;
    grid-template-rows: auto auto;
    gap: 4px 10px;
    padding: 12px 14px;
    --actions-w: auto;
  }
  .bill-row .bill-marker { grid-row: 1 / span 2; }
  .bill-row .bill-name { grid-column: 2; grid-row: 1; white-space: normal; }
  .bill-row .bill-amount-col { grid-column: 3; grid-row: 1; width: auto; align-self: start; }
  .bill-row .row-actions { grid-column: 2 / 4; grid-row: 2; justify-content: flex-end; width: auto; }
  .bill-row.selectable { grid-template-columns: auto 4px 1fr auto; }
  .bill-row.selectable .bill-check { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .bill-row.selectable .bill-marker { grid-column: 2; grid-row: 1 / span 2; }
  .bill-row.selectable .bill-name { grid-column: 3; grid-row: 1; }
  .bill-row.selectable .bill-amount-col { grid-column: 4; grid-row: 1; }
  .bill-row.selectable .row-actions { grid-column: 3 / 5; grid-row: 2; }

  .todo-row { grid-template-columns: 4px 1fr auto; gap: 6px 10px; padding: 12px 14px; }
  .todo-row .muted { font-size: 12px; }

  /* Calendar : la grille reste 7 colonnes mais plus compacte */
  .cal-grid { grid-template-columns: 40px repeat(7, minmax(0, 1fr)); font-size: 11px; --cal-gutter: 40px; }
  .cal-head { padding: 8px 4px; font-size: 10px; }
  .cal-head .day-num { font-size: 16px; }
  .cal-time { font-size: 9px; padding: 2px 4px; }
  .cal-tb-right .cal-search { display: none; }
  .cal-range { font-size: 15px; min-width: 0; }

  /* Chat : empilé */
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat-list {
    display: flex;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .chat-item {
    flex-shrink: 0;
    min-width: 220px;
    border-bottom: none;
    border-right: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  }
  .chat-thread { min-height: 360px; }

  /* Modals : pleine largeur */
  .modal { width: 100vw; max-height: 100vh; border-radius: 0; height: 100vh; }
  .modal-body { padding: 18px; }
  .wizard-body { height: auto; flex: 1; }
  .modal-head { padding: 16px 18px; }
  .kv-grid { grid-template-columns: 1fr; gap: 12px; padding: 14px; }

  /* Notif dropdown : descend de l'icône en haut à droite */
  .notif-dropdown {
    position: fixed;
    top: 56px;
    bottom: auto;
    right: 8px;
    left: 8px;
    width: auto;
    max-height: 70vh;
    margin-top: 0;
  }

}
/* --- Très petits écrans (< 380px) : encore plus compact --- */
@media (max-width: 379px) {
  .quick-actions { gap: 4px; }
  .stats-grid { grid-template-columns: 1fr; }
  .page-title { font-size: 20px; }
}

/* ================================================================
   PRESTATIONS — sélecteur deux colonnes + panier
   ================================================================ */
.presta-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.presta-col { display: flex; flex-direction: column; min-width: 0; }
.presta-col-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 12px;
}
.presta-col-count {
  background: var(--accent);
  color: #1a1306;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
}
.presta-search-row { display: flex; gap: 10px; margin-bottom: 12px; }
.presta-add-btn {
  width: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  display: grid;
  place-items: center;
  transition: background 0.15s, transform 0.08s;
}
.presta-add-btn:hover { background: var(--bg-sidebar-active); }
.presta-add-btn:active { transform: scale(0.94); }

.presta-avail {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  overflow-y: auto;
  max-height: 320px;
}
.presta-avail-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  transition: background 0.12s;
}
.presta-avail-row:last-child { border-bottom: none; }
.presta-avail-row:hover { background: var(--bg-subtle); }
.presta-avail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.presta-avail-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.presta-avail-meta { font-size: 13px; color: var(--fg-muted); }
.presta-avail-plus {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.presta-avail-row:hover .presta-avail-plus { background: var(--accent); color: #1a1306; }
.presta-avail-empty { padding: 28px 16px; text-align: center; color: var(--fg-subtle); font-size: 13px; }

/* Panier (droite) */
.presta-cart-empty {
  border: 1.5px dashed var(--border-strong);
  border-radius: 14px;
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  color: var(--fg-subtle);
  padding: 20px;
}
.presta-cart-empty svg { color: var(--border-strong); }
.presta-cart-empty-title { font-weight: 600; font-size: 14px; color: var(--fg-muted); margin-top: 8px; }
.presta-cart-empty-sub { font-size: 13px; }

.presta-cart {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-card);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.presta-cart-list { max-height: 270px; overflow-y: auto; }
.presta-cart-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.presta-cart-row .icon-btn { width: 30px; height: 30px; color: var(--fg-muted); }
.presta-cart-row .icon-btn:hover { background: var(--bg-hover); color: var(--fg); }
.presta-cart-main { flex: 1; min-width: 0; }
.presta-cart-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.presta-cart-meta { font-size: 13px; color: var(--fg-muted); margin-top: 1px; }
.presta-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-top: 1px solid var(--border);
  font-weight: 600;
  font-size: 14px;
}
.presta-cart-total strong { font-size: 16px; }

/* Modale "Personnaliser la prestation" */
.presta-edit-backdrop { z-index: 240; }
.presta-edit {
  width: min(440px, 92vw);
  border-radius: 18px;
  overflow: hidden;
}
.presta-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 24px 4px;
}
.presta-edit-head h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.modal-close.light {
  position: static;
  background: var(--bg-subtle);
  color: var(--fg-muted);
}
.presta-edit-body { padding: 16px 24px 4px; }
.input-suffix {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding-right: 14px;
  transition: border-color 0.15s;
}
.input-suffix:focus-within { border-color: var(--accent); }
.input-suffix input {
  flex: 1;
  border: none !important;
  outline: none;
  padding: 11px 14px;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  width: 100%;
}
.input-suffix .suffix { color: var(--fg-muted); font-size: 14px; flex-shrink: 0; }
.presta-edit-dur-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.dur-chip {
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  transition: all 0.12s;
}
.dur-chip:hover { border-color: var(--border-strong); }
.dur-chip.active { background: var(--bg-sidebar); color: var(--fg-sidebar); border-color: var(--bg-sidebar); }
.presta-edit-foot {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 20px 24px 24px;
}

@media (max-width: 699px) {
  .presta-cols { grid-template-columns: 1fr; }
}

/* Étape « prestations » : les deux colonnes occupent toute la hauteur du modal.
   Le défilement se fait DANS chaque encart ; la ligne de total reste fixe. */
.wizard-body-presta { display: flex; flex-direction: column; overflow: hidden; }
.wizard-body-presta .presta-cols { flex: 1; min-height: 0; align-items: stretch; }
.wizard-body-presta .presta-col { min-height: 0; }
.wizard-body-presta .presta-avail { flex: 1; min-height: 0; max-height: none; }
.wizard-body-presta .presta-cart-empty { flex: 1; }
.wizard-body-presta .presta-cart { flex: 1; min-height: 0; }
.wizard-body-presta .presta-cart-list { flex: 1; min-height: 0; max-height: none; }
@media (max-width: 699px) {
  /* En pleine hauteur mobile, on garde le défilement interne mais empilé. */
  .wizard-body-presta .presta-cols { grid-auto-rows: minmax(0, 1fr); }
}

/* ================================================================
   TOPBAR — boutons d'action en icônes seules
   ================================================================
   Les actions rapides (Nouveau RDV / patient / facture) deviennent
   des boutons-icônes ronds comme la cloche de notification. La barre
   prend déjà la couleur des cases (--bg-card). */
.quick-actions .icon-btn.qa {
  width: 36px;
  height: 36px;
}
.quick-actions .icon-btn.qa.qa-primary {
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
}
.quick-actions .icon-btn.qa.qa-primary:hover { background: var(--bg-sidebar-active); }
.qa-divider { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
/* Groupe d'actions plein (desktop) vs compact (mobile) */
.qa-full { display: flex; align-items: center; gap: 10px; }
.qa-compact { display: none; }

/* Tooltip simple pour les icônes de la topbar */
.tt { position: relative; }
.tt::after {
  content: attr(data-tt);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--bg-sidebar);
  color: var(--fg-sidebar);
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
  padding: 5px 9px;
  border-radius: 7px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 60;
  box-shadow: var(--shadow-md);
}
.tt:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Dans les modaux, les infobulles s'affichent au-dessus (le pied de modal est
   collé au bas de la fenêtre → une bulle en dessous serait coupée). */
.modal .tt::after,
.modal-backdrop .tt::after {
  top: auto;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
}
.modal .tt:hover::after,
.modal-backdrop .tt:hover::after { transform: translateX(-50%) translateY(0); }

/* ================================================================
   RECHERCHE GLOBALE — panneau de résultats responsive
   ================================================================
   PC / tablette : menu flottant ancré sous le champ.
   Mobile : feuille plein écran sous la barre supérieure. */
.global-search {
  position: relative;
  flex: 1;
  min-width: 0;
  display: flex;
}
.global-search .quick-search { width: 100%; }
.search-clear {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  color: var(--fg-muted);
  flex-shrink: 0;
}
.search-clear:hover { background: var(--bg-hover); color: var(--fg); }

.search-scrim { display: none; }

.search-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  min-width: 380px;
  max-height: min(560px, 70vh);
  display: flex;
  flex-direction: column;
  background: color-mix(in srgb, var(--bg-elevated) 80%, transparent);
  backdrop-filter: blur(28px) saturate(1.8);
  -webkit-backdrop-filter: blur(28px) saturate(1.8);
  border: 1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: 16px;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 16%, transparent);
  z-index: 120;
  overflow: hidden;
  animation: menuPop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.05);
}
/* En-tête (champ de recherche dédié) : masqué sur desktop, visible sur mobile */
.search-panel-head { display: none; }

.search-panel-body { overflow-y: auto; padding: 8px; }

.search-section { padding: 4px 0 8px; }
.search-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px 6px;
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 700;
}
.search-section-count {
  background: var(--bg-subtle);
  color: var(--fg-muted);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10.5px;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  text-align: left;
  transition: background 0.1s;
}
.search-row.active, .search-row:hover { background: var(--bg-hover); }
.search-row--suggest { cursor: pointer; }
.search-row-del {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: var(--fg-subtle);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.search-row--suggest:hover .search-row-del { opacity: 1; }
.search-row-del:hover { background: color-mix(in srgb, var(--fg) 10%, transparent); color: var(--fg); }
@media (hover: none) { .search-row-del { opacity: 1; } }
.search-row-ico {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--bg-subtle);
  color: var(--fg-muted);
  flex-shrink: 0;
}
.search-row-ico.patients { background: var(--blue-soft); color: var(--blue); }
.search-row-ico.invoices { background: var(--green-soft); color: var(--green); }
.search-row-ico.appts { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 70%, var(--fg)); }
.search-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.search-row-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row-meta { font-size: 12.5px; color: var(--fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row-right { font-weight: 700; font-size: 13px; flex-shrink: 0; }
.search-row-right.red { color: var(--red); }

.search-empty { text-align: center; padding: 44px 20px; color: var(--fg-muted); }
.search-empty svg { color: var(--fg-subtle); display: block; margin: 0 auto; }

.search-panel-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  font-size: 11.5px;
  color: var(--fg-muted);
  background: color-mix(in srgb, var(--bg-subtle) 55%, transparent);
}
.search-kbd {
  display: inline-grid;
  place-items: center;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  border-radius: 4px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-size: 10.5px;
  font-family: inherit;
  margin: 0 1px;
}

/* --- Mobile : feuille plein écran --- */
@media (max-width: 699px) {
  .search-scrim {
    display: block;
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--bg-sidebar) 55%, transparent);
    backdrop-filter: blur(2px);
    z-index: 119;
    animation: fadeIn 0.18s ease;
  }
  .search-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    min-width: 0;
    max-height: none;
    border-radius: 0;
    border: none;
    animation: sheetUp 0.24s cubic-bezier(0.2, 0.9, 0.3, 1);
  }
  .search-panel-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
  }
  .search-panel-head svg { color: var(--fg-muted); flex-shrink: 0; }
  .search-panel-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    color: var(--fg);
  }
  .search-panel-close {
    font-size: 14px;
    font-weight: 600;
    color: var(--accent);
    flex-shrink: 0;
    padding: 4px 6px;
  }
  .search-panel-body { padding: 8px 8px 24px; }
  .search-row { padding: 13px 12px; }
  .search-row-title { font-size: 15px; }
  .search-panel-foot { display: none; }
}
@keyframes sheetUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ================================================================
   ACTION MENU — popover de menu d'actions réutilisable
   ================================================================
   Utilisé pour le menu « … » des listes (factures) et le menu
   contextuel d'un rendez-vous sur le calendrier. */
.menu-pop {
  position: absolute;
  min-width: 230px;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow-lg), inset 0 0 0 0.5px color-mix(in srgb, #fff 14%, transparent);
  padding: 6px;
  z-index: 80;
  animation: menuPop 0.16s cubic-bezier(0.2, 0.9, 0.3, 1.05);
  overflow: hidden;
}
@keyframes menuPop {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--fg);
  text-align: left;
  transition: background 0.12s, color 0.12s;
}
.menu-item:hover { background: var(--bg-hover); }
.menu-item svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--fg-muted); }
.menu-item .menu-chev { margin-left: auto; color: var(--fg-subtle); }
.menu-item.green svg { color: var(--green); }
.menu-item.red, .menu-item.red svg { color: var(--red); }
.menu-item.orange svg { color: var(--orange); }
.menu-item.disabled {
  color: var(--fg-subtle);
  cursor: default;
}
.menu-item.disabled svg { color: var(--fg-subtle); }
.menu-item.disabled:hover { background: none; }
.menu-item .menu-soon { color: var(--fg-subtle); font-weight: 500; font-size: 12px; }
/* Élément sélectionné : fond légèrement teinté + coche dorée à droite */
.menu-item.selected { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.menu-item.selected:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.menu-item.selected > span:first-of-type { font-weight: 600; }
.menu-item .menu-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-check-slot { width: 16px; height: 16px; flex-shrink: 0; display: grid; place-items: center; color: var(--accent); margin-left: 6px; }
.menu-check-slot svg { width: 16px; height: 16px; }
.menu-check { margin-left: auto; color: var(--accent); width: 16px; height: 16px; }
/* Recherche intégrée au menu (listes longues) */
.menu-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 4px 6px;
  padding: 8px 10px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.menu-search svg { color: var(--fg-muted); flex-shrink: 0; }
.menu-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 13.5px; color: var(--fg); min-width: 0; }
.menu-empty { padding: 18px 12px; text-align: center; color: var(--fg-subtle); font-size: 13px; }
.menu-flag { font-size: 17px; line-height: 1; flex-shrink: 0; }
.menu-trailing { color: var(--fg-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; margin-left: 8px; }
.menu-item.selected .menu-trailing { color: var(--accent); }

/* Champ téléphone : indicatif + numéro */
.phone-field {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-card);
}
.phone-field:focus-within { border-color: var(--accent); }
.dial-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--bg-subtle);
  border-right: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--fg);
  white-space: nowrap;
  transition: background 0.12s;
}
.dial-trigger:hover { background: var(--bg-hover); }
.dial-trigger[aria-expanded="true"] { background: var(--accent-soft); }
.dial-flag { font-size: 18px; line-height: 1; }
.dial-code { font-variant-numeric: tabular-nums; }
.dial-trigger svg { color: var(--fg-muted); }
.phone-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 11px 14px;
  font-size: 14px;
  color: var(--fg);
  min-width: 0;
}
/* Posé dans un .form-field, l'input téléphone ne doit PAS reprendre le style
   générique des inputs (bordure + coins arrondis) : il reste nu et collé à la
   pastille d'indicatif — une seule bordure, portée par .phone-field. */
.form-field .phone-field .phone-input,
.phone-field input.phone-input {
  border: none;
  border-radius: 0;
  background: transparent;
  padding: 11px 14px;
}
.form-field .phone-field .phone-input:focus,
.phone-field input.phone-input:focus { border: none; }

/* ================================================================
   PARAMÈTRES — barre d'enregistrement / réinitialisation
   ================================================================ */
.settings-main {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.settings-content { flex: 1; }
.savebar-status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fg-muted);
}
/* Tonalités du design system : « à jour » vert, « non enregistré » orange,
   « enregistrement en cours » neutre. */
.savebar-status { color: var(--green); }
.savebar-status.dirty { color: var(--orange); }
.savebar-status.saving { color: var(--fg-muted); }
.savebar-status.error { color: var(--red); }
.savebar-dot {
  width: 8px; height: 8px;
  border-radius: 999px;
  background: var(--accent);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);
  animation: savebarPulse 1.6s infinite;
}
@keyframes savebarPulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
  70% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
.savebar-spin { display: inline-flex; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* Crayon « qui écrit » : léger va-et-vient + frémissement */
.savebar-pencil {
  display: inline-flex;
  color: var(--accent);
  transform-origin: bottom left;
  animation: pencilWrite 1.1s ease-in-out infinite;
}
@keyframes pencilWrite {
  0%   { transform: translate(0, 0) rotate(-4deg); }
  25%  { transform: translate(1px, -1px) rotate(2deg); }
  50%  { transform: translate(2px, 0) rotate(-3deg); }
  75%  { transform: translate(1px, -1px) rotate(3deg); }
  100% { transform: translate(0, 0) rotate(-4deg); }
}
.savebar-actions { display: flex; gap: 10px; }
/* Bouton « Enregistrer » : flash de validation quand l'enregistrement réussit */
.savebar-save.is-saving {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  animation: savedPop 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3);
}
@keyframes savedPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.08); }
  100% { transform: scale(1); }
}


/* ================================================================
   PHOTO DE PROFIL — module d'import et de recadrage (DS)
   Porté fidèlement de la maquette (ui_kits/app/PhotoCropModal.jsx
   + ui_kits/app/app.css). Plein écran, pas une boîte de dialogue :
   voile sombre avec une découpe circulaire qui laisse le reste de
   la photo visible en transparence.
   ================================================================ */
/* Photo crop module — fullscreen (not a dialog): dim scrim with a circular cut-out that
   keeps the rest of the photo visible in transparency beyond the frame. */
.crop-overlay { position: fixed; inset: 0; z-index: 300; background: color-mix(in srgb, var(--bg-sidebar) 94%, transparent); backdrop-filter: blur(24px) saturate(1.4); display: flex; flex-direction: column; animation: sntFade 0.16s ease; }
.crop-overlay-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; flex-shrink: 0; }
.crop-overlay-title { font-size: 16px; font-weight: 700; color: var(--fg-sidebar); }
.crop-overlay-close { width: 36px; height: 36px; border-radius: 999px; display: grid; place-items: center; color: var(--fg-sidebar-muted); flex-shrink: 0; }
.crop-overlay-close:hover { background: color-mix(in srgb, var(--fg-sidebar) 12%, transparent); color: var(--fg-sidebar); }
.crop-dragzone { flex: 1; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; min-height: 0; }
.crop-dragzone:active { cursor: grabbing; }
.crop-frame { position: absolute; top: 50%; left: 50%; width: min(260px, 62vw, 46vh); height: min(260px, 62vw, 46vh); transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 2000px color-mix(in srgb, var(--bg-sidebar) 62%, transparent), inset 0 0 0 2px var(--accent); pointer-events: none; }
.crop-overlay-foot { flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; align-items: center; padding: 16px 24px 24px; }
.crop-overlay-actions { display: flex; gap: 10px; }
.crop-dropzone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 40px 44px; border: 1px dashed color-mix(in srgb, var(--fg-sidebar) 30%, transparent); border-radius: var(--radius-lg); color: var(--fg-sidebar-muted); cursor: pointer; text-align: center; }
.crop-dropzone:hover { border-color: var(--accent); color: var(--accent); }
.crop-dropzone-title { font-size: 14px; font-weight: 600; color: var(--fg-sidebar); }
.crop-dropzone:hover .crop-dropzone-title { color: var(--accent); }
.crop-dropzone-sub { font-size: 12.5px; }
.crop-controls { display: flex; align-items: center; gap: 10px; color: var(--fg-sidebar-muted); width: 100%; max-width: 260px; }
.crop-zoom { flex: 1; accent-color: var(--accent); }
.crop-change-btn { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--fg-sidebar) 25%, transparent); background: transparent; color: var(--fg-sidebar-muted); font-size: 12.5px; font-weight: 600; }
.crop-change-btn:hover { background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent); color: var(--fg-sidebar); }

/* ================================================================
   PARAMÈTRES — primitives du design system (.set-*)
   Reprises telles quelles de la maquette (ui_kits/app/app.css).
   ================================================================ */
.set-content { display: flex; flex-direction: column; }

/* Grille de champs à deux colonnes. min-width:0 sur les enfants : sans lui,
   un élément de grille reste figé à la largeur de son contenu et la colonne
   refuse de se réduire. */
.set-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.set-grid > * { min-width: 0; }
.set-grid--full { grid-column: 1 / -1; }
@media (max-width: 760px) { .set-grid { grid-template-columns: 1fr; } }

/* Valeur non modifiable, présentée comme un champ mais inerte. */
.set-readonly {
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--fg);
  overflow-wrap: anywhere;
}

/* Ligne de réglage : libellé + aide à gauche, contrôle à droite.
   S'utilise dans une carte .snt-card--flush. */
.set-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.set-row:last-child { border-bottom: none; }
.set-row-text { flex: 1; min-width: 0; }
.set-row-label { font-weight: 600; font-size: 14px; color: var(--fg); }
.set-row-help { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.set-row-control { flex-shrink: 0; display: flex; align-items: center; gap: 10px; }
.set-row.is-disabled { opacity: 0.45; pointer-events: none; }
@media (max-width: 620px) {
  .set-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .set-row-control { justify-content: flex-start; }
}

/* Liste déroulante .snt-select pilotée par Alpine : le composant React du DS
   positionne son menu via un portail (position: fixed) ; hors React on reste en
   absolu, le reste (verre, options, option courante) vient de components.css. */
.snt-select__label { flex: 1; min-width: 0; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snt-select > svg { flex-shrink: 0; transition: transform 0.18s var(--ease-out, ease); }
.snt-select[aria-expanded="true"] > svg { transform: rotate(180deg); }
.snt-select__menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 100%; z-index: 130; }
.snt-select__option { display: flex; align-items: center; justify-content: space-between; gap: 9px; width: 100%; cursor: pointer; }
.snt-select__option-label { flex: 1; min-width: 0; }
.snt-select__option-check { display: inline-flex; flex-shrink: 0; color: var(--accent); }
.snt-select__option-check svg { width: 15px; height: 15px; }

/* Les titres de cartes passent désormais par l'en-tête normalisé du design
   system (.snt-card__head / __title / __description, cf. components.css). */

/* Sélecteur de thème épinglé au pied du menu des paramètres :
   pilule à trois positions, l'indicateur glisse sous l'option active. */
.set-theme-switch {
  position: relative;
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill, 999px);
  padding: 3px;
}
.set-theme-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill, 999px);
  background: var(--bg-sidebar);
  box-shadow: var(--shadow-control);
  transform: translateX(0);
  transition: transform 0.32s var(--ease-spring, cubic-bezier(0.34, 1.56, 0.5, 1)), background 0.2s ease;
  pointer-events: none;
}
.set-theme-switch:has(button:nth-child(2).on)::before { transform: translateX(34px); }
.set-theme-switch:has(button:nth-child(3).on)::before { transform: translateX(68px); }
@media (prefers-reduced-motion: reduce) { .set-theme-switch::before { transition: background 0.2s ease; } }
.set-theme-switch button {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill, 999px);
  display: grid;
  place-items: center;
  color: var(--fg-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color 0.15s;
}
.set-theme-switch button:hover { color: var(--fg); }
.set-theme-switch button.on { color: var(--accent); }
/* Thème clair : pastille légèrement dorée plutôt que grise. */
[data-theme="light"] .set-theme-switch::before { background: #ECDCAC; }


.menu-sep { height: 1px; background: var(--border); margin: 6px 4px; }

/* Sous-menu (flyout) — ex. motifs d'annulation d'un RDV */
.menu-sub-wrap { position: relative; }
.menu-item.is-open { background: var(--bg-hover); }
.menu-flyout {
  position: absolute;
  top: -6px;
  left: calc(100% + 4px);
  min-width: 230px;
  z-index: 90;
}
.menu-flyout-label {
  padding: 8px 12px 6px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 700;
}
.menu-item-stack { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.menu-item-help { font-size: 11.5px; color: var(--fg-muted); font-weight: 500; }
/* Pastille d'icône colorée dans le menu de choix du type de création */
.create-kind-ico {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.create-kind-ico.accent { background: var(--accent-soft); color: color-mix(in srgb, var(--accent) 80%, var(--fg)); }
.create-kind-ico.blue { background: var(--blue-soft); color: var(--blue); }
.create-kind-ico.orange { background: var(--orange-soft); color: var(--orange); }
.create-menu .menu-item { gap: 12px; padding: 10px 12px; }
.menu-item.red .menu-item-help { color: color-mix(in srgb, var(--red) 70%, var(--fg-muted)); }
/* Sens d'ouverture dynamique du flyout (calculé en JS selon la place dispo) :
   flip-x → à gauche du parent, flip-y → vers le haut. */
.menu-flyout.flip-x { left: auto; right: calc(100% + 4px); }
.menu-flyout.flip-y { top: auto; bottom: -6px; }

/* ================================================================
   LISTES — boutons d'action de taille raisonnable
   ================================================================ */
.row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  justify-self: end;
  justify-content: flex-end;
  overflow: hidden;
}
.row-actions .icon-btn {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  color: var(--fg-muted);
}
.row-actions .icon-btn svg { width: 16px; height: 16px; }
.row-actions .icon-btn.green:hover { color: var(--green); background: var(--green-soft); }
.row-actions .icon-btn:hover { color: var(--fg); background: var(--bg-hover); }

/* Largeur du bloc d'actions : pilote le nombre d'icônes visibles (le reste
   bascule dans le menu « … »). RowActions mesure cette largeur en JS. */
.bill-row { --actions-w: 150px; }
@media (max-width: 1199px) { .bill-row { --actions-w: 116px; } }
@media (max-width: 999px) { .bill-row { --actions-w: 82px; } }

/* ================================================================
   APERÇU DE LA JOURNÉE — états vides
   ================================================================ */
.hero-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 32px 20px;
  position: relative;
  z-index: 1;
}
.hero-empty-icon {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  color: var(--fg-sidebar);
  margin-bottom: 10px;
}
.hero-empty-icon svg { width: 56px; height: 56px; stroke-width: 1.5; }
.hero-empty-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--fg-sidebar);
}
.hero-empty-sub {
  font-size: 14.5px;
  color: var(--fg-sidebar-muted);
}
.hero-empty-cta {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 16%, transparent);
  color: var(--fg-sidebar);
  font-weight: 600;
  font-size: 14px;
  transition: background 0.18s, transform 0.08s;
}
.hero-empty-cta:hover { background: color-mix(in srgb, var(--fg-sidebar) 16%, transparent); }
.hero-empty-cta:active { transform: scale(0.97); }
.hero-empty-cta.accent {
  background: var(--accent);
  color: #1a1306;
  border-color: var(--accent);
}
.hero-empty-cta.accent:hover { filter: brightness(1.05); background: var(--accent); }
.hero-empty-actions { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; justify-content: center; }
.hero-empty-actions .hero-empty-cta { margin-top: 0; }

/* Pager segmenté de l'aperçu de la journée (Hier / Demain) */
.hero-pager {
  display: inline-flex;
  align-items: stretch;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--fg-sidebar) 16%, transparent);
}
.hero-pager button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 13px;
  color: var(--fg-sidebar);
  font-size: 13px;
  font-weight: 600;
  transition: background 0.15s;
}
.hero-pager button:hover { background: color-mix(in srgb, var(--fg-sidebar) 10%, transparent); }
.hero-pager button + button { border-left: 1px solid color-mix(in srgb, var(--fg-sidebar) 16%, transparent); }

/* ================================================================
   CALENDRIER — vue jour, ligne « maintenant », clic-pour-créer
   ================================================================ */
.cal-grid.day { grid-template-columns: 70px 1fr; --cal-gutter: 70px; }
.cal-grid.day .cal-head:last-child { border-right: none; }

/* Cellule cliquable : « + » au survol */
.cal-cell { cursor: pointer; }
.cal-cell .cal-add {
  position: absolute;
  inset: 2px;
  border-radius: 7px;
  border: 1.5px dashed var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.12s;
  pointer-events: none;
  z-index: 1;
}
.cal-cell:hover .cal-add { opacity: 1; }
.cal-cell.day-cell { height: 64px; }
/* Sous-lignes (quart d'heure en vue jour, demi-heure en semaine) */
.cal-subline {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed color-mix(in srgb, var(--border) 60%, transparent);
  pointer-events: none;
}

/* ================================================================
   MODALES — wizard de création (RDV / facture / alerte)
   ================================================================
   Header = couleur dominante (menu), corps = composants,
   footer = bouton d'action principal à droite + annulation +
   petits boutons d'icônes. */
.modal-head-badge {
  display: flex;
  align-items: center;
  gap: 14px;
}
.modal-head-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--accent);
  color: #2A2208;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.modal-head-icon svg { width: 22px; height: 22px; }
/* Variante danger (en-tête rouge) : carré verre translucide sur fond rouge. */
.modal-head-icon--danger { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* Barre de progression segmentée */
/* Barre d'étapes du wizard — conforme au Design System (.wiz-segbar). */
.wizard-steps {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 0 4px;
}
.wiz-segbar {
  position: relative;
  flex: 1;
  height: 5px;
  border-radius: 999px;
  background: var(--border);
  overflow: hidden;
}
.wiz-segbar-fill {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) { .wiz-segbar-fill { transition: none; } }
/* Rétro-compat : ancienne classe .seg-bar */
.wizard-steps .seg-bar { flex: 1; height: 5px; border-radius: 999px; background: var(--border); overflow: hidden; }
.wizard-steps .seg-bar.done { background: var(--bg-sidebar); }
.wizard-steps .seg-bar.current { background: var(--accent); }

.wizard-q {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 4px;
}
.wizard-q { color: var(--fg); }
.wizard-sub { color: var(--fg-muted); font-size: 14px; margin: 0 0 14px; line-height: 1.5; }
.wizard-sub strong { color: var(--fg); font-weight: 700; }

/* Liste de sélection (patients / prestations) */
.pick-list {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-input);
  overflow: hidden;
  max-height: 280px;
  overflow-y: auto;
}
.pick-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
  cursor: pointer;
  transition: background 0.12s;
}
.pick-row:last-child { border-bottom: none; }
.pick-row:hover { background: var(--bg-subtle); }
.pick-row.selected { background: transparent; color: var(--fg); }
.pick-row.selected:hover { background: var(--bg-subtle); }
.pick-row.selected .pick-meta { color: var(--fg-muted); }
.pick-row.selected .pick-dot-icon { color: var(--fg-subtle); }
.pick-row.selected .pick-name { font-weight: 700; }
.pick-main { flex: 1; min-width: 0; }
/* Avatar initiales du sélecteur de praticien */
.pick-avatar {
  width: 34px; height: 34px; border-radius: 999px;
  display: grid; place-items: center; flex-shrink: 0;
  font-size: 12px; font-weight: 700; color: #fff;
  letter-spacing: 0.02em;
}
.pick-name { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.pick-meta { font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }
.pick-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }
.pick-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  background: var(--bg-card);
  transition: all 0.12s;
}
.pick-row.selected .pick-check {
  background: var(--check-fill);
  border-color: var(--check-fill);
  color: var(--check-ink);
}
.pick-check svg { width: 14px; height: 14px; opacity: 0; stroke-width: 2.75; }
.pick-row.selected .pick-check svg { opacity: 1; }

.wizard-search {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 11px 14px;
  margin-bottom: 14px;
}
.wizard-search input { flex: 1; border: none; outline: none; background: transparent; font-size: 14px; }
.wizard-search svg { width: 16px; height: 16px; color: var(--fg-muted); }

/* Type de lieu (Cabinet / Visio / Tél / Domicile / Autre) */
.loc-types {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.loc-type {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 8px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--fg-muted);
  font-size: 13px;
  font-weight: 600;
  transition: all 0.14s;
}
.loc-type svg { width: 20px; height: 20px; }
.loc-type:hover { border-color: var(--border-strong); background: var(--bg-subtle); }
.loc-type.active {
  background: color-mix(in srgb, var(--bg-sidebar) 88%, var(--green));
  border-color: transparent;
  color: #fff;
}

/* Toggle de partage */
.wizard-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
.wizard-toggle-row .wt-text { flex: 1; }
.wizard-toggle-row .wt-title { font-weight: 600; font-size: 14px; }
.wizard-toggle-row .wt-help { font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }

/* Footer de wizard : beige, action principale à droite */
.modal-foot.wizard {
  border-top: 1px solid color-mix(in srgb, var(--fg) 9%, transparent);
  justify-content: space-between;
}
.modal-foot.wizard .foot-left { display: flex; gap: 10px; }
.modal-foot.wizard .foot-right { display: flex; gap: 10px; align-items: center; }
.btn-soft {
  background: var(--bg-card);
  color: var(--fg);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}
.btn-soft:hover { background: var(--bg-subtle); }
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Créneaux (date + heure) */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.slot-day {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 320px;
}
.slot-day-head {
  text-align: center;
  padding: 10px 6px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 1;
  flex-shrink: 0;
}
.slot-day-name { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-muted); font-weight: 700; }
.slot-day-num { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.slot-day-mon { font-size: 11px; color: var(--fg-muted); }
.slot-times { padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow-y: auto; flex: 1; }
.slot-time {
  padding: 7px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--bg-input);
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  flex-shrink: 0;
  transition: all 0.12s;
}
.slot-time:hover { border-color: var(--accent); background: var(--accent-soft); }
.slot-time.selected { background: var(--bg-sidebar); color: var(--fg-sidebar); border-color: var(--bg-sidebar); }
.slot-empty { text-align: center; color: var(--fg-subtle); font-style: italic; padding: 24px 6px; font-size: 13px; }

/* Champs simples du modal RDV (calendrier.php) */
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.form-field label { font-weight: 600; font-size: 14px; }
.form-field label .req { color: var(--red); }
.form-field input[type="text"],
.form-field input[type="datetime-local"],
.form-field input[type="date"],
.form-field input[type="number"],
.form-field input[type="tel"],
.form-field input[type="email"],
.form-field input[type="search"],
.form-field input[type="password"],
.form-field textarea,
.form-field select {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 11px 14px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
  background: var(--bg-input);
  color: var(--fg);
  font-family: inherit;
}
/* État invalide (spec Design .snt-input--invalid) */
.form-field input.input-error,
.form-field textarea.input-error,
.form-field .input-error { border-color: var(--red); }
.form-field .input-error:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
/* Champ date : aligner la hauteur des autres champs et teinter l'icône calendrier. */
.form-field input[type="date"] { min-height: 44px; font-variant-numeric: tabular-nums; }
.form-field input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.6; }
.form-field input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--fg-subtle); }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.form-field textarea { resize: vertical; min-height: 80px; font-family: inherit; }

/* Lignes de prestation éditables (création de facture) */
.presta-row {
  display: grid;
  grid-template-columns: 1fr 70px 110px 70px 110px 32px;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
.presta-row.head {
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-muted);
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-top: 0;
}
.presta-row input {
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 9px;
  font-size: 13.5px;
  background: transparent;
  outline: none;
  width: 100%;
}
.presta-row input:hover { background: var(--bg-subtle); }
.presta-row input:focus { background: var(--bg-input); border-color: var(--accent); }
.presta-row .ta-right { text-align: right; }

/* Modale d'alerte */
.alert-modal .modal-head { background: color-mix(in srgb, var(--modal-head-bg) 80%, transparent); }
.alert-modal.danger .modal-head { background: color-mix(in srgb, var(--red) 80%, transparent); color: #fff; }
.alert-body {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.alert-ico {
  width: 48px; height: 48px;
  border-radius: 999px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.alert-ico.danger { background: var(--red-soft); color: var(--red); }
.alert-ico.warning { background: var(--orange-soft); color: var(--orange); }
.alert-ico svg { width: 24px; height: 24px; }

@media (max-width: 699px) {
  .loc-types { grid-template-columns: repeat(3, 1fr); }
  .slot-grid { grid-template-columns: repeat(2, 1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .presta-row { grid-template-columns: 1fr 50px 90px 60px 90px 28px; gap: 6px; font-size: 12px; }
}

/* En-têtes de tableau triables + table dense (liste patients) */
.table.table-dense thead th { padding: 9px 16px; }
.table.table-dense td { padding: 10px 16px; }
.th-sort { cursor: pointer; user-select: none; transition: color 0.12s, background 0.12s; }
.th-sort:hover { background: var(--bg-hover); color: var(--fg); }
.th-sort.active { color: var(--accent); }
.th-sort-inner { display: inline-flex; align-items: center; gap: 5px; }
.th-sort-sub {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 10px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 1px 6px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.th-actions { width: 160px; text-align: right; }
.td-actions { width: 160px; }
.td-actions .row-actions { width: 140px; margin-left: auto; }

/* Drapeau impayé accolé au nom */
.impaye-flag {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--red-soft);
  color: var(--red);
  margin-left: 7px;
  vertical-align: middle;
}
.patient-name { display: inline-flex; align-items: center; }

/* ================================================================
   LISTE PATIENTS — tri (Nom / Prénom) + pagination « afficher plus »
   ================================================================ */
.sort-seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 3px;
}
.sort-seg-label { font-size: 12.5px; color: var(--fg-muted); padding: 0 6px 0 4px; font-weight: 500; }
.sort-seg button {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  transition: background 0.12s, color 0.12s;
}
.sort-seg button.active {
  background: var(--bg-card);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
}
.list-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 0 8px;
}
.list-more-cell {
  padding: 0 !important;
  border-top: 1px solid var(--border);
  background: var(--bg-subtle);
}
.list-more-count { font-size: 13px; color: var(--fg-muted); font-weight: 500; }
.list-more-count-only { display: block; text-align: center; padding: 14px 18px; }
.list-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--accent);
  padding: 14px 18px;
  transition: background 0.12s;
}
.list-more-btn:hover { background: var(--accent-soft); }
/* La dernière ligne de données ne porte plus le radius : c'est le tfoot qui le porte */
.table.table-dense tbody tr:last-child td { border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.table.table-dense tfoot td:first-child { border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; }

/* ================================================================
   CALENDRIER — en-têtes densifiés (plus de grille visible dessous)
   ================================================================ */
.cal-title { font-size: 24px; }
.page-calendar .cal-toolbar { margin-bottom: 10px; }

/* Calendrier responsive : sous 1024px, le bloc de droite (recherche + vues +
   Créer) passe pleine largeur sous le bloc de gauche (titre + navigation +
   plage), et la recherche s'étire pour occuper l'espace. */
@media (max-width: 1024px) {
  .cal-tb-left, .cal-tb-right { flex: 1 1 100%; }
  .cal-tb-right { justify-content: flex-start; }
  .cal-search { flex: 1 1 auto; }
}
@media (max-width: 560px) {
  .cal-tb-right { flex-wrap: wrap; }
  .cal-search { flex: 1 1 100%; order: 3; }
  .cal-create { flex: 1 1 auto; justify-content: center; }
}
.cal-filters {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
  align-items: center;
  flex-wrap: nowrap;
}
/* Tous les contrôles de la rangée de filtres partagent la même hauteur et le
   même style rectangulaire que la recherche, pour une entête harmonieuse.
   La recherche absorbe/relâche l'espace libre (pas de blanc résiduel). */
.cal-filters .cal-search {
  flex: 1 1 80px;
  min-width: 80px;
  height: 38px;
  padding: 0 12px;
}
.cal-mine {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--fg-muted);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-mine input { accent-color: var(--accent); }
.cal-filters .tag {
  height: 38px;
  padding: 0 13px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  background: var(--bg-card);
  white-space: nowrap;
  flex-shrink: 0;
}
.cal-filters .tag svg { width: 15px; height: 15px; }
/* Les trois filtres regroupés dans une rangée compacte (desktop). */
.cal-filter-chips { display: flex; gap: 8px; flex: 0 0 auto; }
.page-calendar .cal-head { padding: 8px 8px; }
.page-calendar .cal-head .day-num { font-size: 19px; margin-top: 1px; }

/* ================================================================
   SÉLECTEUR DE CABINET
   ================================================================ */
.cab-pick-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.cab-pick-card {
  text-align: left;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.08s;
}
.cab-pick-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cab-pick-card:active { transform: translateY(0); }
.cab-pick-top { display: flex; align-items: center; gap: 14px; }
.cab-pick-badge {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  flex-shrink: 0;
}
.cab-pick-headings { flex: 1; min-width: 0; }
.cab-pick-name { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.cab-pick-loc { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--fg-muted); margin-top: 2px; }
.cab-pick-loc svg { color: var(--fg-subtle); }
.cab-pick-addr { font-size: 13px; color: var(--fg-muted); line-height: 1.4; }
.cab-pick-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--fg-muted);
  padding: 12px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.cab-pick-stats strong { color: var(--fg); font-weight: 700; }
.cab-pick-dot { width: 3px; height: 3px; border-radius: 999px; background: var(--border-strong); flex-shrink: 0; }
.cab-pick-foot { display: flex; align-items: center; justify-content: space-between; }
.cab-pick-role {
  font-size: 12px;
  font-weight: 600;
  color: var(--fg-muted);
  background: var(--bg-subtle);
  padding: 4px 10px;
  border-radius: 999px;
}
.cab-pick-open {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--accent);
}
.cab-pick-card:hover .cab-pick-open { gap: 9px; }

.cab-pick-add {
  align-items: center;
  justify-content: center;
  text-align: center;
  border: 2px dashed var(--border-strong);
  background: transparent;
  color: var(--fg-muted);
  min-height: 220px;
  gap: 6px;
}
.cab-pick-add:hover { background: var(--bg-subtle); border-color: var(--accent); transform: none; box-shadow: none; }
.cab-pick-add-icon {
  width: 60px;
  height: 60px;
  border-radius: 999px;
  background: var(--bg-subtle);
  display: grid;
  place-items: center;
  margin-bottom: 4px;
}
.cab-pick-add-title { font-weight: 700; font-size: 15px; color: var(--fg); }

/* Modale de création de cabinet — header illustré */
.cab-create-modal { overflow: hidden; }
.cab-create-hero {
  position: relative;
  background: var(--modal-head-bg);
  color: var(--modal-head-fg);
  padding: 22px 26px;
  display: flex;
  align-items: center;
  gap: 18px;
  overflow: hidden;
}
.cab-create-illus {
  width: 120px;
  height: 120px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.28));
  animation: cabIllusIn 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes cabIllusIn { from { opacity: 0; transform: translateY(14px) scale(0.94); } to { opacity: 1; transform: none; } }
.cab-create-hero-text h3 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.cab-create-hero-text p { margin: 5px 0 0; font-size: 14px; color: var(--modal-head-fg-muted); }

/* ================================================================
   SKELETON LOADER — beige/doré animé (réutilisable)
   ================================================================ */
/* Nouveau skeleton loader — aligné sur le Design System (.snt-skeleton) :
   dégradé beige/doré animé par background-position (shimmer sntShimmer). */
.skeleton {
  position: relative;
  overflow: hidden;
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--accent) 14%, var(--bg-subtle)) 30%,
    color-mix(in srgb, var(--accent) 34%, var(--bg-card)) 50%,
    color-mix(in srgb, var(--accent) 14%, var(--bg-subtle)) 70%);
  background-size: 200% 100%;
  animation: sntShimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
}
.skeleton::after { content: none; } /* neutralise l'ancien balayage translateX */
@keyframes skeletonSweep { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
/* ================================================================
   SQUELETTE CALENDRIER (calendrier.php, x-show="loading")
   ----------------------------------------------------------------
   Principe : réutiliser les classes de structure réelles (.cal-toolbar,
   .cal-body, .cal-filter-rail, .cal-grid, .cal-head, .cal-time, .cal-cell,
   .cal-month-*, .cal-m-*) et n'y placer que des barres .skeleton (shimmer
   doré du DS). La géométrie du squelette est donc, par construction, celle
   du calendrier rendu : pas de saut de mise en page à la fin du chargement.
   ================================================================ */
.cal-skel { animation: calSkelFade 0.22s ease-out; }
@keyframes calSkelFade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .cal-skel { animation: none; } }
/* Le squelette n'est pas interactif : ni clic, ni curseur « créer », ni survol. */
.cal-skel, .cal-skel * { pointer-events: none; user-select: none; }
.cal-skel .cal-cell:hover, .cal-skel .cal-month-cell:hover { background: inherit; }

/* Formes de base. NB : les sélecteurs sont qualifiés par .cal-skel car
   styles-auth.css redéfinit `.skeleton` (position/border-radius) et se charge
   APRÈS styles.css — une simple classe se ferait écraser. */
.cal-skel .cal-skel-bar { display: inline-block; border-radius: var(--radius-sm); flex-shrink: 0; }
.cal-skel .cal-skel-btn { display: inline-block; height: 38px; border-radius: var(--radius); flex-shrink: 0; }
.cal-skel .cal-skel-chip { display: inline-block; border-radius: 999px; flex-shrink: 0; }

/* ---- Commandes permanentes de la barre d'outils ----
   Ces contrôles (Filtres, recherche, ‹ Aujourd'hui ›, Mois/Semaine/Jour, Créer)
   existent à l'identique à chaque chargement : le squelette réutilise leurs
   vraies classes (.cal-filter-toggle, .cal-pager-btn, .btn, .seg…) et ne
   remplace que le contenu (icône + libellé) par du shimmer. Les hauteurs
   explicites ci-dessous reproduisent la boîte de ligne du texte absent, pour
   des gabarits identiques au pixel : 91×38 (Filtres), 38×38 (recherche),
   32×32 (chevrons), 92×32 (Aujourd'hui), 201×39 (segment), 94×42 (Créer). */
/* Glyphes réels (filtre, loupe, chevrons, +) : mêmes SVG que les vrais boutons,
   en teinte atténuée — ils ne dépendent d'aucune donnée, donc autant les
   dessiner plutôt que de les remplacer par un carré. */
.cal-skel .cal-skel-glyph { width: 17px; height: 17px; flex-shrink: 0; color: var(--fg-subtle); }
.cal-skel .cal-pager-btn .cal-skel-glyph { width: 18px; height: 18px; }
.cal-skel .cal-skel-create .cal-skel-glyph { width: 16px; height: 16px; color: color-mix(in srgb, var(--btn-primary-fg) 55%, transparent); }
.cal-skel .cal-skel-lbl { height: 11px; border-radius: 4px; }
.cal-skel .cal-skel-pager .btn-sm { height: 32px; }
/* Segment : mêmes retraits que .seg button, pilule active identique */
.cal-skel .cal-skel-segitem { display: inline-flex; align-items: center; justify-content: center; height: 31px; padding: 0 14px; border-radius: var(--radius-sm); }
.cal-skel .cal-skel-segitem .skeleton { height: 11px; border-radius: 4px; }
.cal-skel .cal-skel-segitem.is-active { background: var(--bg-sidebar); }
[data-theme="light"] .cal-skel .cal-skel-segitem.is-active { background: #2A2D2A; }
/* Bouton Créer : on garde le vrai fond accentué → shimmer inversé à l'intérieur
   (le dégradé doré sur beige serait invisible sur ce fond sombre). */
.cal-skel .cal-skel-create { height: 42px; }
.cal-skel .cal-skel-create .skeleton,
.cal-skel .cal-skel-segitem.is-active .skeleton {
  background: linear-gradient(100deg,
    color-mix(in srgb, var(--fg-sidebar) 16%, transparent) 30%,
    color-mix(in srgb, var(--fg-sidebar) 38%, transparent) 50%,
    color-mix(in srgb, var(--fg-sidebar) 16%, transparent) 70%);
  background-size: 200% 100%;
}

/* Colonne de droite : même flex que #calendar-view dans .cal-body */
.cal-body .cal-skel-view { flex: 1 1 auto; min-width: 0; }

/* Rail de filtres */
.cal-skel-check { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; }
.cal-skel-rail .cal-filter-rail__body { padding-bottom: 8px; }

/* Grille horaire : en-têtes empilés (jour + numéro), heures alignées à droite */
.cal-skel-grid .cal-head { display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cal-skel-grid .cal-time { display: flex; align-items: flex-start; justify-content: flex-end; }
.cal-skel-grid .cal-cell { overflow: hidden; }
.cal-skel .cal-skel-ev { position: absolute; left: 4px; right: 4px; border-radius: 6px; }
/* Bandeau « toute la journée » (mêmes bordures/hauteur que le rendu réel) */
.cal-skel-adgutter { display: grid; place-items: center; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); height: 32px; }
.cal-skel-adband { grid-column: 2 / -1; position: relative; height: 32px; border-bottom: 1px solid var(--border); }
/* Vue « Jour » : une seule colonne, les 6 autres disparaissent de la grille */
.cal-skel-grid.is-day { grid-template-columns: 60px minmax(0, 1fr); }
.cal-skel-grid.is-day .cal-skel-x { display: none; }

/* Grille mensuelle */
.cal-skel-month .cal-month-dow { display: flex; justify-content: center; }
.cal-skel-month .cal-month-events { display: flex; flex-direction: column; gap: 3px; }

/* Vue mobile : suit exactement les règles d'affichage de .cal-mobile */
.cal-skel-mobile { display: none; }
.cal-skel-mobile .cal-m-cell { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.cal-skel-mrow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
.cal-skel-mrow:last-child { border-bottom: none; }
@media (max-width: 900px) {
  /* Le rail est un tiroir en mobile : jamais de squelette de tiroir ouvert. */
  .cal-skel-rail { display: none !important; }
}
@media (max-width: 699px) {
  .cal-skel .cal-scroll, .cal-skel .cal-skel-month { display: none !important; }
  .cal-skel-mobile { display: block; }
  /* Rien à ajouter pour la barre d'outils : le squelette porte les mêmes classes
     que les vrais contrôles, il hérite donc automatiquement des règles mobiles
     (.cal-tb-right masquée, .cal-tb-left en display:contents, ordres 1→4). */
  .cal-skel .cal-skel-range { flex: 0 1 auto; min-width: 0; }
  .cal-skel .cal-skel-range .skeleton { max-width: 100%; }
}
.skeleton-text { height: 0.82em; border-radius: 5px; }
.skeleton-circle { border-radius: 999px; flex-shrink: 0; }
.skel-stack { display: flex; flex-direction: column; gap: 9px; }
.skel-row { display: flex; align-items: center; gap: 14px; }
.skel-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.skel-list-row { display: flex; align-items: center; gap: 14px; padding: 16px 22px; border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent); }
@media (prefers-reduced-motion: reduce) { .skeleton::after { animation: none; } }

/* Retour à la liste des cabinets + titre du cabinet sélectionné */
.cab-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: var(--fg-muted);
  padding: 4px 0;
  margin-bottom: 6px;
  transition: color 0.15s, gap 0.15s;
}
.cab-back:hover { color: var(--accent); gap: 8px; }
.cab-detail-title {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cab-switch-badge {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}

@media (max-width: 699px) {
  .cab-pick-grid { grid-template-columns: 1fr; }
  .cab-detail-title { font-size: 22px; }
}

/* ================================================================
   CABINET — barre latérale (en-tête) + sections
   ================================================================ */
.cab-side-head {
  padding: 12px 10px 14px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.cab-side-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-subtle); margin-bottom: 6px; }
.cab-side-name { font-size: 15px; font-weight: 700; line-height: 1.25; }
.cab-side-addr { font-size: 12px; color: var(--fg-muted); margin-top: 4px; line-height: 1.35; }
.cab-side-siren { font-size: 11.5px; color: var(--fg-subtle); margin-top: 6px; font-variant-numeric: tabular-nums; }
.cab-side-badge { margin-top: 10px; }
.cab-side-desc { font-size: 12px; color: var(--fg-muted); line-height: 1.45; margin: 12px 0 0; }

/* --- Rétrocessions : pile d'avatars des membres concernés --- */
.retro-name { font-weight: 600; }
.retro-avatars { display: inline-flex; align-items: center; }
.retro-avatar {
  width: 30px; height: 30px;
  border-radius: 999px;
  display: inline-grid; place-items: center;
  font-size: 10.5px; font-weight: 700;
  border: 2px solid var(--bg-card);
  margin-left: -8px;
  cursor: default;
  transition: transform 0.12s;
}
.retro-avatar:first-child { margin-left: 0; }
.retro-avatar:hover { transform: translateY(-2px); z-index: 6; }
.cab-content { max-width: 1152px; }

/* En-tête de section */
.cab-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.cab-count { font-size: 12.5px; color: var(--fg-muted); margin-bottom: 10px; font-weight: 500; }

/* Carte « à plat » (liste pleine largeur sans double bordure) — voir
   .card-flush plus haut (overflow visible + coins arrondis sur les lignes). */

/* --- Membres --- */
.cab-member-list { display: flex; flex-direction: column; }
.cab-member-row {
  display: grid;
  grid-template-columns: 44px minmax(165px, 1fr) minmax(0, 1fr) 156px;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
}
.cab-member-row:last-child { border-bottom: none; }
.cab-member-avatar-wrap { position: relative; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; }
.cab-member-avatar {
  width: 44px; height: 44px;
  border-radius: 999px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 14px;
}
/* Badge de statut rond, en bas à droite de l'avatar (un seul) */
.cab-avatar-badge {
  position: absolute;
  right: -3px; bottom: -3px;
  width: 18px; height: 18px;
  border-radius: 999px;
  display: grid; place-items: center;
  border: 2px solid var(--bg-card);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14);
}
.cab-avatar-badge svg { width: 11px; height: 11px; }
/* Propriétaire : étoile sur un bleu à peine plus foncé que l'accrédité ; Accrédité : bouclier sur bleu */
.cab-avatar-badge.owner { background: color-mix(in srgb, var(--blue) 86%, black); color: #fff; }
.cab-avatar-badge.accredited { background: var(--blue); color: #fff; }
.cab-member-id { min-width: 0; }
.cab-member-name { font-weight: 600; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.cab-member-fullname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-member-name .badge { flex-shrink: 0; }
.cab-member-role { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Coordonnées sur une colonne unique (téléphone + email empilés) */
.cab-member-contact { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cab-contact-line { display: inline-flex; align-items: center; gap: 7px; min-width: 0; font-size: 13px; color: var(--fg-muted); }
.cab-contact-line svg { width: 13px; height: 13px; color: var(--fg-subtle); flex-shrink: 0; }
.cab-contact-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cab-member-row .row-actions { width: 156px; justify-self: end; }

/* Badge neutre (ex. statut Inactive des règles) */
.badge-soft { background: var(--bg-subtle); color: var(--fg-muted); }

/* --- Cartes d'infos (Paramètres) --- */
.cab-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 18px;
}
.cab-card-head h3 { margin: 0; font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cab-kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; }
.cab-kv-label { font-size: 12px; color: var(--fg-muted); margin-bottom: 4px; }
.cab-kv-label .req { color: var(--red); }
.cab-kv-value { font-size: 14.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cab-kv-divider { height: 1px; background: var(--border); margin: 20px 0; }

/* --- Lieux d'exercice --- */
.cab-loc-group { margin: 16px 0 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle); }
.cab-loc {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg-subtle);
}
.cab-loc-primary { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); background: var(--accent-soft); }
.cab-loc-name { font-weight: 700; font-size: 14.5px; }
.cab-loc-addr { font-size: 13px; color: var(--fg-muted); margin-top: 3px; }
.cab-loc-toggle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 13px;
}
.cab-help {
  display: inline-grid; place-items: center;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--bg-hover); color: var(--fg-muted);
  font-size: 10px; font-weight: 700; cursor: help;
}

/* --- Modèles de notes (liste compacte, sans icône) --- */
.cab-note-list { display: flex; flex-direction: column; }
.cab-note-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}
.cab-note-row:last-child { border-bottom: none; }
.cab-note-main { display: flex; align-items: baseline; gap: 10px; flex: 1; min-width: 0; flex-wrap: wrap; }
.cab-note-name { font-weight: 600; font-size: 14px; }
.cab-note-meta { font-size: 12px; color: var(--fg-muted); }
.cab-note-actions { display: flex; gap: 2px; }
.cab-empty { padding: 28px; text-align: center; color: var(--fg-muted); font-size: 13.5px; }

/* --- Patients partagés : voir la liste de patients (.table.table-dense) --- */
/* Recherche extensible (prend la place dispo) + nom de patient sur une ligne. */
.cab-shared-toolbar .search-input { max-width: none; }
.cab-shared-table .patient-name { white-space: nowrap; }
.cab-shared-table .patient-cell { min-width: 0; }

@media (max-width: 860px) {
  .cab-member-row { grid-template-columns: 44px 1fr auto; row-gap: 4px; min-height: 0; }
  .cab-member-contact { display: none; }
  .cab-member-row .row-actions { width: auto; }
  .cab-head-actions { flex-wrap: wrap; }
}
@media (max-width: 699px) {
  .cab-content { max-width: none; }
  .cab-head { flex-direction: column; gap: 12px; }
  .cab-head .btn { width: 100%; justify-content: center; }
  .cab-kv-grid { grid-template-columns: 1fr; gap: 14px; }
}

/* ================================================================
   CABINET — vignette carte des cartes (cabinet.php) [DS 2026-07-19]
   ================================================================ */
.cabinet-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.15s;
  display: flex;
  flex-direction: column;
}
.cabinet-card:hover {
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.18);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  transform: translateY(-2px);
}
.cabinet-map-wrap { position: relative; height: 132px; background: var(--bg-subtle); }
.cabinet-map {
  width: 100%; height: 100%;
  background-color: var(--bg-subtle);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Repli neutre quand aucune coordonnée : dégradé + motif discret */
.cabinet-map--empty {
  background-image:
    radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    linear-gradient(135deg, var(--bg-subtle), var(--bg-hover));
  display: grid; place-items: center;
  color: var(--fg-subtle);
}
.cabinet-map-pin {
  position: absolute; left: 50%; top: 50%;
  width: 16px; height: 16px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: var(--accent);
  border: 3px solid #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.35);
}
.cabinet-badge {
  position: absolute; left: 12px; top: 12px;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}
.cabinet-map-menu { position: absolute; right: 8px; top: 8px; }
.cabinet-map-menu .icon-btn { background: color-mix(in srgb, var(--bg-card) 80%, transparent); backdrop-filter: blur(4px); }
.cabinet-card-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.cabinet-name { font-weight: 700; font-size: 15.5px; line-height: 1.25; }
.cabinet-addr { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--fg-muted); }
.cabinet-addr svg { width: 13px; height: 13px; color: var(--fg-subtle); flex-shrink: 0; }
.cabinet-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-top: 6px; padding-top: 12px;
  border-top: 1px solid var(--border);
}
.cabinet-members { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--fg-muted); }
.cabinet-members svg { width: 14px; height: 14px; color: var(--fg-subtle); }

/* Invitations reçues (cabinet.php) */
.cab-recv-list { display: flex; flex-direction: column; }
.cab-recv {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.cab-recv:last-child { border-bottom: none; }
.cab-recv-icon {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px;
  background: var(--accent-soft); color: var(--accent);
  display: grid; place-items: center;
}
.cab-recv-body { flex: 1; min-width: 0; }
.cab-recv-name { font-weight: 600; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cab-recv-meta { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }
.cab-recv-msg { font-size: 12.5px; color: var(--fg-muted); font-style: italic; margin-top: 6px; }
.cab-recv-actions { display: flex; gap: 8px; flex-shrink: 0; }
.section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--bg-subtle);
}
.section-head-title { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 14.5px; }
.section-head-count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 700;
}

/* ================================================================
   CABINET — Discussion (canaux + messages) [DS 2026-07-19]
   ================================================================ */
.disc {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 560px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--bg-card);
}
.disc-rail { display: flex; flex-direction: column; border-right: 1px solid var(--border); background: var(--bg-subtle); min-width: 0; }
.disc-rail-head {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 16px; font-weight: 700; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--fg-subtle);
  border-bottom: 1px solid var(--border);
}
.disc-rail-count { margin-left: auto; color: var(--fg-muted); }
.disc-chan-list { flex: 1; overflow-y: auto; padding: 6px; }
.disc-chan {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 9px; cursor: pointer;
  transition: background 0.12s; position: relative;
}
.disc-chan:hover { background: var(--bg-hover); }
.disc-chan.active { background: var(--accent-soft); }
.disc-chan-hash { color: var(--fg-subtle); flex-shrink: 0; display: grid; place-items: center; }
.disc-chan.active .disc-chan-hash { color: var(--accent); }
.disc-chan-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.disc-chan-name { font-weight: 600; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-chan-topic { font-size: 11.5px; color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.disc-chan-unread {
  flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 11px; font-weight: 700; display: grid; place-items: center;
}
.disc-chan-del {
  flex-shrink: 0; color: var(--fg-subtle); opacity: 0; padding: 3px; border-radius: 6px;
  transition: opacity 0.12s, color 0.12s, background 0.12s;
}
.disc-chan:hover .disc-chan-del { opacity: 1; }
.disc-chan-del:hover { color: var(--red); background: color-mix(in srgb, var(--red) 12%, transparent); }
.disc-chan-add {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  margin: 6px; padding: 9px; border-radius: 9px;
  border: 1px dashed var(--border); color: var(--fg-muted);
  font-size: 13px; font-weight: 600; transition: border-color 0.12s, color 0.12s, background 0.12s;
}
.disc-chan-add:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

.disc-thread { display: flex; flex-direction: column; min-width: 0; }
.disc-thread--empty { align-items: center; justify-content: center; }
.disc-thread-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--bg-card);
}
.disc-thread-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.disc-thread-name { font-weight: 700; font-size: 15px; }
.disc-thread-topic { font-size: 12px; color: var(--fg-muted); }
.disc-thread-body { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.disc-empty { margin: auto; text-align: center; color: var(--fg-subtle); display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 13.5px; }
.disc-msg { display: flex; align-items: flex-end; gap: 10px; max-width: 76%; }
.disc-msg.me { margin-left: auto; flex-direction: row-reverse; }
.disc-msg-av {
  width: 32px; height: 32px; flex-shrink: 0;
  border-radius: 999px; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; overflow: hidden;
  background: var(--accent-soft); color: var(--accent);
}
.disc-msg-av img { width: 100%; height: 100%; object-fit: cover; }
.disc-msg-bubble { background: var(--bg-subtle); border: 1px solid var(--border); border-radius: 14px; padding: 9px 13px; min-width: 0; }
.disc-msg.me .disc-msg-bubble { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }
.disc-msg-from { font-size: 12px; font-weight: 700; margin-bottom: 3px; color: var(--fg); }
.disc-msg-text { font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.disc-msg-time { font-size: 10.5px; color: var(--fg-subtle); margin-top: 4px; }
.disc-msg-acts { display: flex; gap: 2px; opacity: 0; transition: opacity 0.12s; }
.disc-msg:hover .disc-msg-acts { opacity: 1; }
.disc-msg-acts button { padding: 4px; border-radius: 6px; color: var(--fg-subtle); }
.disc-msg-acts button:hover { color: var(--fg); background: var(--bg-hover); }
.disc-msg-edit { display: flex; align-items: center; gap: 6px; }
.disc-msg-edit input { border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 13.5px; background: var(--bg-card); color: var(--fg); }
.disc-msg-edit button { padding: 4px; border-radius: 6px; color: var(--fg-muted); }
.disc-msg-edit button:hover { color: var(--accent); }
.disc-composer { display: flex; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--border); background: var(--bg-card); }
.disc-composer input {
  flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 14px; font-size: 14px; background: var(--bg-subtle); color: var(--fg);
  transition: border-color 0.12s, box-shadow 0.12s;
}
.disc-composer input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: var(--bg-card); }
.disc-mem-list { display: flex; flex-direction: column; gap: 4px; }
.disc-mem-row { display: flex; align-items: center; gap: 12px; padding: 8px 4px; }
.disc-mem-main { flex: 1; min-width: 0; }
.disc-mem-name { font-weight: 600; font-size: 13.5px; }
.disc-mem-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  border: 1px solid var(--border); color: var(--fg-muted); transition: all 0.12s;
}
.disc-mem-toggle.on { background: var(--accent-soft); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 30%, var(--border)); }

@media (max-width: 860px) {
  .disc { grid-template-columns: 1fr; height: auto; }
  .disc-rail { border-right: none; border-bottom: 1px solid var(--border); }
  .disc-chan-list { max-height: 180px; }
  .disc-thread { min-height: 420px; }
  .disc-msg { max-width: 90%; }
}

/* =============================================================================
   Support / signalement de bug (bouton flottant, modal, fil de ticket)
   Voir js/support-controller.js + includes/components/bug-report.php.
   ============================================================================= */

/* Onglet flottant « Signaler un bug » — ancré au bord droit, mi-hauteur */
.bugtab {
  position: fixed; z-index: 55; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  writing-mode: vertical-rl;
  padding: 12px 9px; margin: 0;
  background: var(--bg-sidebar); color: var(--fg-sidebar);
  border: 1px solid var(--border); border-right: none;
  border-radius: 12px 0 0 12px; box-shadow: var(--shadow-md);
  font-size: 12.5px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer;
  transition: padding 0.18s ease, background 0.18s ease;
}
.bugtab svg { transform: rotate(90deg); }
.bugtab:hover { padding-left: 13px; background: var(--bg-sidebar-active); }
.bugtab:active { transform: translateY(-50%) scale(0.97); }
@media (max-width: 768px) {
  .bugtab {
    writing-mode: horizontal-tb; top: auto; bottom: 78px; right: 14px; transform: none;
    padding: 10px 14px; border-right: 1px solid var(--border); border-radius: var(--radius-pill);
  }
  .bugtab svg { transform: none; }
  .bugtab:active { transform: scale(0.97); }
}

/* Encadré de contexte auto-capturé (modal bug + fil de ticket) */
.bug-context {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; border-radius: var(--radius, 8px);
  background: var(--bg-subtle); border: 1px solid var(--border);
  font-size: 12.5px; color: var(--fg-muted);
}
.bug-context-row { display: flex; align-items: center; gap: 8px; }
.bug-context-row svg { color: var(--accent); flex-shrink: 0; }

/* Pièces jointes */
.attach-row { display: flex; flex-wrap: wrap; gap: 8px; }
.attach-thumb { position: relative; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.attach-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.attach-thumb button {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 999px;
  background: rgba(0,0,0,0.6); color: #fff; display: grid; place-items: center; border: none; cursor: pointer;
}
.attach-add {
  width: 56px; height: 56px; border-radius: 10px; border: 1.5px dashed var(--border-strong);
  background: var(--bg-input); color: var(--fg-muted); display: grid; place-items: center; cursor: pointer;
  transition: border-color 0.15s, color 0.15s; flex-shrink: 0;
}
.attach-add:hover { border-color: var(--accent); color: var(--accent); }
.attach-hint { font-size: 11.5px; color: var(--fg-subtle); margin-top: 6px; }
.attach-row--msg { margin-top: 8px; }
.attach-thumb-msg { width: 120px; max-width: 100%; border-radius: 8px; cursor: pointer; border: 1px solid var(--border); display: block; }

/* Fil de ticket : réutilise .disc-* ; wrapper + hauteur bornée dans un modal */
.ticket-thread { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; }
.ticket-thread .disc-thread-body { max-height: 340px; }

/* En-tête de ticket (détail admin) */
.ticket-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.ticket-detail-title { display: flex; align-items: center; gap: 10px; }
.ticket-detail-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.ticket-cat-icon { display: inline-grid; place-items: center; }

/* Ligne de ticket (liste utilisateur/admin) */
.ticket-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--border); background: transparent; text-align: left; cursor: pointer; transition: background 0.14s; }
.ticket-row:last-child { border-bottom: none; }
.ticket-row:hover { background: var(--bg-subtle); }
.ticket-row[data-active="true"] { background: var(--accent-soft); }
.ticket-row-marker { width: 4px; align-self: stretch; border-radius: 3px; flex-shrink: 0; }
.ticket-row-main { flex: 1; min-width: 0; }
.ticket-row-subject { font-size: 13.5px; font-weight: 600; color: var(--fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticket-row-meta { font-size: 12px; color: var(--fg-muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- Accès (verrouillage onglets/sous-onglets — liste plate + barre d'actions) ---- */
.access-bulkbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.access-bulkbar-actions { display: flex; gap: 8px; }
.access-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-bottom: 1px solid var(--border); }
.access-row:last-child { border-bottom: none; }
.access-row--sub { padding-left: 44px; }
.access-row-label { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--fg); }
.access-row--sub .access-row-label { font-weight: 500; color: var(--fg-muted); }
.access-row-state { font-size: 12px; color: var(--fg-muted); flex-shrink: 0; }
.access-row-state.is-locked { color: var(--red); }
.access-row-state.is-inherited { font-style: italic; }
.row-sub { font-size: 12.5px; color: var(--fg-muted); margin-top: 1px; }

/* Page détail cabinet : wrapper neutre pour le layout DS (menu secondaire pleine hauteur) */
.cabinet-detail-page { min-height: calc(100vh - 73px); }

/* Patients partagés — lignes DS (cabinet-details) */
.cab-shared-row { display:flex; align-items:center; gap:12px; padding:11px 18px; border-bottom:1px solid var(--border); }
.cab-shared-row:last-child { border-bottom:none; }
.cab-shared-avatar { width:34px; height:34px; flex-shrink:0; border-radius:999px; display:grid; place-items:center; font-size:12px; font-weight:700; background:var(--bg-subtle); color:var(--fg-muted); }

/* =============================================================================
   Module de création de facture / devis (wizard) — primitives du Design System
   portées depuis le kit (NewInvoiceModal). Utilisées par invoice-create-modal.php.
   ============================================================================= */
.inv-type-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 4px; }
.inv-type-btn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 18px 18px 16px; border: 1.5px solid var(--border); border-radius: var(--radius-lg, 14px); background: var(--bg-card); cursor: pointer; text-align: left; transition: border-color 0.15s, background 0.15s, box-shadow 0.15s; }
.inv-type-btn:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.inv-type-btn.is-active { border-color: var(--accent); background: var(--accent-soft); }
.inv-type-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius, 10px); background: var(--bg-subtle); color: var(--fg-muted); transition: background 0.15s, color 0.15s; }
.inv-type-btn:hover .inv-type-ic, .inv-type-btn.is-active .inv-type-ic { background: var(--accent); color: #fff; }
.inv-type-label { font-size: 16px; font-weight: 700; color: var(--fg); }
.inv-type-desc { font-size: 12.5px; color: var(--fg-muted); }
.inv-type-check { position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--border-strong); color: transparent; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.inv-type-btn.is-active .inv-type-check { background: var(--accent); border-color: var(--accent); color: #fff; }

.inv-recap { border: 1px solid var(--border); border-radius: var(--radius-lg, 14px); overflow: hidden; }
.inv-recap-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; background: var(--bg-subtle); border-bottom: 1px solid var(--border); }
.inv-recap-doc { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); }
.inv-recap-patient { font-size: 15px; font-weight: 700; color: var(--fg); margin-top: 1px; }
.inv-recap-count { font-size: 12.5px; color: var(--fg-muted); }
.inv-recap-lines { display: flex; flex-direction: column; }
.inv-recap-line { display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent); font-size: 13.5px; }
.inv-recap-line:last-child { border-bottom: none; }
.inv-recap-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.inv-recap-label { color: var(--fg); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inv-recap-tva { color: var(--fg-muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.inv-recap-amt { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--fg); }
.inv-recap-totals { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; background: var(--bg-subtle); border-top: 1px solid var(--border); }
.inv-recap-totrow { display: flex; justify-content: space-between; font-size: 13px; color: var(--fg-muted); }
.inv-recap-totrow.grand { font-weight: 800; color: var(--fg); font-size: 15px; }
.inv-recap-totrow strong, .inv-recap-totrow span { font-variant-numeric: tabular-nums; }

/* ---------- Select DS : variantes de taille + menu déroulant ---------- */
.snt-select--sm { padding: 5px 10px; font-size: 12.5px; border-radius: var(--radius-sm, 8px); gap: 6px; }
.snt-select--sm svg { width: 13px; height: 13px; }
.snt-select__chev { flex-shrink: 0; transition: transform 0.2s ease; }
.snt-select--open .snt-select__chev { transform: rotate(180deg); }
.snt-select__value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snt-select__value--placeholder { color: var(--fg-subtle); }

.snt-select__menu { background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.snt-select__opt { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; font-size: 13.5px; color: var(--fg); cursor: pointer; user-select: none; transition: background 0.15s, color 0.15s; }
.snt-select__opt:hover { background: var(--bg-subtle); }
.snt-select__opt.is-selected { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.snt-select__opt.is-selected:hover { background: var(--accent-soft); }
.snt-select__opt span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.snt-select__opt svg { width: 15px; height: 15px; flex-shrink: 0; }
.snt-select__menu--sm .snt-select__opt { padding: 6px 10px; font-size: 12.5px; }

/* Modal DS — variante « avertissement » (en-tête orange) pour les actions
   réversibles mais lourdes de conséquences (archivage). Calquée sur
   .snt-modal--danger, qui reste réservée aux suppressions définitives. */
.snt-modal--warn .snt-modal__head { background: color-mix(in srgb, var(--orange) 88%, transparent); color: #fff; border-bottom-color: color-mix(in srgb, #fff 14%, transparent); }
.snt-modal--warn .snt-modal__head h3 { color: #fff; }
.snt-modal--warn .snt-modal__head p { color: color-mix(in srgb, #fff 78%, transparent); }
.snt-modal--warn .snt-modal__close { color: #fff; }
.snt-modal--warn .snt-modal__close:hover { background: rgba(255, 255, 255, 0.14); }
.snt-modal--warn .snt-modal__head-icon { background: rgba(255, 255, 255, 0.16); color: #fff; box-shadow: none; }

/* Barre d'actions de fin de ligne (boutons .snt-icon-btn groupés). La classe
   était utilisée dans les listes sans être définie dans les feuilles chargées. */
.snt-actionbar { display: inline-flex; align-items: center; gap: 2px; justify-content: flex-end; }