/**
 * OperaFlux – core.css
 * Fondations, shell, composants, UX transversale, responsive
 *
 * Chargé via templates/partials/global_stylesheets.html (après tokens.css).
 * Les apps gardent leurs CSS spécifiques dans static/<app>/css/*.css
 */

/* Utility — contenu lecteur d'écran uniquement */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ==================== Foundations ==================== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
a:not(.text-decoration-underline), a:not(.text-decoration-underline):hover, a:not(.text-decoration-underline):focus { text-decoration: none !important; }
a.text-decoration-underline { text-decoration: underline !important; }

/* Skip link — accessibilité clavier */
.skip-link {
  position: absolute;
  left: -9999px;
  top: var(--space-4);
  z-index: 9999;
  background: var(--sf-color-cta);
  color: #fff;
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: 600;
  transition: left 0s;
}
.skip-link:focus {
  left: var(--space-4);
  outline: 3px solid var(--sf-color-primary-accent);
  outline-offset: 2px;
}

:root {
  /* Couleurs — primary = encre ; cta = action */
  --primary-color: var(--sf-color-primary);
  --primary-hover: var(--sf-color-primary-hover);
  --primary-accent: var(--sf-color-primary-accent);
  --cta-color: var(--sf-color-cta);
  --cta-hover: var(--sf-color-cta-hover);
  --secondary-color: var(--sf-color-text-muted);
  --success-color: var(--sf-color-success);
  --danger-color: var(--sf-color-danger);
  --warning-color: var(--sf-color-warning);
  --bg-color: var(--sf-color-bg);
  --bg-elevated: var(--sf-color-surface);
  --text-color: var(--sf-color-text);
  --text-muted: var(--sf-color-text-muted);
  --text-primary: var(--sf-color-text);
  --text-secondary: var(--sf-color-text-secondary);
  --card-bg: var(--sf-color-surface);
  --border-color: var(--sf-color-border);
  --border-light: var(--sf-color-border-subtle);

  /* Surfaces / layout */
  --bg-secondary: var(--sf-color-surface-subtle);
  --primary-light: var(--nav-rail-active);
  --text-inverse: var(--sf-color-text-inverse);
  --error-color: var(--danger-color);
  --error-hover: var(--sf-color-danger-light);
  --info-color: var(--sf-color-info);
  --border-medium: var(--sf-color-border);
  --border-default: var(--sf-color-border);

  /* Transitions */
  --transition-fast: var(--sf-motion-fast) var(--sf-ease-out);
  --transition-base: var(--sf-motion-base) var(--sf-ease-out);
  --transition-slow: var(--sf-motion-slow) var(--sf-ease-out);

  /* Rayons — aliases locaux et contrôles unifiés */
  --radius-xs: var(--sf-radius-xs);
  --radius-sm: var(--sf-radius-sm);
  --radius-md: var(--sf-radius-md);
  --radius-lg: var(--sf-radius-lg);
  --radius-xl: var(--sf-radius-xl);
  --radius: var(--radius-md);
  --radius-pill: var(--sf-radius-pill);
  --button-radius: var(--sf-button-radius);
  --button-radius-sm: var(--sf-button-radius-sm);
  --control-radius: var(--sf-control-radius);

  /* Ombres */
  --shadow-xs: var(--sf-shadow-xs);
  --shadow-sm: var(--sf-shadow-sm);
  --shadow-md: var(--sf-shadow-md);
  --shadow-lg: var(--sf-shadow-lg);
  --shadow-xl: var(--sf-shadow-xl);
  --shadow-premium: var(--sf-shadow-premium);
  --shadow-glow: var(--sf-shadow-glow);

  /* États sémantiques */
  --state-success-bg: var(--sf-color-success-bg);
  --state-warning-bg: var(--sf-color-warning-bg);
  --state-danger-bg: var(--sf-color-danger-bg);
  --state-info-bg: var(--sf-color-info-bg);

  /* Z-index */
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --color-focus-ring: var(--sf-color-cta);
  --touch-min: var(--sf-touch-min);

  /* Layout shell — aliases vers tokens.css */
  --sidebar-width: var(--sf-sidebar-width);
  --sidebar-drawer-width: var(--sf-sidebar-drawer-width);
  --sidebar-page-margin: var(--sf-sidebar-width);
  --header-height: var(--sf-header-height);
  --header-height-mobile: var(--sf-header-height-mobile);
  --sf-anchor-offset: calc(var(--header-height) + 3rem);
  --content-gutter: var(--sf-content-gutter);
  --container-max: var(--sf-container-max);
}



body {
  font-family: var(--sf-font-sans);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
  color: var(--text-color);
  background-color: var(--bg-color);
  -webkit-font-smoothing: antialiased;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}
/* Titres — échelle unique (éléments + utilitaires .h*) */
:where(h1, h2, h3, h4, h5, h6) {
  font-family: inherit;
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.25;
  color: var(--text-primary);
  text-wrap: balance;
}
h1, .h1,
:is(.page-section-title, .hrm-section-title, .sf-integ-title, .sf-brief-greeting,
    .deal-modal-title, .sc-ops-command-title, .portal-hero-brand, .wizard-card h2,
    .section-header h2, .report-document-header-section h3, .report-header h3, .esef-header h3) {
  font-size: var(--sf-text-page-title);
}
h2, .h2 { font-size: var(--sf-text-section); }
h3, .h3 { font-size: var(--sf-text-card-title); }
h4, .h4, h5, .h5 { font-size: var(--sf-text-body-sm); }
h6, .h6 { font-size: var(--sf-text-meta); }
:is(.kpi-value, .health-value, .key-metric-value, .deal-hero-amount-val, .deal-kpi-card-val,
    .treso-kpi--primary .treso-kpi-value, .sf-stat-strip--exec .crm-mini-stat-value,
    .marketing-score-num, .esg-justify-result, .sf-wa-phone,
    .portal-otp-input, [data-app="conseiller"] .sf-conseiller-health-value) {
  font-size: var(--sf-text-kpi);
  font-variant-numeric: tabular-nums;
}
/* Spécificité > .landing-page (premium_landing) pour éviter font-family: inherit → serif navigateur */
html.landing-page-root,
body.landing-page {
  font-family: var(--sf-font-sans);
}
/* UA & Contrôles interactifs — typographie et géométrie luxueuse par défaut */
button, input, select, textarea {
  font-family: inherit;
}
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
  border-radius: var(--button-radius);
}
body.sf-no-scroll { overflow: hidden; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[href]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2.5px solid var(--color-focus-ring);
  outline-offset: 3px;
  border-radius: 3px;
}
/* Réduction de mouvement */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==================== Content typography ==================== */
/* UI : pas de puces par défaut. :where() = spécificité 0 → le padding des composants layout gagne. */
.content-wrapper :where(ul) {
  margin: var(--space-3) 0;
  padding-left: 0;
  list-style: none;
  list-style-position: outside;
}
.content-wrapper ol {
  margin: var(--space-3) 0;
  padding-left: 1.25rem;
  list-style: decimal;
  list-style-position: outside;
}
/* Contenu rédactionnel : puces / numéros explicites */
.content-wrapper .legal-content-body ul,
.content-wrapper .article-content ul,
.content-wrapper .sf-prose ul,
.content-wrapper ul.sf-prose-list,
.content-wrapper .sf-integ-guide-body ul,
.content-wrapper ul.fe-checklist {
  padding-left: 1.25rem;
  list-style: disc;
}
.content-wrapper .legal-content-body ol,
.content-wrapper .article-content ol,
.content-wrapper .sf-prose ol,
.content-wrapper .sf-integ-guide-body ol {
  padding-left: 1.25rem;
  list-style: decimal;
}
.content-wrapper li { margin: 0.25rem 0; }
.content-wrapper :is(.sf-stat-strip, .crm-mini-stats) > li { margin: 0; }
.content-wrapper li > ul,
.content-wrapper li > ol { margin-top: var(--space-2); margin-bottom: var(--space-2); }

.list-unstyled {
  list-style: none !important;
  padding-left: 0 !important;
}

/* ==================== Shared list toolbar (dense lists) ==================== */
.sf-list-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  min-width: 0;
  max-width: 100%;
}
.sf-list-toolbar__search {
  position: relative;
  flex: 1 1 12rem;
  min-width: 10rem;
  max-width: 22rem;
  margin: 0;
}
.sf-list-toolbar > :is(.form-control, .form-select):not(.sf-list-toolbar__input) {
  flex: 1 1 8rem;
  min-width: 7rem;
  max-width: 14rem;
  width: auto;
}
.sf-list-toolbar__filters,
.sf-list-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}
.sf-list-toolbar__filters { flex: 1 1 16rem; }
.sf-list-toolbar__actions { margin-left: auto; }
.sf-list-toolbar__filters > :is(.form-control, .form-select),
.sf-list-toolbar__actions > :is(.form-control, .form-select) {
  width: auto;
  flex: 1 1 8rem;
  min-width: 7rem;
  max-width: 14rem;
}
.sf-list-toolbar__icon {
  position: absolute;
  left: 0.55rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted, #6b7280);
  pointer-events: none;
}
.sf-list-toolbar__input {
  padding-left: 1.85rem !important;
  width: 100%;
}
.sf-list-toolbar__count {
  font-size: var(--font-size-xs);
  color: var(--text-muted, #6b7280);
  white-space: nowrap;
}
.sf-lookup-anchor { position: relative; width: 100%; min-width: 0; }
.sf-lookup-results {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 0.15rem);
  max-height: 14rem; overflow: auto; padding: 0.25rem 0;
  background: var(--surface, #fff); border: 1px solid var(--border-color, #e8ecf1);
  border-radius: var(--sf-radius-sm, 6px); box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}
.sf-lookup-option {
  display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 0.4rem 0.65rem; font-size: var(--font-size-sm); color: inherit; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sf-lookup-option:hover,
.sf-lookup-option.is-active { background: var(--surface-muted, #f8fafc); }
.sf-lookup-empty { padding: 0.5rem 0.65rem; font-size: var(--font-size-xs); color: var(--text-muted, #6b7280); }

/* Toolbar inline — titre + recherche/action sur une seule ligne (ERP lignes, portail commande, etc.) */
.sf-inline-tools,
.inv-line-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  min-width: 0;
  margin: 0;
}
:is(.sf-inline-tools, .inv-line-tools, .sf-form-actions, .sf-list-toolbar) > .sf-lookup-anchor {
  width: auto;
  flex: 1 1 12rem;
  min-width: 9.5rem;
  max-width: 18rem;
}
:is(.sf-inline-tools, .inv-line-tools) > .sf-lookup-anchor > .form-control {
  width: 100%;
  height: 32px;
  min-height: 32px;
  font-size: var(--font-size-sm);
  border-radius: var(--sf-radius-sm, 6px);
  border-color: #cbd5e1;
}
:is(.sf-inline-tools, .inv-line-tools) > .sf-lookup-anchor > .form-control:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
:is(.sf-inline-tools, .inv-line-tools) > :is(.btn, a.btn) {
  flex: 0 0 auto;
  white-space: nowrap;
  height: 32px;
  min-height: 32px;
  border-radius: var(--sf-radius-sm, 6px);
}
:is(.sf-inline-tools, .inv-line-tools) > :is(select, .form-control, .form-select) {
  flex: 1 1 12rem;
  width: auto;
  min-width: 9.5rem;
  max-width: 18rem;
  height: 32px;
  min-height: 32px;
  font-size: var(--font-size-sm);
  border-radius: var(--sf-radius-sm, 6px);
  border-color: #cbd5e1;
}
/* ==================== Pipelines kanban (code couleur unique) ==================== */
:is(.pipeline-stage, .recr-kanban-col, .kanban-col, .cc-kanban-col) {
  --pipe-accent: var(--sf-pipe-qualify, #2563eb);
  background: color-mix(in srgb, var(--pipe-accent) 8%, var(--sf-color-surface, #f8fafc));
  border: 1px solid color-mix(in srgb, var(--pipe-accent) 22%, var(--sf-color-border, #e2e8f0));
  box-shadow: inset 3px 0 0 var(--pipe-accent);
}
:is([data-stage="received"], [data-stage="prospect"], [data-status="to_do"], [data-status="collecte"], [data-status="low"], [data-status="later"], [data-status="no_date"], [data-status="unassigned"]) { --pipe-accent: var(--sf-pipe-cold); }
:is([data-stage="screening"], [data-stage="qualified"], [data-status="in_progress"], [data-status="tenue"], [data-status="this_week"], [data-status="next_week"]) { --pipe-accent: var(--sf-pipe-qualify); }
:is([data-stage="interview"], [data-stage="negotiation"], [data-stage="closed"], [data-status="revision"], [data-status="medium"], [data-status="today"]) { --pipe-accent: var(--sf-pipe-active); }
:is([data-stage="offer"], [data-status="cloture"], [data-status="high"], [data-status="overdue"]) { --pipe-accent: var(--sf-pipe-hot); }
:is([data-stage="hired"], [data-stage="customer"], [data-stage="won"], [data-status="done"], [data-status="exporte"], [data-status="won"]) { --pipe-accent: var(--sf-pipe-won); }
:is([data-stage="rejected"], [data-stage="lost"], [data-status="blocked"]) { --pipe-accent: var(--sf-pipe-lost); }
.pipeline-stage .stage-meta, .recr-kanban-count, .kanban-col-head .text-muted { color: var(--pipe-accent); font-variant-numeric: tabular-nums; }
.recr-kanban-count { font-size: var(--font-size-xs); font-weight: 700; }
[data-kanban-col] {
  display: flex; flex-direction: column; align-self: stretch;
  min-height: 0; overflow: hidden;
  transition: outline-color 0.15s ease, background-color 0.15s ease;
}
[data-kanban-col].drag-over {
  outline: 2px dashed var(--pipe-accent); outline-offset: -2px;
  background: color-mix(in srgb, var(--pipe-accent) 12%, var(--sf-color-surface, #f8fafc));
}
[data-kanban-zone] {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  transition: background 0.15s ease, outline-color 0.15s ease;
}
[data-kanban-col].drag-over [data-kanban-zone] {
  background: color-mix(in srgb, var(--pipe-accent) 14%, #fff);
  outline: 2px dashed var(--pipe-accent); outline-offset: -2px;
}
.cc-kanban-board { display: flex; gap: 0.75rem; overflow-x: auto; padding-bottom: 0.35rem; min-height: 18rem; max-height: min(32rem, calc(100vh - 14rem)); align-items: stretch; }
.cc-kanban-col { flex: 1 1 0; min-width: 9.5rem; min-height: 0; max-height: 100%; padding: 0.55rem 0.6rem 0.6rem 0.75rem; border-radius: var(--sf-radius-md, 8px); }
.cc-kanban-col__head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin-bottom: 0.4rem; flex-shrink: 0; }
.cc-kanban-col h4 { margin: 0; font-size: var(--font-size-xs); font-weight: 650; }
.cc-kanban-count { font-size: var(--font-size-xs); font-weight: 700; color: var(--pipe-accent); font-variant-numeric: tabular-nums; }
.cc-kanban-list { list-style: none; margin: 0; padding: 0.25rem; display: flex; flex-direction: column; gap: 0.35rem; border-radius: var(--sf-radius-sm, 6px); min-height: 6rem; }
.cc-kanban-card { margin: 0; padding: 0.45rem 0.55rem; background: #fff; border: 1px solid var(--sf-color-border, #e2e8f0); border-radius: var(--sf-radius-sm, 6px); font-size: var(--font-size-xs); line-height: 1.35; cursor: grab; touch-action: manipulation; display: flex; flex-direction: column; gap: 0.15rem; transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; }
.cc-kanban-card:active { cursor: grabbing; }
.cc-kanban-card.dragging { opacity: 0.55; box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12); transform: scale(0.98); }
.cc-kanban-card__name { font-weight: 600; color: var(--sf-color-text, #0f172a); }
.cc-kanban-card__meta { color: var(--sf-color-muted, #64748b); font-size: var(--font-size-2xs); }
.kanban-more {
  display: block; width: 100%; flex-shrink: 0; margin: 0; padding: .45rem .6rem;
  font-size: var(--font-size-xs); font-weight: 600; color: var(--sf-color-muted, #64748b);
  background: rgba(255,255,255,.85); border: 1px dashed color-mix(in srgb, var(--sf-color-border, #e2e8f0) 90%, #94a3b8);
  border-radius: var(--sf-radius-sm, 6px); cursor: pointer; text-align: center;
  transition: color .15s, border-color .15s, background .15s;
}
.kanban-more:hover, .kanban-more:focus-visible {
  color: var(--sf-color-primary, #2563eb);
  border-color: color-mix(in srgb, var(--sf-color-primary, #2563eb) 35%, transparent);
  background: color-mix(in srgb, var(--sf-color-primary, #2563eb) 6%, #fff);
  outline: none;
}
/* ==================== Shared Pagination ==================== */
.pagination-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  margin-top: var(--space-5);
  padding: 1.15rem 0.1rem 0.2rem;
  border-top: 1px solid color-mix(in srgb, var(--border-color) 85%, transparent);
}
.pagination-footer:empty,
.pagination-footer.is-hidden { display: none; }
.pagination-status {
  margin: 0;
  color: var(--text-muted);
  font: 500 0.6875rem/1.4 inherit;
  letter-spacing: 0.08em;
}
.pagination-status-n {
  color: var(--text-color);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.pagination-more {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 44px;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-color);
  font: 500 0.8125rem/1.4 inherit;
  letter-spacing: 0.04em;
  text-decoration: none;
  cursor: pointer;
  appearance: none;
  transition: color var(--sf-motion-fast) var(--sf-ease-out);
}
.pagination-more-label {
  padding-bottom: 0.12em;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--sf-motion-base) var(--sf-ease-out);
}
.pagination-more:hover { color: var(--sf-color-primary); }
.pagination-more:hover .pagination-more-label { background-size: 100% 1px; }
.pagination-more:hover .pagination-chevron { transform: translateY(2px); }
.pagination-more:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; }
.pagination-more.is-loading,
.pagination-more:disabled { opacity: 0.55; cursor: wait; }
.pagination-more.is-loading .pagination-more-label,
.pagination-more:disabled .pagination-more-label { background-size: 0 1px; }
.pagination-chevron {
  width: 10px;
  height: 10px;
  display: block;
  flex-shrink: 0;
  transition: transform var(--sf-motion-fast) var(--sf-ease-out);
}
.pagination-footer--loose { margin-top: var(--space-10); padding-top: 1.35rem; }
.pagination-footer--compact {
  margin-top: var(--space-2, 0.5rem);
  padding: 0.5rem 0.15rem 0.15rem;
  gap: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
  .pagination-more,
  .pagination-more-label,
  .pagination-chevron { transition: none; }
  .pagination-more:hover .pagination-chevron { transform: none; }
}

/* ==================== Pagination Exécutive de Liste ==================== */
.sf-page-hidden {
  display: none !important;
}

.sf-list-pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2, 0.5rem);
  padding: 0.55rem 0.25rem 0.2rem;
  margin-top: var(--space-2, 0.5rem);
  border-top: 1px solid var(--sf-color-border-subtle, #e2e8f0);
}

.sf-pager-info {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
}

.sf-pager-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.sf-pager-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 0.55rem;
  border-radius: var(--sf-radius-sm, 6px);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  background: var(--sf-color-surface, #ffffff);
  border: 1px solid var(--sf-color-border-subtle, #e2e8f0);
  color: var(--sf-color-primary, #0f172a);
  cursor: pointer;
  box-shadow: var(--sf-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
  transition: background var(--sf-motion-fast, 0.15s) ease,
              border-color var(--sf-motion-fast, 0.15s) ease,
              color var(--sf-motion-fast, 0.15s) ease,
              box-shadow var(--sf-motion-fast, 0.15s) ease;
}

.sf-pager-btn:hover:not(:disabled) {
  background: var(--sf-color-surface-subtle, #f8fafc);
  border-color: var(--sf-color-cta, #2563eb);
  color: var(--sf-color-cta, #2563eb);
  box-shadow: var(--sf-shadow-sm, 0 2px 4px rgba(15, 23, 42, 0.06));
}

.sf-pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--sf-color-surface-subtle, #f8fafc);
  border-color: var(--sf-color-border-subtle, #e2e8f0);
}

.sf-pager-btn.sf-pager-toggle {
  font-size: var(--font-size-xs);
  padding: 0 0.45rem;
  color: var(--sf-text-caption, #64748b);
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.sf-pager-btn.sf-pager-toggle:hover {
  color: var(--sf-color-primary, #0f172a);
  background: var(--sf-color-surface-subtle, #f8fafc);
  border-color: var(--sf-color-border-subtle, #e2e8f0);
}

.sf-pager-page-info {
  font-size: var(--font-size-xs);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--sf-text-caption, #64748b);
  padding: 0 0.25rem;
}

/* ==================== Layout / Shell ==================== */
html { scroll-padding-top: var(--sf-anchor-offset); }
@media (max-width: 768px) {
  html { scroll-padding-top: calc(var(--header-height-mobile) + 12px); }
}
:is(button, a, [tabindex], section, h1, h2, h3, h4, .card, .modal, [id]) {
  scroll-margin-top: calc(var(--sf-anchor-offset) + 16px);
}

.main-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-height);
  background: var(--sf-glass-bg);
  backdrop-filter: var(--sf-glass-blur);
  -webkit-backdrop-filter: var(--sf-glass-blur);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
  z-index: 2000;
  overflow: hidden;
  /* Laisse passer les clics hors zone utile (évite clics morts sous le header fixe). */
  pointer-events: none;
}
/* Conteneur plein largeur : ne pas re-capturer (sinon Contact intercepte Ajouter sous le sticky). */
.main-nav .nav-container,
.main-nav .nav-header-links,
.main-nav .nav-auth,
.main-nav .nav-user,
.main-nav .nav-brand {
  pointer-events: none;
}
.main-nav .nav-brand a,
.main-nav .nav-header-links a,
.main-nav .nav-header-links button,
.main-nav .nav-auth a,
.main-nav .nav-auth button,
.main-nav .nav-user a,
.main-nav .nav-user button,
.main-nav .mobile-menu-toggle,
.main-nav .nav-mobile-panel,
.main-nav .nav-mobile-backdrop {
  pointer-events: auto;
}

/* Compact customer details (multi-app forms) */
.sf-customer-quickpanel {
  width: 100%;
}
.sf-customer-quickcard {
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  padding: 0.5rem 0.75rem;
}
.sf-customer-quickcard-main {
  display: grid;
  gap: 0.15rem;
}
.sf-customer-quickcard-main strong {
  font-size: var(--font-size-sm);
  color: var(--text-color);
}
.sf-customer-quickcard-main span {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}
.sf-customer-quickcard-advanced {
  margin-top: 0.35rem;
}
.sf-customer-quickcard-advanced summary {
  cursor: pointer;
  font-size: var(--font-size-xs);
  color: var(--primary-color);
}
.sf-customer-quickcard-grid {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.35rem;
}
.sf-customer-quickcard-grid span {
  font-size: var(--font-size-xs);
  color: var(--text-color);
}
.nav-container {
  max-width: var(--container-max);
  margin: 0 auto;
  height: 100%;
  padding: 0 var(--content-gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}
.nav-brand {
  flex: 0 1 auto;
  min-width: 0;
  max-width: min(48%, 28rem);
}
.nav-brand a {
  display: inline-flex;
  align-items: baseline;
  color: inherit;
  max-width: 100%;
  min-width: 0;
}
.nav-brand .logo {
  display: inline-flex;
  align-items: baseline;
  max-width: 100%;
  min-width: 0;
  font-size: var(--font-size-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--primary-color);
  line-height: 1.2;
}
.logo-base { font-weight: 700; flex-shrink: 0; }
.logo-suffix {
  font-weight: 500;
  color: var(--text-muted, #64748b);
  margin-left: 0.25em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  font-size: 0.92em;
}
.nav-auth {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex-shrink: 0;
  margin-left: auto;
}
.nav-auth .nav-link { white-space: nowrap; }
.nav-auth .btn { white-space: nowrap; }
.nav-logo .logo-suffix { color: inherit; opacity: 0.85; }
.nav-link {
  color: var(--text-color);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  transition: color var(--transition-base), background var(--transition-base);
}
.nav-link:hover { color: var(--text-color); background: var(--nav-rail-hover); }
.nav-link:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }

.nav-header-links {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
  flex-wrap: nowrap;
  justify-content: flex-end;
  min-width: 0;
  max-width: 100%;
}

.nav-user { margin-left: auto; }
.nav-user .user-dropdown { position: relative; }
.nav-user .user-menu-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--text-color);
}
.nav-user .user-menu-toggle:hover { border-color: var(--primary-color); color: var(--primary-color); }
.nav-user .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-md);
  background: var(--primary-color);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: 600;
}
.nav-user .user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  margin-top: var(--space-2);
  min-width: 200px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  list-style: none;
  padding: var(--space-2) 0;
  display: none;
  z-index: 10;
}
.dropdown-menu a {
  display: block;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-2);
  color: var(--text-color);
  transition: color var(--transition-base), background var(--transition-base);
}
.dropdown-menu a:hover { color: var(--primary-color); background: var(--border-light); }
.user-dropdown:hover .dropdown-menu { display: block; right: 0; }

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: var(--touch-min);
  height: var(--touch-min);
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-base);
}
.mobile-menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text-color);
  border-radius: 1px;
  transition: transform var(--transition-slow), opacity var(--transition-base);
}
.mobile-menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mobile-menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav-mobile-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-height);
  max-height: calc(100vh - var(--header-height) - env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-color);
  box-shadow: var(--shadow-lg);
  z-index: 2002;
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  -webkit-overflow-scrolling: touch;
}
.main-nav.nav-mobile-open .nav-mobile-panel { display: block; animation: sfNavPanelIn 0.25s ease;
}
@keyframes sfNavPanelIn {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}
.nav-mobile-panel .nav-mobile-inner { display: flex; flex-direction: column; gap: var(--space-2); }
.nav-mobile-panel .nav-link,
.nav-mobile-panel .btn { width: 100%; justify-content: center; min-height: var(--touch-min); }
.nav-mobile-backdrop,
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  top: var(--header-height);
  cursor: pointer;
}
.nav-mobile-backdrop {
  background: rgba(15, 23, 42, 0.35);
}
.nav-mobile-backdrop:not(.is-visible),
.sidebar-overlay:not(.is-visible) {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.sidebar-overlay {
  background: rgba(15, 23, 42, 0.45);
  z-index: 1990;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-slow);
}
.sidebar-overlay.is-visible {
  display: block !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}


.main-content {
  flex: 1;
  /* Gouttière unique côté shell ; .content-wrapper n’ajoute plus de double padding */
  padding: var(--space-4);
  padding-bottom: calc(var(--space-4) + 5rem); /* FAB 60px + bottom 1.5rem + marge */
  margin-top: var(--header-height);
  position: relative;
  z-index: 1;
  pointer-events: auto;
  display: flex;
  min-height: calc(100vh - var(--header-height));
  overflow-y: visible;
}
.content-wrapper {
  flex: 1;
  padding: 0;
  max-width: 100%;
  min-width: 0;
  overflow-y: visible;
}
/* Shell unique: une seule logique sidebar/contenu pour toutes les apps */
/* margin-left : la boîte de <main> ne recouvre pas la colonne sidebar (padding-left seul laissait toute la zone cliquable sous les liens fixes). */
body.with-sidebar .main-content {
  margin-left: var(--sidebar-page-margin);
  padding-left: var(--space-4);
}
body.with-sidebar .content-wrapper {
  margin-left: 0;
}
/* <footer> est hors de <main> : même retrait que .main-content pour ne pas passer sous la sidebar fixe */
body.with-sidebar .main-footer {
  margin-left: var(--sidebar-page-margin);
  padding-left: var(--space-4);
  padding-right: var(--space-4);
}
body.with-sidebar .main-content > .content-wrapper {
  position: relative;
}
/* Zone utile = viewport − sidebar : évite le débordement horizontal masqué */
/* Un seul scrollport document (html). overflow-x:hidden sur un enfant force overflow-y:auto
   (spec) → double scroll « il faut rouler deux fois » sur landing et pages longues. */
html { overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; }
body { overflow-x: visible; overflow-y: visible; }
body.with-sidebar .main-content {
  max-width: calc(100vw - var(--sidebar-page-margin));
  overflow: visible;
  min-width: 0;
}
body.with-sidebar .main-footer {
  max-width: calc(100vw - var(--sidebar-page-margin));
}
.content-wrapper {
  overflow: visible;
  text-align: left;
}
.content-wrapper > * { max-width: 100%; min-width: 0; }
.content-wrapper .card .btn { max-width: 100%; justify-content: center; }

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
}
.content-wrapper table.table { width: 100%; max-width: 100%; }
.table > :not(caption) > * > :is(th, td) {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
  overflow-wrap: break-word;
}
.table thead th {
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
  line-height: 1.25;
}
.table :is(.text-end, .sf-col-num, .sf-col-date) {
  text-align: right;
  white-space: nowrap;
  width: 1%;
  font-variant-numeric: tabular-nums;
  overflow-wrap: normal;
}
.table .sf-col-code {
  width: 1%;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.table .sf-col-country { width: 1%; white-space: nowrap; }
.table .text-center { text-align: center; }
.page-header {
  margin-bottom: var(--space-4);
  padding-top: var(--space-1);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.page-header h1 {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-family: var(--sf-font-display);
  font-size: var(--sf-text-page-title);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sf-color-primary);
  line-height: 1.25;
}
.app-shell .page-header { margin-bottom: var(--space-4); }
.subtitle,
.page-header :is(.subtitle, .page-subtitle),
.form-field-hint,
.sf-section-subtitle,
.card-subtitle,
.sf-header-meta,
:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) + :is(p, span, div):is(.small, .text-muted, .sf-section-subtitle, .card-subtitle, .subtitle),
.small.text-muted.mt-1,
.small.mt-1.text-muted {
  font-size: var(--sf-text-meta);
  font-weight: 400;
  line-height: var(--sf-line-caption);
  letter-spacing: var(--sf-caption-track);
  color: var(--sf-text-caption);
}
.subtitle {
  margin: 0;
  flex: 1 1 14rem;
  min-width: 0;
  line-height: 1.25;
}
.page-header :is(.subtitle, .page-subtitle) {
  margin: 0 0 0 auto;
  margin-inline-start: auto;
  text-align: right;
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--sf-font-size-xs);
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--sf-color-text-muted);
  line-height: 1.35;
  padding: 0.25rem 0.625rem;
  background: rgba(241, 245, 249, 0.75);
  border-radius: var(--radius-pill);
  border: 1px solid var(--sf-color-border-subtle);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}
.page-header :is(.subtitle, .page-subtitle):empty { display: none; }

/* Onglets in-page — partials/page_tabs.html + tabs.js */
.page-header:has(+ .of-tabbar) {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: var(--space-2);
}
.of-tabbar {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 0;
  padding: 4px;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--sf-radius-lg);
  scrollbar-width: none;
  position: sticky;
  top: var(--header-height);
  z-index: 1040;
  background: rgba(241, 245, 249, 0.85);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 2px 6px -2px rgba(15, 23, 42, 0.05);
  max-height: 3.5rem;
  width: fit-content;
  max-width: 100%;
  pointer-events: none;
  transition: box-shadow var(--sf-motion-base) var(--sf-ease-out),
              background-color var(--sf-motion-base) var(--sf-ease-out);
}
.of-tabbar::-webkit-scrollbar {
  display: none;
}
.of-tabbar + .shell-page-root {
  padding-top: var(--space-5);
}
.of-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--sf-color-text-muted);
  font: inherit;
  font-family: var(--sf-font-sans);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--sf-radius-md);
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  margin-bottom: 0;
  border-bottom: var(--nav-rail-accent) solid transparent;
  transition: color var(--sf-motion-fast) var(--sf-ease-out),
              background-color var(--sf-motion-fast) var(--sf-ease-out),
              box-shadow var(--sf-motion-fast) var(--sf-ease-out),
              border-color var(--sf-motion-fast) var(--sf-ease-out);
}
.of-tab:hover:not([aria-selected="true"]) {
  color: var(--sf-color-primary);
  background: rgba(255, 255, 255, 0.65);
}
.of-tab[aria-selected="true"] {
  color: var(--primary-color);
  border-bottom-color: transparent;
  background: #ffffff;
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
}
.of-tab:focus-visible {
  outline: 2px solid var(--sf-color-cta);
  outline-offset: 1px;
  border-radius: var(--sf-radius-md);
}
.of-tab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.375rem;
  font-size: var(--font-size-2xs);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  border-radius: var(--radius-pill);
  background: rgba(100, 116, 139, 0.12);
  color: var(--sf-color-text-muted);
  border: 1px solid rgba(226, 232, 240, 0.6);
  transition: all var(--sf-motion-fast) var(--sf-ease-out);
}
.of-tab[aria-selected="true"] .of-tab-badge {
  background: color-mix(in srgb, var(--primary-color) 10%, transparent);
  color: var(--primary-color);
  border-color: color-mix(in srgb, var(--primary-color) 18%, transparent);
}
[data-tabpanel]:not([hidden]) { pointer-events: auto; position: relative; z-index: 1; }
[data-tabpanel][hidden] { display: none !important; }
/* Sticky tabbar sous les modales (évite chevauchement titre / bouton fermer) */
body.sf-modal-open .of-tabbar { z-index: 0; }
.of-tabbar--nested {
  flex-wrap: wrap;
  position: static;
  top: auto;
  z-index: auto;
  max-height: none;
  margin-bottom: var(--space-4);
  background: var(--sf-color-surface-muted);
  border: 1px solid var(--sf-color-border-subtle);
  border-radius: var(--sf-radius-lg);
  padding: var(--space-1);
  gap: var(--space-1);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03);
}
.of-tabbar--nested .of-tab {
  border-radius: var(--sf-radius-md);
  padding: 0.375rem 0.75rem;
  font-size: var(--sf-text-meta);
  border-bottom: none;
  margin-bottom: 0;
}
.of-tabbar--nested .of-tab:hover:not([aria-selected="true"]) {
  background: rgba(255, 255, 255, 0.6);
  color: var(--sf-color-primary);
}
.of-tabbar--nested .of-tab[aria-selected="true"] {
  background: #ffffff;
  color: var(--sf-color-primary);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04);
  font-weight: 600;
}

/* ==================== Sidebar ==================== */
.app-sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: var(--bg-elevated);
  border-right: 1px solid var(--border-color);
  display: flex;
  flex-direction: column;
  z-index: 1999;
  overflow-x: hidden;
  overflow-y: hidden;
}
body.with-sidebar .app-sidebar { top: var(--header-height); height: calc(100vh - var(--header-height)); }
.app-sidebar .sidebar-inner {
  display: flex;
  flex-direction: column;
  padding: var(--space-3) 0;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.app-sidebar .sidebar-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: calc(100% - var(--space-4));
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
  border: none;
  border-radius: var(--radius-sm);
  margin: 0 var(--space-2) var(--space-1);
  border-inline-start: var(--nav-rail-accent) solid transparent;
  background: transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
  color: var(--text-color);
  text-align: left;
  cursor: pointer;
  line-height: var(--line-height-normal);
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
  font-family: inherit;
}
.app-sidebar .sidebar-item:hover { color: var(--text-color); background: var(--nav-rail-hover); }
.app-sidebar .sidebar-item.active {
  background: var(--nav-rail-active);
  color: var(--primary-color);
  font-weight: 600;
  border-inline-start-color: var(--portal-accent, var(--primary-accent));
  box-shadow: none;
}
.app-sidebar .sidebar-item:focus-visible {
  outline: 2px solid var(--portal-accent, var(--primary-accent));
  outline-offset: 2px;
}
.app-sidebar .sidebar-item-label { display: block; min-width: 0; }
.sidebar-sector-badge {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 var(--space-4) var(--space-3);
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-light);
  background: none;
  border-radius: 0;
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: var(--nav-section-track);
  text-transform: uppercase;
}
.sidebar-sector-badge svg { color: var(--text-muted); opacity: 0.85; flex-shrink: 0; }
.app-sidebar .sidebar-section { margin-top: var(--space-5); }
.app-sidebar .sidebar-section:first-child { margin-top: 0; }
.app-sidebar .sidebar-section-title {
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-3);
  font-size: var(--font-size-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--nav-section-track);
  color: var(--text-muted);
}

/* Sidebar – groupes */
.app-sidebar .sidebar-icon { font-size: var(--font-size-base); opacity: 0.72; }
.app-sidebar .sidebar-group { margin-bottom: var(--space-1); list-style: none; position: relative; z-index: 0; }
.app-sidebar .sidebar-group[open] { z-index: 2; }
.app-sidebar details.sidebar-group:not([open]) > .sidebar-sublist { display: none !important; }
.app-sidebar .sidebar-group-title {
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  cursor: pointer;
  font-weight: 500;
  font-size: var(--font-size-sm);
  color: var(--text-color);
  background: none;
  border: none;
  width: calc(100% - var(--space-4));
  text-align: left;
  border-radius: var(--radius-sm);
  margin: 0 var(--space-2) var(--space-1);
  border-inline-start: var(--nav-rail-accent) solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.app-sidebar .sidebar-group-title::-webkit-details-marker { display: none; }
.app-sidebar .sidebar-group-title::marker { content: ""; }
.app-sidebar .sidebar-group-title::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: var(--space-2);
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid var(--text-muted);
  transition: transform var(--transition-fast);
  opacity: 0.65;
}
.app-sidebar .sidebar-group[open] .sidebar-group-title::before { transform: rotate(180deg); }
.app-sidebar .sidebar-group-title:hover { background: var(--nav-rail-hover); }

.app-sidebar .sidebar-sublist { list-style: none; padding: 0 0 var(--space-2); margin: 0; }
.app-sidebar .sidebar-sublist li { margin: 0; }
.app-sidebar .sidebar-sublist a {
  display: block;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-6);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  border-radius: var(--radius-sm);
  margin: 0 var(--space-2) var(--space-1);
  border-inline-start: var(--nav-rail-accent) solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast);
  position: relative;
}
.app-sidebar .sidebar-sublist a:hover { background: var(--nav-rail-hover); color: var(--text-color); }
.app-sidebar .sidebar-sublist a.active {
  background: var(--nav-rail-active);
  color: var(--primary-color);
  font-weight: 600;
  border-inline-start-color: var(--primary-accent);
  box-shadow: none;
}
.app-sidebar .sidebar-group-title.is-active-group {
  color: var(--primary-color);
  background: color-mix(in srgb, var(--nav-rail-active) 60%, transparent);
}
/* Sidebar group label */
.app-sidebar .sidebar-group-label { flex: 1; }
.app-sidebar .sidebar-inner::-webkit-scrollbar { width: 6px; }
.app-sidebar .sidebar-inner::-webkit-scrollbar-track { background: transparent; }
.app-sidebar .sidebar-inner::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: var(--radius-sm); }
.app-sidebar .sidebar-inner::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ==================== Footer ==================== */
/* Le footer ne doit pas intercepter les CTA en bas de page (chevauchement viewport). */
.main-footer {
  margin-top: var(--space-12);
  padding: var(--space-8) 0;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border-color);
  pointer-events: none;
}
.main-footer a,
.main-footer button,
.main-footer input,
.main-footer select,
.main-footer textarea {
  pointer-events: auto;
}
.main-footer ul { list-style: none; padding: 0; margin: 0; }
.main-footer .footer-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--content-gutter);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-8);
}
.main-footer .footer-section h3, .main-footer .footer-section h4 {
  margin-bottom: var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.main-footer .footer-section ul li { margin-bottom: var(--space-2); }
.main-footer .footer-bottom {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-light);
  text-align: center;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
}

/* ==================== Components (core) ==================== */
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
legend { padding: 0; float: left; width: 100%; }
legend + * { clear: both; }

/* Head rows — une liste, imbrication native (ajouter toute nouvelle head-row ici).
   .section-header : hors landing ; .portal-hero : stack Business Hub (pas head-row). */
:is(
  .sf-head, .sf-section-header, .card-header, .card-title-row, .sf-card-head,
  .sf-volume-panel__header, .sf-modal-header, .yaxi-connect-panel-head,
  .clm-studio-header, .file-card-header, .indicator-header,
  .esg-justify-card__head, .crm-brief-ventes__head, .sc-ops-section-head,
  .sf-erp-panel-head-split, .sf-erp-compound-header--split, .inv-block-head,
  .hrm-recr-page .recr-cockpit__head, .cc-command-center__head,
  .paie-section-header, .sf-brief-header
),
body:not(.landing-page) .section-header,
.page-header:not(.portal-hero) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  min-width: 0;
  > :is(.btn, a.btn, .btn-group, .badge, .d-flex, .form-select, .form-control, select, input, label, .btn-sm, button, .file-component-badge, .indicator-count, .sf-conseiller-toolbar, .sf-list-toolbar, .sf-inline-tools, .inv-line-tools, .sf-doc-preview-actions, .btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save) {
    align-self: center;
    flex-shrink: 0;
  }
}
.inv-block-head { margin-bottom: var(--space-3, 0.75rem); }
:is(.sf-erp-panel-head-split, .inv-block-head) > :is(.sf-inline-tools, .inv-line-tools) {
  flex: 1 1 14rem;
  max-width: 100%;
  justify-content: flex-end;
}
:is(.sf-section-header, .page-header) { justify-content: flex-start; }
:is(.sf-section-header, .card-title-row, .page-header, .section-header, .paie-section-header, .sf-brief-header, .sf-modal-header) > :is(.btn, a.btn, .btn-group, .d-flex, .sf-conseiller-toolbar, .sf-list-toolbar, .sf-doc-preview-actions, .btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save) {
  margin-left: auto;
}
:is(.sf-section-header, .card-header, .card-title-row, .sf-card-head) > :is(.small, .text-muted, .sf-header-meta, .sf-section-subtitle, .card-subtitle):not(.badge):not(.btn) {
  margin: 0;
  font-size: var(--sf-text-meta);
  font-weight: 400;
  line-height: var(--sf-line-caption, 1.45);
  letter-spacing: var(--sf-caption-track);
  color: var(--sf-text-caption);
  flex: 0 1 auto;
  min-width: 0;
  max-width: 100%;
}
.yaxi-connect-panel-head { margin-bottom: var(--space-4); }

.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-xs);
  text-align: left;
  --card-hover-transform: none;
  --card-hover-shadow: var(--shadow-xs);
  transition: box-shadow var(--transition-base), transform var(--transition-base), border-color var(--transition-base);
  pointer-events: auto;
}
.card:is(.card-interactive, .card-clickable, a.card, [data-interactive="true"]) {
  --card-hover-transform: translateY(-2px);
  --card-hover-shadow: var(--shadow-md);
  cursor: pointer;
}
.card:hover {
  transform: var(--card-hover-transform);
  box-shadow: var(--card-hover-shadow);
}
.card:is(:has(form), :has(button), :has(input), :has(select), :has(textarea), :has(.table), :has(table), .treso-advanced-block, .treso-sepa-modal__panel) {
  --card-hover-transform: none !important;
  transform: none !important;
}
.card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light, var(--border-color));
}
.card-header h2,
.card-header h3 {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: 600;
  letter-spacing: -0.015em;
  min-width: 0;
}
.card:has(> .card-header) { padding: 0; }
.card-body { padding: var(--space-5); }
.card-footer {
  display: flex;
  gap: var(--space-2);
  justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-light, var(--border-color));
  background: var(--bg-secondary);
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/* Wrappers métier : colonne + gap. Clip horizontal = .content-wrapper. */
[class$="-section-content"] {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
  min-height: 0;
  padding-bottom: max(var(--space-4), calc(var(--space-3) + env(safe-area-inset-bottom, 0px)));
}
[class$="-section-content"] :where(.card, .row, ul, .d-flex, .sf-form-actions, [class*="col-"]) {
  max-width: 100%;
  min-width: 0;
}
[class$="-section-content"] .sf-form-actions {
  flex-wrap: wrap;
  gap: var(--space-2);
}
/* Sections métier denses : pas de lift (overflow clip, formulaires) */
[class$="-section-content"] > .card,
.card:is(.marketing-section, .esg-section, .crm-mails-section, .account-section, .bpm-reseau-section),
.paie-page > :is(.card, details.card),
.card--flat,
.portal-module .card {
  --card-hover-transform: none;
  --card-hover-shadow: none;
}
/* Cartes premium (SSE, paramètres cabinet, formations) */
.card.card--flat {
  border-radius: var(--sf-radius-xl);
  border-color: color-mix(in srgb, var(--sf-color-primary) 7%, var(--border-color));
  box-shadow: var(--sf-shadow-premium);
  background: linear-gradient(180deg, #fff 0%, rgba(248, 250, 252, 0.65) 100%);
  padding: var(--space-6);
}
/* Faits / CTA paramètres (ERP Stripe, commissions conseiller) */
.sf-param-facts {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.sf-param-fact {
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--sf-color-primary) 6%, var(--border-color));
  border-radius: var(--radius-md);
  background: linear-gradient(165deg, #fff 0%, var(--bg-secondary, #fafbfc) 100%);
}
.sf-param-fact > span {
  display: block;
  margin: 0;
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sf-param-fact strong {
  display: block;
  margin-top: 0.12rem;
  font-size: var(--font-size-base);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.sf-param-fact small {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--font-size-xs);
  line-height: 1.35;
  color: var(--text-muted);
}
.sf-param-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.sf-param-cta .btn { flex-shrink: 0; }
@media (min-width: 640px) {
  .sf-param-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.card-title-row {
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.card-title {
  margin: 0;
  font-size: var(--sf-text-card-title);
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--sf-color-primary);
  line-height: 1.25;
}
.card-subtitle {
  margin: 0.2rem 0 0;
  font-size: var(--sf-text-meta);
  font-weight: 400;
  line-height: var(--sf-line-caption);
  letter-spacing: var(--sf-caption-track);
  color: var(--sf-text-caption);
}
.sf-subcard,
.card--subtle {
  background: var(--sf-color-surface-subtle);
  border: 1px solid var(--sf-color-border-subtle);
  border-radius: var(--sf-radius-lg);
  padding: var(--space-4);
  box-shadow: var(--sf-shadow-xs);
  transition: border-color var(--sf-motion-fast) var(--sf-ease-out), box-shadow var(--sf-motion-fast) var(--sf-ease-out);
}
.sf-subcard:hover,
.card--subtle:hover {
  border-color: var(--sf-color-border-hover);
}
.sf-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: var(--space-3);
  min-width: 0;
}
.sf-card-head:has(> :is(.btn, .btn-group, .btn-icon-refresh, .btn-icon-del, .badge, .form-select)) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}
.sf-card-head > :is(h1, h2, h3, h4, h5, h6, .card-title) {
  margin: 0;
  font-size: var(--sf-text-card-title);
  font-weight: 600;
  color: var(--sf-color-primary);
  letter-spacing: -0.015em;
  line-height: 1.25;
}
.sf-card-head > h4 { font-size: var(--sf-text-body-sm); }
.sf-card-head > :is(p, span, .sf-section-subtitle, .card-subtitle) {
  margin: 0;
}
.sf-section-label,
.portal-section-title,
.portal-app-block-title,
.portal-feedback-section-title,
.portal-referral-section-title {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
@media (hover: none) {
  .card:hover { transform: none; box-shadow: none; }
}

/* Lists & rows (transversal) */
/*
 * Pattern commun pour les listes métier (CRM, Direction, HRM, BPM…)
/**
 * ==========================================================================
 * Design System Exécutif : Listes & Lignes Transversales
 * Factorise et harmonise l'ensemble des listes de la plateforme (CRM, HRM, ERP, BPM, ESG, etc.)
 * ==========================================================================
 */
.sf-list,
.sf-list-scroll:is(ul, ol),
:is(.crm-exec-queue-list, .hrm-skill-list, .hrm-train-suggest, .tasks-simple-list, .members-simple-list, .sc-action-list,
    .account-mail-account-list, .account-users-list, .yaxi-bank-list, .sf-erp-priority-list,
    .recr-brief-list, .paie-veille-list),
:is(.card, .card-body, .sf-card-head + *, section) > ul.list-unstyled:not(.dropdown-menu, .nav, .pagination, .navbar-nav) {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2, 0.5rem);
}

/* Ligne de liste universelle — taille unique (sm), jamais body/base */
.sf-list-row,
.sf-list-item,
:is(.sf-list, .crm-exec-queue-list, .hrm-skill-list, .hrm-train-suggest, .gov-structured-list,
    .gov-exec-list, .tasks-simple-list, .members-simple-list,
    .sc-action-list, .account-mail-account-list, .recr-brief-list, .paie-veille-list) > li,
:is(.card, .card-body, .sf-card-head + *, section) > ul.list-unstyled:not(.dropdown-menu, .nav, .pagination, .navbar-nav) > li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3, 0.75rem);
  padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
  background: var(--sf-color-surface, #ffffff);
  border: 1px solid var(--sf-color-border-subtle, #e2e8f0);
  border-radius: var(--sf-radius-md, 8px);
  box-shadow: var(--sf-shadow-xs, 0 1px 2px rgba(15, 23, 42, 0.04));
  transition: border-color var(--sf-motion-fast, 0.15s) var(--sf-ease-out, ease),
              background-color var(--sf-motion-fast, 0.15s) var(--sf-ease-out, ease),
              box-shadow var(--sf-motion-fast, 0.15s) var(--sf-ease-out, ease);
  min-width: 0;
  margin-bottom: 0 !important;
  font-size: var(--sf-text-body-sm);
  line-height: var(--sf-line-height-normal);
}

.sf-list-row:hover,
.sf-list-item:hover,
:is(.sf-list, .crm-exec-queue-list, .hrm-skill-list, .hrm-train-suggest, .gov-structured-list,
    .gov-exec-list, .tasks-simple-list, .members-simple-list,
    .sc-action-list, .account-mail-account-list, .recr-brief-list, .paie-veille-list) > li:hover,
:is(.card, .card-body, .sf-card-head + *, section) > ul.list-unstyled:not(.dropdown-menu, .nav, .pagination, .navbar-nav) > li:hover {
  background: var(--sf-color-surface-subtle, #f8fafc);
  border-color: color-mix(in srgb, var(--sf-color-cta, #2563eb) 30%, var(--sf-color-border-subtle, #e2e8f0));
  box-shadow: var(--sf-shadow-sm, 0 2px 4px rgba(15, 23, 42, 0.06));
}

/* Cas particulier : cartes d'idées/suggestions contenant un corps multiligne */

/* Contenu principal de ligne */
.sf-list-row-main {
  flex: 1 1 0%;
  min-width: 0;
}

/* Titres de ligne */
:is(.sf-list-row, .sf-list-item, li) :is(.sf-list-row-title, .crm-exec-q-title, .task-title, .member-name, strong:first-child) {
  font-size: inherit;
  font-weight: 600;
  color: var(--sf-color-primary, #0f172a);
  margin: 0;
  line-height: 1.35;
}

/* Sous-titres et métadonnées de ligne */
:is(.sf-list-row, .sf-list-item, li) :is(.sf-list-row-subtitle, .task-status, .task-assignee, .member-role, .crm-exec-q-detail, small.text-muted) {
  font-size: var(--sf-text-meta);
  line-height: 1.4;
  letter-spacing: var(--sf-caption-track, 0.01em);
  color: var(--sf-text-caption, #64748b);
  margin: 0;
}

.sf-list-row-title + .sf-list-row-subtitle,
:is(.sf-list-row, .sf-list-item, li) strong:first-child + :is(span.text-muted, small) {
  margin-top: 2px;
}

/* Métadonnées & actions alignées à droite */
.sf-list-row-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: var(--space-1);
  font-size: var(--sf-text-meta);
  line-height: 1.3;
  color: var(--sf-text-caption);
  text-align: right;
  white-space: nowrap;
  flex-shrink: 0;
}
.hrm-skill-list > li .sf-list-row-meta {
  max-width: 42%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sf-list-row-meta.sf-actionfeed-actions {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

.sf-list-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-shrink: 0;
}
/* Boutons dans une ligne de liste — même échelle que le texte */
:is(.sf-list-row, .sf-list-item) > :is(.btn, .btn-sm, .btn-xs),
.sf-list-row-meta :is(.btn, .btn-sm, .btn-xs),
.sf-list-row-actions :is(.btn, .btn-sm, .btn-xs) {
  font-size: var(--sf-text-button-sm);
}

/* Variantes légères par état & sévérité */
:is(.sf-list-row, .sf-list-item, li):is([data-state="danger"], .severity-critical, .severity-high) {
  border-left: 3px solid var(--sf-color-danger, #ef4444) !important;
}
:is(.sf-list-row, .sf-list-item, li):is([data-state="warning"], .severity-medium) {
  border-left: 3px solid var(--sf-color-warning, #f59e0b) !important;
}
:is(.sf-list-row, .sf-list-item, li):is([data-state="success"], .severity-low) {
  border-left: 3px solid var(--sf-color-success, #10b981) !important;
}
:is(.sf-list-row, .sf-list-item, li):is([data-state="info"], .severity-info) {
  border-left: 3px solid var(--sf-color-cta, #3b82f6) !important;
}

/* Icônes et valeurs */
.sf-list-row-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--sf-radius-md, 8px);
  background: color-mix(in srgb, var(--sf-color-cta, #2563eb) 8%, var(--sf-color-surface, #ffffff));
  border: 1px solid color-mix(in srgb, var(--sf-color-cta, #2563eb) 15%, transparent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sf-color-cta, #2563eb);
  flex-shrink: 0;
}
.sf-list-row-value {
  font-size: inherit;
  font-weight: 600;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
  color: var(--sf-color-primary, #0f172a);
}
button.sf-list-row--btn {
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  appearance: none;
}
button.sf-list-row--btn:focus-visible {
  outline: 2px solid var(--sf-color-cta, #2563eb);
  outline-offset: 2px;
}

.sf-ico {
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  color: var(--primary-accent);
}
.sf-empty {
  text-align: center;
  padding: var(--space-5) var(--space-3);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  margin: 0;
}
.sf-doc-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
}
.sf-doc-strip-label {
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.sf-doc-chip {
  display: inline-block;
  font-size: var(--font-size-xs);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--primary-accent) 8%, #fff);
  color: var(--primary-accent);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--primary-accent) 18%, transparent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-doc-chip:hover {
  background: color-mix(in srgb, var(--primary-accent) 14%, #fff);
  color: var(--primary-color);
}
.sf-action-tile-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-6);
}
@media (min-width: 768px) {
  .sf-action-tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-action-tile {
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid color-mix(in srgb, var(--sf-color-primary) 8%, var(--border-color));
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.94) 100%);
  color: var(--text-color);
  font-size: var(--font-size-sm);
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  box-shadow: var(--sf-shadow-soft);
  transition: border-color var(--transition-base), box-shadow var(--transition-base), transform var(--transition-fast), background var(--transition-base);
}
.sf-action-tile:hover,
.sf-action-tile:focus-visible {
  border-color: color-mix(in srgb, var(--primary-accent) 28%, var(--border-color));
  box-shadow: var(--sf-shadow-card-hover);
  transform: translateY(-1px);
  outline: none;
}
.sf-action-tile:focus-visible { box-shadow: var(--sf-focus-ring), var(--sf-shadow-card-hover); }
.sf-action-tile--accent {
  background: linear-gradient(165deg, var(--cta-color) 0%, var(--sf-color-cta-hover) 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: var(--sf-shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
.sf-action-tile--accent:hover,
.sf-action-tile--accent:focus-visible {
  border-color: transparent;
  background: linear-gradient(165deg, var(--sf-color-cta-hover) 0%, var(--sf-color-cta-active) 100%);
}
.sf-action-tile--accent .sf-ico { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .sf-action-tile,
  .sf-action-tile:hover,
  .sf-action-tile:focus-visible { transform: none; transition: none; }
}
.sf-kpi-link {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: left;
  cursor: pointer;
  border-radius: var(--radius-md);
  transition: color var(--transition-fast);
}
.sf-kpi-link:hover .crm-mini-stat-value,
.sf-kpi-link:focus-visible .crm-mini-stat-value { color: var(--sf-color-cta); }
.sf-kpi-link:focus-visible { outline: none; box-shadow: var(--sf-focus-ring); }
.sf-welcome {
  position: relative;
  margin-bottom: var(--space-5) !important;
  padding: clamp(1rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.5rem) !important;
  border-radius: var(--sf-radius-xl);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.97) 0%, rgba(248, 250, 252, 0.92) 100%);
  border: 1px solid color-mix(in srgb, var(--sf-color-primary) 8%, rgba(226, 232, 240, 0.95));
  box-shadow: var(--sf-shadow-premium);
  overflow: hidden;
}
.sf-welcome::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sf-color-gold) 10%, transparent) 0%, transparent 42%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sf-color-primary-accent) 6%, transparent) 0%, transparent 40%);
}
.sf-welcome-row {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-5);
}
.sf-welcome-copy { min-width: 0; flex: 1; position: relative; z-index: 1; }
.sf-welcome > :not(.sf-welcome-row) { position: relative; z-index: 1; }
.sf-welcome h1 {
  font-family: var(--sf-font-display);
  font-weight: 650;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-2);
  color: var(--sf-color-primary);
}
.sf-welcome .subtitle {
  margin: 0;
  text-align: left;
  line-height: var(--sf-line-height-relaxed);
}
@media (max-width: 768px) {
  .sf-welcome h1 { font-size: var(--sf-text-section); }
}
.sf-avatar--initials {
  font-family: var(--sf-font-display);
  font-weight: 700;
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  color: var(--sf-color-primary);
  background: linear-gradient(160deg, var(--sf-color-gold-light) 0%, var(--sf-color-surface-muted) 100%);
  border-color: var(--sf-color-gold-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sf-shadow-xs);
}
.sf-avatar--sm {
  width: 36px;
  height: 36px;
  flex-basis: 36px;
  font-size: var(--font-size-sm);
}
.sf-recording-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--danger-color, #dc3545);
  display: inline-block;
  flex-shrink: 0;
}
.sf-callout {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--text-secondary);
  margin: 0;
}
.sf-callout--ok {
  background: linear-gradient(135deg, #fff 0%, rgba(240, 253, 244, 0.95) 100%);
  color: #166534;
  border-color: rgba(22, 163, 74, 0.28);
}
.sf-callout--warn {
  background: linear-gradient(135deg, #fff 0%, rgba(255, 251, 235, 0.95) 100%);
  color: #92400e;
  border-color: rgba(234, 179, 8, 0.35);
}
.sf-param-cta .sf-callout { flex: 1 1 12rem; min-width: 0; }
.btn-fill { width: 100%; }

/* Réglages : libellé | Active | champ | action — colonnes fixes */
.sf-settings-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-3) var(--space-6);
  align-items: start;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}
.sf-settings-row:last-child { border-bottom: 0; }
.sf-settings-row > :first-child { min-width: 0; }
.sf-settings-row p { margin-top: var(--space-1); }
.sf-settings-row > :last-child {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 5.5rem 6.5rem 8rem;
  gap: var(--space-3);
  align-items: center;
}
.sf-settings-row > :last-child > :is(.form-control, .btn) { width: 100%; }
@media (max-width: 719px) {
  .sf-settings-row { grid-template-columns: minmax(0, 1fr); }
  .sf-settings-row > :last-child { width: 100%; }
}

/* ==================== Calendrier (FullCalendar & RDV) ==================== */
/* Factorisation & normalisation : bat le style injecté par FullCalendar (.fc .fc-toolbar-title { 1.75em }) */
.sf-booking-calendar {
  --_acc: var(--portal-accent, var(--cta-color));
  width: 100%;
  min-height: 560px;
  overflow-x: auto;
  padding: 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  background: var(--card-bg);
}

.sf-booking-calendar--compact {
  min-height: 420px;
  margin: var(--space-2) 0 var(--space-3);
}

:is(.sf-booking-calendar, .fc) {
  font-family: inherit;
  font-size: var(--sf-text-meta);
  max-width: 100%;
  color: var(--text-primary);
}

:is(.sf-booking-calendar, .fc) .fc-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

:is(.sf-booking-calendar, .fc) .fc-toolbar-chunk {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

:is(.sf-booking-calendar, .fc) .fc-toolbar-chunk:nth-child(2) {
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

/* Titre barre d'outils FullCalendar : normalisé et factorisé (évite 28px/1.75em) */
:is(.sf-booking-calendar, .fc, body) :is(h2.fc-toolbar-title, .fc-toolbar-title) {
  margin: 0 !important;
  font-size: var(--sf-text-card-title) !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-primary) !important;
}

:is(.sf-booking-calendar, .fc) :is(.fc-theme-standard td, .fc-theme-standard th, .fc-scrollgrid) {
  border-color: var(--border-color);
}

:is(.sf-booking-calendar, .fc) .fc-timegrid-slot {
  height: 2.75rem;
}

:is(.sf-booking-calendar, .fc) .fc-view-harness {
  min-height: 480px;
}

:is(.sf-booking-calendar, .fc) :is(.fc-col-header-cell-cushion, .fc-timegrid-slot-label-cushion, .fc-timegrid-axis-cushion) {
  color: var(--text-muted);
  font-size: var(--sf-text-meta) !important;
  font-weight: 600;
  padding: 0.2rem 0.1rem;
}

:is(.sf-booking-calendar, .fc) .fc-button {
  background: #fff;
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  font-size: var(--sf-text-body-sm) !important;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.3rem 0.5rem;
  min-height: var(--sf-control-height-sm);
  border-radius: var(--radius-sm);
}

:is(.sf-booking-calendar, .fc) .fc-button .fc-icon {
  font-size: 1em;
}

:is(.sf-booking-calendar, .fc) .fc-button:hover {
  background: color-mix(in srgb, var(--_acc, var(--portal-accent, var(--cta-color))) 8%, #fff);
}

:is(.sf-booking-calendar, .fc) .fc-button.fc-button-primary.fc-button-active {
  background: var(--_acc, var(--portal-accent, var(--cta-color)));
  border-color: var(--_acc, var(--portal-accent, var(--cta-color)));
  color: #fff;
}

:is(.sf-booking-calendar, .fc) .fc-timegrid-col.fc-day-today {
  background: color-mix(in srgb, var(--_acc, var(--portal-accent, var(--cta-color))) 6%, #fff);
}

:is(.sf-booking-calendar, .fc) .fc-event {
  border-radius: var(--radius-sm);
  font-size: var(--sf-text-meta);
  font-weight: 600;
  box-shadow: none;
}

:is(.sf-booking-calendar, .fc) .fc-event-main {
  color: inherit;
}

@media (pointer: coarse) {
  :is(.sf-booking-calendar, .fc) .fc-button {
    min-height: var(--touch-min);
    min-width: var(--touch-min);
  }
}

/* ==================== Volume lists & tables (transversal) ==================== */
.sf-volume-panel {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-4);
}
.sf-volume-panel__header { margin-bottom: var(--space-3); }
.sf-volume-panel__title {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}
.sf-table-scroll {
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.sf-table-scroll table { margin-bottom: 0; }
.sf-table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--bg-secondary);
  box-shadow: 0 1px 0 var(--border-color);
}
table.sf-sortable thead th[data-sf-sort-col] {
  cursor: pointer;
  user-select: none;
}
table.sf-sortable thead th[data-sf-sort-col]::after {
  content: "";
  display: inline-block;
  vertical-align: 0.12em;
  margin-left: 0.3rem;
  border: 3px solid transparent;
  border-bottom-color: var(--text-muted);
  opacity: 0.45;
}
table.sf-sortable thead th[aria-sort="ascending"]::after { opacity: 1; border-bottom-color: var(--text-primary); }
table.sf-sortable thead th[aria-sort="descending"]::after {
  opacity: 1;
  border-bottom-color: transparent;
  border-top-color: var(--text-primary);
}
table.sf-sortable thead th[data-sf-sort-col]:focus-visible {
  outline: 2px solid var(--color-focus-ring, var(--primary-accent));
  outline-offset: 2px;
}
.sf-list-scroll {
  max-height: min(28rem, 60vh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-right: var(--space-1);
  scrollbar-width: thin;
  scrollbar-color: var(--sf-color-border-subtle, #e2e8f0) transparent;
}
.sf-list-scroll::-webkit-scrollbar {
  width: 6px;
}
.sf-list-scroll::-webkit-scrollbar-track {
  background: transparent;
}
.sf-list-scroll::-webkit-scrollbar-thumb {
  background: var(--sf-color-border-subtle, #e2e8f0);
  border-radius: 999px;
}
.sf-list-scroll::-webkit-scrollbar-thumb:hover {
  background: var(--sf-text-caption, #64748b);
}
.sf-table-compact.table,
table.sf-table-compact { font-size: var(--font-size-sm); }
/* Auto layout + scroll : colonnes à la taille du contenu, plus de chevauchement */
.sf-table-scroll > table.sf-table-compact {
  table-layout: auto;
  width: max-content;
  min-width: 100%;
  max-width: none;
  border-collapse: separate;
  border-spacing: 0;
}
.sf-table-compact :is(th, td) {
  padding: 0.35rem 0.6rem;
  vertical-align: middle;
}
.sf-table-compact :is(.text-truncate-cell, .sf-expand-text) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 18rem;
}
.sf-table-compact .text-truncate-cell:not(td):not(th) { display: block; max-width: 100%; }
.sf-expand-text { cursor: pointer; }
.sf-expand-text:is(:hover, :focus-visible) {
  color: var(--primary-color, #2563eb);
  text-decoration: underline;
  outline: none;
}
.sf-table-compact td.sf-col-action,
.sf-table-compact th.sf-col-action {
  width: 1%;
  max-width: 11rem;
  white-space: nowrap;
  text-align: center;
}
.sf-table-scroll > table.sf-table-compact td.sf-col-action:has(.sf-actions) { width: 11rem; white-space: normal; }
.sf-actions { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.sf-actions--row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.sf-actions > .form-control { max-width: 100%; min-width: 0; }
/* Contrôle OK/KO — force alignement gauche (override .sf-list > li space-between) */
.sf-list-row.sf-check-item {
  justify-content: flex-start;
  align-items: flex-start;
}
.sf-check-item .sf-list-row-subtitle {
  white-space: normal;
  word-break: break-word;
}
.sf-check-mark {
  flex: 0 0 auto;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.1rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sf-font-size-2xs);
  font-weight: 700;
  line-height: 1;
}
.sf-check-mark--ok { background: #dcfce7; color: #166534; }
.sf-check-mark--ko { background: #fee2e2; color: #991b1b; }

.sf-list-row--compact {
  padding: var(--space-2) var(--space-3);
  gap: var(--space-2);
}
.sf-list-row--compact .sf-list-row-subtitle { font-size: var(--sf-text-meta); }
/* Ligne dense (date | titre · méta | action) — titre tronqué, détail wrap 2 lignes */
.sf-list-row--inline {
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  padding: 0.45rem 0.7rem;
  overflow: hidden;
}
.sf-list-row--inline .sf-list-row-lead {
  flex: 0 0 5.6rem;
  font-size: var(--sf-text-meta);
  font-variant-numeric: tabular-nums;
  color: var(--sf-text-caption, #64748b);
  white-space: nowrap;
}
.sf-list-row--inline .sf-list-row-main {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  overflow: hidden;
}
.sf-list-row--inline .sf-list-row-title,
.sf-list-row--inline .sf-list-row-subtitle {
  margin: 0;
  min-width: 0;
  overflow: hidden;
}
.sf-list-row--inline .sf-list-row-title {
  flex: 1 1 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sf-list-row--inline .sf-list-row-title + .sf-list-row-subtitle {
  margin-top: 0;
  flex: 2 1 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  white-space: normal;
}
.sf-list-row--inline .sf-list-row-meta {
  flex-shrink: 0;
  width: auto;
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}
.sf-list-row--inline .sf-list-row-meta .btn {
  width: auto;
  min-width: 4.5rem;
  padding: 0.2rem 0.65rem;
}
.sf-list-row--inline .badge { flex-shrink: 0; width: auto; padding: 0.15em 0.5em; }
.sf-list-row-meta--wrap {
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}
.sf-loading-inline {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}
.sf-loading-inline .skeleton-line { height: 0.875rem; border-radius: var(--radius-sm); }
.sf-marketing-history.sf-list-scroll,
.marketing-history.sf-list-scroll { max-height: 16rem; }

/* Badges (transversal) */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25em 0.6em;
  border-radius: var(--radius-sm, 6px);
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1.25;
  color: var(--text-primary);
  background: var(--sf-color-surface-muted, #f1f5f9);
  vertical-align: middle;
  white-space: nowrap;
}
/* Compat Bootstrap — bg-primary = CTA (pas l’encre titres) */
.badge:is(.bg-primary, .text-bg-primary), .text-bg-primary { background: var(--cta-color, #2563eb); color: #fff; }
.badge:is(.bg-secondary, .text-bg-secondary), .text-bg-secondary { background: #f1f5f9; color: #475569; }
.badge:is(.bg-success, .text-bg-success), .text-bg-success { background: #16a34a; color: #fff; }
.badge:is(.bg-danger, .text-bg-danger), .text-bg-danger { background: #dc2626; color: #fff; }
.badge:is(.bg-warning, .text-bg-warning), .text-bg-warning { background: #f59e0b; color: #1c1917; }
.badge:is(.bg-info, .text-bg-info), .text-bg-info { background: #0ea5e9; color: #fff; }
.badge:is(.bg-dark, .text-bg-dark), .text-bg-dark { background: #334155; color: #fff; }
.badge:is(.bg-light, .text-bg-light), .text-bg-light { background: #f8fafc; color: #0f172a; border: 1px solid #e2e8f0; }

/* Subtle / Soft Background Utilities */
.bg-primary-subtle { background-color: var(--sf-color-cta-soft) !important; color: var(--sf-color-cta-hover); }
.bg-secondary-subtle { background-color: #f1f5f9 !important; color: #475569; }
.bg-success-subtle { background-color: rgba(22, 163, 74, 0.08) !important; color: #15803d; }
.bg-danger-subtle { background-color: rgba(220, 38, 38, 0.08) !important; color: #b91c1c; }
.bg-warning-subtle { background-color: rgba(245, 158, 11, 0.1) !important; color: #b45309; }
.bg-info-subtle { background-color: rgba(14, 165, 233, 0.1) !important; color: #0369a1; }
.bg-light-subtle { background-color: #f8fafc !important; color: #334155; }
.bg-dark-subtle { background-color: #f1f5f9 !important; color: #1e293b; }

/* Subtle / Soft Border Utilities */
.border-primary-subtle { border-color: rgba(37, 99, 235, 0.25) !important; }
.border-secondary-subtle { border-color: #cbd5e1 !important; }
.border-success-subtle { border-color: rgba(22, 163, 74, 0.25) !important; }
.border-danger-subtle { border-color: rgba(220, 38, 38, 0.25) !important; }
.border-warning-subtle { border-color: rgba(245, 158, 11, 0.25) !important; }
.border-info-subtle { border-color: rgba(14, 165, 233, 0.25) !important; }

/* Text Utilities */
.text-primary { color: var(--cta-color) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-success { color: var(--sf-color-success) !important; }
.text-danger { color: var(--sf-color-danger) !important; }
.text-warning { color: var(--sf-color-warning) !important; }
.text-info { color: var(--sf-color-info) !important; }
.text-dark { color: var(--sf-color-primary) !important; }
.text-muted { color: var(--text-muted) !important; }

/* Soft Badges */
.badge.bg-primary-subtle, .badge-soft-primary { background-color: rgba(37, 99, 235, 0.08) !important; color: #1d4ed8 !important; border: 1px solid rgba(37, 99, 235, 0.2); }
.badge.bg-secondary-subtle, .badge-soft-secondary { background-color: #f1f5f9 !important; color: #475569 !important; border: 1px solid #e2e8f0; }
.badge.bg-success-subtle, .badge-soft-success { background-color: rgba(22, 163, 74, 0.08) !important; color: #15803d !important; border: 1px solid rgba(22, 163, 74, 0.2); }
.badge.bg-danger-subtle, .badge-soft-danger { background-color: rgba(220, 38, 38, 0.08) !important; color: #b91c1c !important; border: 1px solid rgba(220, 38, 38, 0.2); }
.badge.bg-warning-subtle, .badge-soft-warning { background-color: rgba(245, 158, 11, 0.1) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.2); }
.badge.bg-info-subtle, .badge-soft-info { background-color: rgba(14, 165, 233, 0.1) !important; color: #0369a1 !important; border: 1px solid rgba(14, 165, 233, 0.2); }

/* Soft — une teinte = une règle (aliases métier) */
.badge-success, .badge-done, .badge-fixed, .badge-resolved, .status-prepared { background: rgba(16, 185, 129, 0.12); color: #065f46; border: 1px solid rgba(16, 185, 129, 0.2); }
.badge-info, .badge-planned, .badge-tested, .status-external { background: var(--sf-color-info-bg, #eff6ff); color: var(--sf-color-info, #1d4ed8); border: 1px solid rgba(37, 99, 235, 0.2); }
.badge-warning, .badge-pending, .badge-confirmed, .badge-in_progress, .badge-priority-medium, .badge-severity-medium, .status-blocked { background: rgba(245, 158, 11, 0.16); color: #92400e; border: 1px solid rgba(245, 158, 11, 0.2); }
.badge-danger, .badge-cancelled, .badge-reported, .badge-open, .badge-priority-critical, .badge-priority-urgent, .badge-severity-critical { background: rgba(239, 68, 68, 0.12); color: #991b1b; border: 1px solid rgba(239, 68, 68, 0.2); }
.badge-backlog, .badge-closed, .badge-priority-low, .badge-severity-low { background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid #e2e8f0; }
.badge-testing { background: var(--sf-color-surface-muted); color: var(--sf-color-primary); border: 1px solid var(--sf-color-border); }
.badge-priority-high, .badge-severity-high { background: #fed7aa; color: #9a3412; border: 1px solid rgba(234, 88, 12, 0.2); }
.status-prepared, .status-external, .status-blocked {
  display: inline-block;
  font-size: var(--font-size-xs);
  font-weight: 600;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm, 4px);
}

/* CRM (ventes) – compat: aligner les anciennes classes sur le pattern global */
.ventes-simple-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); min-height: 2rem; }
.ventes-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  transition: background var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), transform var(--transition-base);
}
.ventes-row:hover { background: var(--bg-secondary); border-color: var(--border-medium); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.ventes-row-main { flex: 1; min-width: 0; }
.ventes-row-main strong { display: block; font-size: var(--font-size-base); font-weight: 500; }
.ventes-row-sub { display: block; font-size: var(--font-size-sm); color: var(--text-muted); margin-top: 2px; }
.ventes-row-btns { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.ventes-support-badge { display: inline-block; font-size: var(--font-size-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 6px; border-radius: var(--radius-sm); background: #e0f2fe; color: #0369a1; margin-left: 6px; vertical-align: middle; }

.kpis-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: var(--space-3); margin-bottom: var(--space-6); }
.kpi-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); text-align: left; }
.kpi-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.kpi-value { font-weight: 600; color: var(--text-primary); }
.kpi-value.critical, .kpi-value.urgent { color: var(--danger-color); }
/* KPI compacts — Business Hub (SSE utilise crm-mini-stats / sf-stat-strip) */
.kpis-grid--compact {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: 0;
}
.kpi-card--compact {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-2);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.kpi-card--compact .kpi-value {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--primary-accent);
  line-height: var(--line-height-tight);
}
.kpi-card--compact .kpi-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-top: var(--space-1);
  margin-bottom: 0;
}

.section-card { background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); text-align: left; }

.health-status { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; }
.status-indicator { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.status-indicator.status-healthy { background: var(--success-color); }
.status-indicator.status-unknown { background: var(--text-muted); }
.health-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-6); }
.health-item { text-align: left; }
.health-label { font-size: var(--font-size-sm); color: var(--text-secondary); margin-bottom: var(--space-2); }
.health-value { font-weight: 600; color: var(--text-primary); }

.chatbot-section {
    background: var(--card-bg);
    padding: var(--space-6);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    max-width: 100%;
    width: 100%;
    margin: 0;
    border: 1px solid var(--border-color);
    overflow: visible;
}
/* Actionfeed (transversal) */
.sf-actionfeed { margin-bottom: var(--space-4); }
.sf-actionfeed-title { margin: 0 0 var(--space-1) 0; font-size: var(--font-size-lg); font-weight: 600; }
.sf-actionfeed-subtitle { margin: 0 0 var(--space-3) 0; }
.sf-actionfeed-list { list-style: none; padding-left: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sf-actionfeed-item .sf-list-row { border-left-width: 3px; border-left-style: solid; border-left-color: var(--primary-light); }
.sf-actionfeed-item .sf-actionfeed-sub { margin-top: 2px; }

/* Section headers / bodies — même contrat que .card-header / .card-body */
.sf-section-header {
  padding: var(--space-4) var(--space-4) var(--space-3);
}
.sf-section-body {
  padding: 0 var(--space-4) var(--space-4);
}
/* Header seul dans une carte paddée : pas de double inset */
.card > .sf-section-header { padding: 0 0 var(--space-3); }
/* Header + body : le padding vit dans les enfants (comme .card-header / .card-body) */
.card:has(> .sf-section-body):not(
  .marketing-section, .esg-section, .crm-mails-section, .account-section, .bpm-reseau-section
) {
  padding: 0;
}
.card:has(> .sf-section-body):not(
  .marketing-section, .esg-section, .crm-mails-section, .account-section, .bpm-reseau-section
) > .sf-section-header {
  padding: var(--space-5) var(--space-5) var(--space-3);
}
.card:has(> .sf-section-body):not(
  .marketing-section, .esg-section, .crm-mails-section, .account-section, .bpm-reseau-section
) > .sf-section-body {
  padding: 0 var(--space-5) var(--space-5);
}
.card.card--flat:has(> .sf-section-body) > .sf-section-header {
  padding: var(--space-6) var(--space-6) var(--space-3);
}
.card.card--flat:has(> .sf-section-body) > .sf-section-body {
  padding: 0 var(--space-6) var(--space-6);
}
.d-flex.justify-content-between:not(.flex-column) { gap: var(--space-3); }
.d-flex.justify-content-between:not(.flex-column) > :is(h1, h2, h3, h4, h5, h6, .h5, p) { min-width: 0; flex: 1 1 auto; }
.content-wrapper details > summary { cursor: pointer; }
/* Titre de section = un cran unique */
.sf-section-header :is(h2, h3, h4, h5, h6, .card-title) {
  margin: 0;
  flex: 0 1 auto;
  min-width: 0;
  font-size: var(--sf-text-section);
}
.sf-section-header .sf-section-subtitle,
.sf-section-header .card-subtitle {
  margin-top: 0.25rem;
  line-height: var(--sf-line-caption);
  font-size: var(--sf-text-meta);
  color: var(--sf-text-caption);
  font-weight: 400;
}
/* Tabbar dans le header — stretch gauche, même inset que le titre */
.card:has(> .sf-section-body) > .sf-section-header:has(> .of-tabbar--nested),
.sf-section-header:has(> .of-tabbar--nested) {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
}
.card:has(> .sf-section-body) > .sf-section-header:has(> .of-tabbar--nested) {
  padding: var(--space-5) var(--space-5) var(--space-4);
}
.sf-section-header > .of-tabbar--nested {
  display: flex;
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: stretch;
}
/* Tabbar frère entre header et body — même inset */
.card:has(> .sf-section-body) > .sf-section-header + .of-tabbar--nested {
  display: flex;
  width: auto;
  max-width: none;
  margin: 0 var(--space-5) var(--space-4);
}
.sf-section-header > div:not(.d-flex):not(.btn-group) {
  min-width: 0;
  flex: 1 1 0%;
}
.sf-section-eyebrow {
  margin: 0 0 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary-accent);
  line-height: 1.2;
}

/* Grille panneaux + graphiques (services / account / cabinet) */
.sf-panel-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(12, minmax(0, 1fr));
}
.sf-panel-grid > * { min-width: 0; max-width: 100%; }
.sf-span-4 { grid-column: span 4; }
.sf-span-5 { grid-column: span 5; }
.sf-span-6 { grid-column: span 6; }
.sf-span-7 { grid-column: span 7; }
.sf-span-8 { grid-column: span 8; }
.sf-span-12 { grid-column: span 12; }
@media (max-width: 1024px) {
  .sf-panel-grid > [class*="sf-span-"] { grid-column: 1 / -1; }
}
.sf-chart-wrap {
  position: relative;
  height: var(--sf-chart-height-lg);
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
.sf-chart-wrap--sm { height: var(--sf-chart-height); }
.sf-chart-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  max-width: 100%;
}
.sf-kpi-delta { font-size: var(--font-size-2xs); font-weight: 600; }
.sf-kpi-delta--up { color: var(--success-color, #16a34a); }
.sf-kpi-delta--down { color: var(--danger-color, #dc2626); }
.sf-spark {
  display: block;
  margin-top: var(--space-1);
  width: 100%;
  max-width: 5.5rem;
  height: 1.75rem;
}
.sf-gauge-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2, 0.5rem);
  text-align: center;
  align-items: start;
  min-width: 0;
}
.sf-gauge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 0;
}
.sf-gauge-circle {
  position: relative;
  width: 100%;
  max-width: 4.75rem;
  aspect-ratio: 1;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-gauge-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.sf-gauge-bg {
  fill: none;
  stroke: var(--border-light, #e2e8f0);
  stroke-width: 3.5;
}
.sf-gauge-val {
  fill: none;
  stroke-width: 3.5;
  transition: stroke-dasharray 0.5s ease-out, stroke 0.3s ease;
}
.sf-gauge-num {
  position: absolute;
  font-size: clamp(0.95rem, 2.5vw, 1.35rem);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1;
  user-select: none;
}
.sf-gauge-label {
  margin: 0.35rem 0 0;
  font-size: var(--font-size-xs);
  font-weight: 700;
  color: var(--text-primary, #0f172a);
  line-height: 1.2;
  word-break: break-word;
}
.sf-gauge-sub {
  margin: 0.15rem 0 0;
  font-size: var(--font-size-2xs);
  color: var(--text-muted, #64748b);
  line-height: 1.2;
  word-break: break-word;
}

.sf-actions-grid {
  display: grid;
  gap: var(--space-4);
}
@media (min-width: 900px) {
  .sf-actions-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.sf-actions-grid > .card { min-width: 0; }

/* Shells apps denses (marketing, ESG, CRM Messages…) */
:is(.marketing-shell, .esg-shell) {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
  max-width: 100%;
}
:is(.marketing-section, .esg-section, .crm-mails-section).card {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
}
.sf-section-header:is(.marketing-section-header, .esg-section-header, .crm-mails-section-header) {
  padding: 0 0 var(--space-3);
  border-bottom: 1px solid var(--border-light);
}
.sf-section-header:is(.marketing-section-header, .esg-section-header, .crm-mails-section-header) .sf-section-subtitle {
  margin-top: 0.35rem;
}
:is(.marketing-section-body, .esg-section-body, .crm-mails-section-body) { padding-top: var(--space-3); }
.sf-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.sf-stack > :empty { display: none; }
:is(.marketing-subblock, .esg-subblock) {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-light);
}
:is(.marketing-subblock, .esg-subblock):first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
:is(.marketing-subtitle, .esg-subtitle, .sf-dense-subtitle) {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-primary);
}
:is(.marketing-subtitle--sm, .esg-subtitle--sm, .sf-dense-subtitle--sm) { font-size: var(--font-size-sm); }
:is(.marketing-block, .esg-block, .sf-soft-block) {
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.esg-block { margin-top: var(--space-4); }
.esg-block:first-child { margin-top: 0; }

/* Mail composer partagé (CRM Messages + Marketing campagnes) */
.sf-mail-note {
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--text-secondary);
}
.sf-mail-editor {
  margin-top: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.sf-mail-body { min-height: 12rem; line-height: 1.6; resize: vertical; }
.sf-mail-body:focus {
  border-color: rgba(37, 99, 235, 0.45);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}
.sf-mail-attach {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border-color);
}
.sf-mail-attach-list {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.sf-mail-attach-list li {
  max-width: 100%;
  padding: 0.25rem 0.55rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm, 4px);
  background: var(--bg-secondary);
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
:is(.sf-mail-var-row, .marketing-var-row) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.55rem;
}
:is(.sf-mail-var-chip, .marketing-var-chip) {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  line-height: 1;
  padding: 0.35rem 0.65rem;
  min-height: 2rem;
  cursor: pointer;
}
:is(.sf-mail-var-chip, .marketing-var-chip):hover {
  border-color: rgba(37, 99, 235, 0.35);
  color: var(--text-primary);
  background: var(--bg-elevated);
}
:is(.sf-mail-var-chip, .marketing-var-chip):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 1px;
}
:is(.sf-mail-actions, .marketing-test-block) {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
:is(.sf-mail-actions__title, .marketing-test-block__title) {
  margin: 0 0 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary);
}
:is(.sf-mail-actions, .marketing-test-block) .sf-form-actions { margin-bottom: 0; }

/* Brief matinal dirigeant */
.sf-brief-card {
  background: var(--card-bg, #f8fafc);
  border: 1px solid var(--border-color, #dbe3ee);
  border-radius: var(--radius-md, 16px);
  padding: var(--space-6);
  margin-bottom: var(--space-6);
  color: var(--text-primary, #1f2937);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.05));
}
.sf-brief-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
}
.sf-brief-greeting {
  font-weight: 700;
  margin: 0;
}
.sf-brief-date { font-size: var(--font-size-sm); color: var(--text-muted, #64748b); }
.sf-brief-insights {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.sf-brief-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.sf-brief-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.8rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--sf-radius-sm, 8px);
  background: var(--card-bg, #fff);
  color: var(--sf-color-primary-accent, #2563eb);
  border: 1px solid var(--sf-color-border, #d0d9e5);
  text-decoration: none;
}
.sf-brief-action-btn:hover {
  background: var(--bg-secondary, #f1f5f9);
  color: var(--sf-color-cta-hover);
  border-color: var(--sf-color-cta-border);
}
.sf-brief-action-btn--static {
  cursor: default;
  color: var(--text-muted, #64748b);
  pointer-events: none;
}
.sf-brief-action-btn--static:hover {
  background: var(--card-bg, #fff);
  color: var(--text-muted, #64748b);
  border-color: var(--sf-color-border, #d0d9e5);
}
.sf-brief-contracts { font-size: var(--font-size-sm); color: var(--text-muted, #6b7280); }
.sf-morning-insight {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 10px;
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.sf-morning-insight::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--sf-color-gold);
  opacity: 0.55;
}
.sf-insight-content {
  min-width: 0;
  flex: 1;
}
.sf-insight-content strong {
  display: block;
  font-size: var(--font-size-base);
  font-weight: 650;
  color: var(--text-primary, #0f172a);
  margin-bottom: 0.35rem;
  letter-spacing: -0.01em;
}
.sf-insight-content p {
  margin: 0;
  font-size: var(--font-size-sm);
  color: #475569;
  line-height: 1.55;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.sf-insight-action {
  display: inline-flex;
  align-items: center;
  margin-top: 0.55rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--primary-color, #1e3a5f);
  text-decoration: none;
}
.sf-insight-action:hover {
  text-decoration: underline;
}

/* Dashboard KPI island */
.sf-kpi-section .kpi-grid,
#dashboardKpis.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr));
  gap: var(--space-4);
  align-items: stretch;
}
.dashboard-period-bar { width: 100%; }
.period-select {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border-color, #cbd5e0);
  border-radius: 6px;
  background: var(--card-bg, #fff);
  font-size: var(--sf-text-body-sm);
  min-height: var(--sf-control-height);
  max-width: 100%;
  cursor: pointer;
}
.dashboard-period-bar .period-select { flex: 1 1 12rem; min-width: 0; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 1rem;
  font-size: var(--sf-text-button);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  min-height: var(--sf-control-height);
  height: var(--sf-control-height);
  box-sizing: border-box;
}
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.99);
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none !important; }
.btn-primary {
  background: var(--cta-color);
  color: var(--text-inverse);
  border-color: var(--cta-color);
  box-shadow: var(--shadow-xs), var(--sf-shadow-inner-highlight);
}
.btn-primary:hover:not(:disabled) {
  background: var(--cta-hover);
  border-color: var(--cta-hover);
  color: var(--text-inverse);
  box-shadow: var(--shadow-sm), var(--sf-shadow-inner-highlight);
}
.btn-secondary {
  background-color: var(--card-bg);
  color: var(--text-primary);
  border-color: var(--border-color);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  border-color: var(--border-hover);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}
.btn-outline-primary {
  background-color: transparent;
  color: var(--cta-color);
  border-color: var(--sf-color-cta-border);
}
.btn-outline-primary:hover:not(:disabled) {
  background-color: var(--sf-color-cta-soft);
  color: var(--cta-color);
  border-color: var(--cta-color);
}
.btn-outline-secondary {
  background-color: transparent;
  color: var(--text-secondary);
  border-color: var(--border-color);
}
.btn-outline-secondary:hover:not(:disabled) {
  background-color: var(--bg-secondary);
  border-color: var(--border-hover);
  color: var(--text-primary);
}
.btn-danger {
  background-color: var(--error-color);
  color: var(--text-inverse);
  border-color: var(--error-color);
  box-shadow: var(--shadow-xs);
}
.btn-danger:hover:not(:disabled) {
  background-color: var(--error-hover);
  border-color: var(--error-hover);
  color: var(--text-inverse);
}
.btn-outline-danger {
  background-color: transparent;
  color: var(--error-color);
  border-color: rgba(220, 38, 38, 0.35);
}
.btn-outline-danger:hover:not(:disabled) {
  background-color: rgba(220, 38, 38, 0.08);
  border-color: var(--error-color);
  color: var(--error-color);
}
.btn-gold {
  background: linear-gradient(135deg, var(--sf-color-gold) 0%, var(--sf-color-gold-hover) 100%);
  color: #ffffff !important;
  border-color: var(--sf-color-gold-border);
  box-shadow: var(--shadow-xs), var(--sf-shadow-inner-highlight);
}
.btn-gold:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--sf-color-gold-hover) 0%, var(--sf-color-gold-dark) 100%);
  box-shadow: var(--shadow-sm), var(--sf-shadow-inner-highlight);
}
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--bg-secondary);
  color: var(--text-primary);
}
.btn-sm {
  padding: 0 0.75rem;
  font-size: var(--sf-text-button-sm);
  min-height: var(--sf-control-height-sm);
  height: var(--sf-control-height-sm);
  border-radius: var(--button-radius-sm);
}
.btn-xs {
  padding: 0 0.55rem;
  font-size: var(--sf-text-button-xs);
  min-height: 1.75rem;
  height: 1.75rem;
  border-radius: var(--button-radius-sm);
}
.btn-lg {
  padding: 0 1.25rem;
  font-size: var(--sf-text-button);
  min-height: var(--sf-control-height-lg);
  height: var(--sf-control-height-lg);
  border-radius: var(--button-radius);
}
.sf-touch-btn { min-height: var(--touch-min); min-width: var(--touch-min); }

/* Groupes de boutons — continuité géométrique luxueuse */
.btn-group {
  display: inline-flex;
  vertical-align: middle;
  position: relative;
  isolation: isolate;
}
.btn-group > :is(.btn, button, a.btn) {
  position: relative;
  flex: 1 1 auto;
  border-radius: 0;
}
.btn-group > :is(.btn, button, a.btn):not(:first-child) {
  margin-left: -1px;
}
.btn-group > :is(.btn, button, a.btn):first-child {
  border-top-left-radius: var(--button-radius);
  border-bottom-left-radius: var(--button-radius);
}
.btn-group > :is(.btn, button, a.btn):last-child {
  border-top-right-radius: var(--button-radius);
  border-bottom-right-radius: var(--button-radius);
}
.btn-group-sm > :is(.btn, button, a.btn):first-child {
  border-top-left-radius: var(--button-radius-sm);
  border-bottom-left-radius: var(--button-radius-sm);
}
.btn-group-sm > :is(.btn, button, a.btn):last-child {
  border-top-right-radius: var(--button-radius-sm);
  border-bottom-right-radius: var(--button-radius-sm);
}
.btn-group > :is(.btn, button, a.btn):is(:hover, :focus, :active, .active) {
  z-index: 1;
}

.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add {
  --_h: #dc2626;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; padding: 0; border: 0;
  border-radius: var(--button-radius-sm); background: transparent;
  color: var(--text-secondary, #64748b); cursor: pointer; flex-shrink: 0;
  vertical-align: middle; text-decoration: none;
  transition: color .15s ease, background-color .15s ease;
}
.btn-icon-del { --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.btn-icon-dl {
  --_h: var(--cta-color, #2563eb);
  --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E");
}
.btn-icon-view {
  --_h: var(--cta-color, #2563eb);
  --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.btn-icon-refresh {
  --_h: var(--cta-color, #2563eb);
  --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='23 4 23 10 17 10'/%3E%3Cpath d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/%3E%3C/svg%3E");
}
.btn-icon-save {
  --_h: var(--cta-color, #2563eb);
  --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}
.btn-icon-add {
  --_h: var(--cta-color, #2563eb);
  --_ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
}
.btn-icon-del::before, .btn-icon-dl::before, .btn-icon-view::before, .btn-icon-refresh::before, .btn-icon-save::before, .btn-icon-add::before {
  content: ""; width: 18px; height: 18px; background: currentColor;
  -webkit-mask: var(--_ico) center / contain no-repeat;
  mask: var(--_ico) center / contain no-repeat;
}
.btn-icon-del:hover:not(:disabled), .btn-icon-dl:hover:not(:disabled), .btn-icon-view:hover:not(:disabled), .btn-icon-refresh:hover:not(:disabled), .btn-icon-save:hover:not(:disabled), .btn-icon-add:hover:not(:disabled) { color: var(--_h); background: color-mix(in srgb, var(--_h) 8%, transparent); }
.btn-icon-dl:visited, .btn-icon-view:visited { color: var(--text-secondary, #64748b); }
.btn-icon-del:focus-visible, .btn-icon-dl:focus-visible, .btn-icon-view:focus-visible, .btn-icon-refresh:focus-visible, .btn-icon-save:focus-visible, .btn-icon-add:focus-visible { outline: 2px solid var(--_h); outline-offset: 2px; }
.btn-icon-del:disabled, .btn-icon-dl:disabled, .btn-icon-view:disabled, .btn-icon-refresh:disabled, .btn-icon-save:disabled, .btn-icon-add:disabled { opacity: .45; cursor: not-allowed; }
:is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add) { flex: 0 0 auto; }
.d-flex:not(.flex-column):has(> :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add)),
.d-flex:not(.flex-column):has(> * > :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add)),
:is(.sf-head, .sf-section-header, .card-header, .card-title-row, .page-header, .sf-volume-panel__header, .section-header, .crm-brief-ventes__head, .crm-brief-ventes__actions, .sf-erp-period-row, .sc-ops-toolbar, .sf-brief-header, .paie-section-header):has(> :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add)),
:is(.sf-head, .sf-section-header, .card-header, .card-title-row, .page-header, .sf-volume-panel__header, .section-header, .crm-brief-ventes__head, .sc-ops-toolbar, .sf-brief-header, .paie-section-header):has(> * > :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add)) {
  flex-wrap: nowrap;
  align-items: center;
}
:is(.d-flex, .sf-section-header, .section-header, .card-header, .sf-volume-panel__header, .card-title-row, .page-header, .sf-head, .crm-brief-ventes__head, .sf-brief-header, .paie-section-header)
  > :is(div, h1, h2, h3, h4, h5, h6, .h4, .h5, .h6, p, span, strong):not(.btn):not(.badge):has(+ :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add)),
:is(.d-flex, .sf-section-header, .section-header, .card-header, .sf-volume-panel__header, .crm-brief-ventes__head, .sc-ops-toolbar)
  > :is(div, h1, h2, h3, h4, h5, h6, .h4, .h5, .h6):has(+ *:has(> :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add))) {
  min-width: 0;
  flex: 1 1 0%;
}
:not(:is(.d-flex, .sf-head, .sf-section-header, .card-header, .card-title-row, .page-header, .section-header, .sf-volume-panel__header, .sf-brief-header, .crm-brief-ventes__head, .paie-section-header)) > :is(h1, h2, h3, h4, h5, h6, .h4, .h5, .h6):has(+ :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add)) {
  display: inline;
  margin-right: 0.35rem;
  vertical-align: middle;
}
.section-header .sf-erp-panel-title { margin-bottom: 0; }
.sf-section-header :is(.btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .btn-icon-save, .btn-icon-add) { flex-shrink: 0; }
.btn-link {
  background: transparent;
  border: 0;
  color: var(--cta-color);
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
  min-height: auto;
  height: auto;
}
.btn-link:hover:not(:disabled) { color: var(--cta-hover); }
/* Texte boutons pleins : résiste à tout « .conteneur a { color } » (a.btn inclus) */
:is(.btn-primary, .btn-danger, .btn-outline-primary:hover):not(:disabled) { color: var(--text-inverse) !important; }
a.btn { text-decoration: none !important; }

.btn.is-loading { pointer-events: none; opacity: 0.85; position: relative; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: sfSpin 0.6s linear infinite;
}

/* ==================== Skeletons (chargements) ==================== */
.skeleton {
  background: linear-gradient(90deg, #f0f4f8 25%, #e2e8f0 50%, #f0f4f8 75%);
  background-size: 200% 100%;
  animation: sfShimmer 1.4s ease infinite;
  border-radius: var(--radius);
  color: transparent !important;
  pointer-events: none;
  user-select: none;
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; border-radius: 3px; }
.skeleton-text--lg { height: 1.5em; }
.skeleton-text--sm { height: 0.75em; }
.skeleton-line { height: 12px; margin-bottom: 0.5rem; border-radius: 4px; }
.skeleton-card { height: 120px; border-radius: var(--radius-md); margin-bottom: var(--space-3); }
.skeleton-avatar { width: 40px; height: 40px; border-radius: 50%; }
.skeleton-block { width: 100%; height: 100%; min-height: 80px; border-radius: var(--radius-md); }
@keyframes sfShimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.form-group { margin-bottom: var(--space-4); }
.form-label { display: block; font-size: var(--sf-text-label); font-weight: 500; color: var(--text-primary); margin-bottom: var(--space-2); text-align: left; max-width: 100%; }

/* Cases à cocher / radios — un seul pattern aligné */
.form-check,
.sf-check-row,
label:has(> :is(input[type="checkbox"], input[type="radio"])):not(.form-switch, .sf-choice),
.form-label:has(:is(input[type="checkbox"], input[type="radio"])) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
  padding: 0;
  max-width: 100%;
  cursor: pointer;
  font-weight: inherit;
  text-transform: none;
  letter-spacing: normal;
}
.form-check:last-child,
.sf-check-row:last-child { margin-bottom: 0; }
:is(.form-check, .sf-check-row, .form-label, label:not(.form-switch, .sf-choice))
  > :is(.form-check-input, input[type="checkbox"], input[type="radio"]) {
  flex-shrink: 0;
  width: 1em;
  height: 1em;
  margin: 0;
  float: none;
  min-height: 0;
}
.form-check .form-check-label { margin: 0; line-height: 1.35; }
.sf-check-stack { display: grid; gap: var(--space-3); }
.sf-check-stack > .form-check { margin: 0; width: 100%; }
.form-switch > .form-check-input,
.form-check.form-switch > .form-check-input {
  width: 2.5em;
  min-width: 2.5em;
  height: 1.25em;
  margin: 0;
  cursor: pointer;
  pointer-events: auto;
}

/* -------------------------------------------------------------
 * Puces de choix (Design System SF) — .sf-chip / .sf-chip-grid
 * ------------------------------------------------------------- */
.sf-chip-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.sf-chip-grid > li { margin: 0; padding: 0; }

.sf-chip {
  --chip-fg: var(--sf-color-text-secondary, #475569);
  --chip-bg: var(--sf-color-surface-muted, #f1f5f9);
  --chip-bd: transparent;
  --chip-mark: #94a3b8;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.32rem 0.75rem 0.32rem 0.5rem;
  border: 1px solid var(--chip-bd);
  border-radius: var(--radius-pill, 9999px);
  background: var(--chip-bg);
  color: var(--chip-fg);
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25;
  min-height: 2rem;
  white-space: nowrap;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.sf-chip:not(:has(input)) { padding-inline: 0.75rem; }
.sf-chip:hover {
  --chip-fg: var(--sf-color-text, #0f172a);
  --chip-bg: #e8eef5;
  --chip-mark: var(--sf-color-cta, #2563eb);
}
.sf-chip:has(input:checked),
.sf-chip.is-active {
  --chip-fg: var(--sf-color-cta-hover, #1d4ed8);
  --chip-bg: var(--sf-color-cta-soft, rgba(37, 99, 235, 0.1));
  --chip-mark: var(--sf-color-cta, #2563eb);
  font-weight: 600;
}
.sf-chip:active { transform: scale(0.98); }
.sf-chip:focus-within {
  outline: 2px solid var(--sf-color-cta, #2563eb);
  outline-offset: 2px;
}

.sf-chip input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 0.875rem;
  height: 0.875rem;
  margin: 0;
  flex-shrink: 0;
  border: 1.5px solid var(--chip-mark);
  border-radius: 50%;
  background: transparent;
  display: grid;
  place-content: center;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.sf-chip input[type="checkbox"]::before {
  content: "";
  width: 0.32rem;
  height: 0.18rem;
  margin-top: -1px;
  border-left: 1.5px solid #fff;
  border-bottom: 1.5px solid #fff;
  transform: scale(0) rotate(-45deg);
  transition: transform 0.12s ease;
}
.sf-chip input[type="checkbox"]:checked {
  background: var(--chip-mark);
  border-color: var(--chip-mark);
}
.sf-chip input[type="checkbox"]:checked::before {
  transform: scale(1) rotate(-45deg);
}

.sf-chip-count {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: -0.01em;
  border-radius: var(--radius-pill, 9999px);
  background: var(--sf-color-surface-muted, #f1f5f9);
  color: var(--sf-color-text-secondary, #475569);
  font-variant-numeric: tabular-nums;
}

/* ==================== Commutateurs segmentés (pills) ==================== */

.sf-form-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3, 0.75rem);
  padding-top: var(--space-3, 0.75rem);
  border-top: 1px solid var(--border-light, #e2e8f0);
}

.sf-form-bar__group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  flex-wrap: wrap;
}

.sf-form-bar__action {
  display: inline-flex;
  align-items: center;
}

.sf-choice-label {
  margin: 0;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-secondary, #64748b);
  user-select: none;
}

/* Rail commun — radio (.sf-choice-group) ou boutons (.sf-segmented-switch) */
:is(.sf-choice-group, .sf-segmented-switch) {
  display: inline-flex;
  align-items: center;
  position: relative;
  gap: 0.15rem;
  padding: 0.2rem;
  margin: 0;
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-pill, 9999px);
  background: var(--bg-secondary, #f1f5f9);
}

.sf-choice-group {
  width: fit-content;
  max-width: 100%;
}

.sf-segmented-switch {
  width: 100%;
  max-width: 22rem;
  min-width: 0;
}

.sf-segmented-switch--fluid {
  width: auto;
  max-width: none;
  flex-wrap: wrap;
}

:is(label.sf-choice, .sf-segmented-btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.4rem 1rem;
  border: 0;
  border-radius: var(--radius-pill, 9999px);
  background: transparent;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text-secondary, #64748b);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.sf-segmented-btn {
  flex: 1 1 auto;
}

label.sf-choice input[type="radio"],
label.sf-choice input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  pointer-events: none;
}

:is(
  label.sf-choice:hover:not(:has(input:checked)),
  .sf-segmented-btn:is(:hover, :focus-visible):not(.is-active)
) {
  color: var(--text-primary, #0f172a);
  background: rgba(255, 255, 255, 0.65);
}

/* Actif soft (radios formulaire) */
label.sf-choice:has(input:checked) {
  color: var(--text-primary, #0f172a);
  background: var(--bg-elevated, #fff);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}

/* Actif CTA (boutons filtres / type doc) */
.sf-segmented-btn.is-active {
  color: #fff;
  background: var(--sf-color-cta, #2563eb);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.28);
}

:is(label.sf-choice:has(input:focus-visible), .sf-segmented-btn:focus-visible) {
  outline: 2px solid var(--sf-color-cta, #2563eb);
  outline-offset: 2px;
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  min-height: 0;
  vertical-align: middle;
}

:is(.form-control, .form-select, .form-control-sm, .form-select-sm) {
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  line-height: var(--sf-control-line);
  background: var(--bg-elevated);
  min-height: var(--sf-control-height);
  height: var(--sf-control-height);
  color: var(--text-color);
}
:is(.form-control-sm, .form-select-sm) {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  min-height: var(--sf-control-height-sm);
  height: var(--sf-control-height-sm);
}
/* ─── Textarea : ergonomie, respect de rows, fluidité et élégance ─── */
textarea:is(.form-control, .form-control-sm, .sf-input) {
  height: auto;
  min-height: 5rem;
  max-height: 20rem;
  line-height: 1.45;
  font-family: inherit;
  box-sizing: border-box;
  resize: vertical;
  field-sizing: content;
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.45) transparent;
  transition: border-color var(--sf-motion-fast, 0.15s) var(--sf-ease-out, ease),
              box-shadow var(--sf-motion-fast, 0.15s) var(--sf-ease-out, ease),
              background-color var(--sf-motion-fast, 0.15s) var(--sf-ease-out, ease);
}
textarea.form-control-sm {
  min-height: 4.25rem;
}

textarea:is(.form-control, .form-control-sm, .sf-input)::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
textarea:is(.form-control, .form-control-sm, .sf-input)::-webkit-scrollbar-track {
  background: transparent;
}
textarea:is(.form-control, .form-control-sm, .sf-input)::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.35);
  border-radius: 999px;
}
textarea:is(.form-control, .form-control-sm, .sf-input)::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.55);
}

textarea:is(.form-control, .sf-input)[rows="1"] {
  min-height: var(--sf-control-height, 38px);
  height: var(--sf-control-height, 38px);
  padding-top: calc((var(--sf-control-height, 38px) - 1.45em) / 2);
  padding-bottom: calc((var(--sf-control-height, 38px) - 1.45em) / 2);
  resize: none;
}
textarea.form-control-sm[rows="1"] {
  min-height: var(--sf-control-height-sm, 32px);
  height: var(--sf-control-height-sm, 32px);
  padding-top: 0.32rem;
  padding-bottom: 0.32rem;
  resize: none;
}

textarea:is(.form-control, .sf-input)[rows="2"] {
  min-height: 3.25rem;
  height: 3.25rem;
}
textarea.form-control-sm[rows="2"] {
  min-height: 2.75rem;
  height: 2.75rem;
}

textarea:is(.form-control, .sf-input)[rows="3"] {
  min-height: 4.5rem;
}
textarea.form-control-sm[rows="3"] {
  min-height: 4rem;
}

/* Alignement parfait dans les formulaires et barres d'action en ligne */
:is(.align-items-end, .align-items-center, .form-inline, .d-flex) > [class*="col-"] > textarea[rows="1"],
:is(.align-items-end, .align-items-center, .form-inline, .d-flex) > textarea[rows="1"],
.row.g-2.align-items-end textarea[rows="1"] {
  min-height: var(--sf-control-height-sm, 32px);
  height: var(--sf-control-height-sm, 32px);
  vertical-align: middle;
}
:is(select.form-control, .form-select, select.form-control-sm, .form-select-sm) {
  appearance: none;
  -webkit-appearance: none;
  background-color: var(--bg-elevated);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%2364748b' d='M1.41 0.59L6 5.17 10.59 0.59 12 2l-6 6-6-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 12px 8px;
  padding-right: 2.25rem;
}
:is(select.form-control-sm, .form-select-sm) {
  background-position: right 0.65rem center;
  background-size: 10px 7px;
  padding-right: 1.85rem;
}
input[type="file"]:is(.form-control, .form-control-sm) {
  color: var(--sf-text-caption);
  height: auto;
}
input[type="file"]:is(.form-control, .form-control-sm)::file-selector-button {
  margin-right: var(--space-3);
  margin-inline-end: var(--space-3);
  padding: 0 var(--space-3);
  height: calc(var(--sf-control-height) - 2 * var(--space-3) - 2px);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.95);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  line-height: 1;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
input[type="file"]:is(.form-control, .form-control-sm)::file-selector-button:hover {
  background: rgba(241, 245, 249, 0.98);
  border-color: rgba(203, 213, 225, 0.9);
}
input[type="file"].form-control-sm::file-selector-button {
  height: calc(var(--sf-control-height-sm) - 2 * var(--space-2) - 2px);
  padding: 0 var(--space-2);
}
input[type="date"]:is(.form-control, .form-control-sm) {
  display: inline-flex;
  align-items: center;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
  margin: 0;
  padding: 0;
  transition: opacity var(--transition-fast);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}
:is(.form-control, .form-select, .form-control-sm, .form-select-sm):focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.form-control::placeholder, .form-control-sm::placeholder { color: #94a3b8; }

/* Couleur : puits natif lisible, puis gabarit .sf-color-field (auto-wrap JS) */
input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 2.75rem;
  min-width: 2.75rem;
  height: var(--sf-control-height-sm, 32px);
  padding: 0.2rem;
  cursor: pointer;
}
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch,
input[type="color"]::-moz-color-swatch { border: 1px solid rgba(15, 23, 42, 0.08); border-radius: 4px; }
.sf-color-field {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--sf-control-height-sm, 32px);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  box-sizing: border-box;
}
.sf-color-field:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.sf-color-field input[type="color"],
.sf-color-field__input {
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
  flex: none;
  padding: 0;
  border: 0;
  background: transparent;
}
.sf-color-field__hex {
  flex: 1;
  min-width: 0;
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

/* Grille formulaires — subgrid aligne labels / contrôles / feedbacks entre colonnes */
.sf-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-5);
  align-items: stretch;
  margin-bottom: var(--space-5);
}
.sf-form-grid.mb-0 { margin-bottom: 0; }
.sf-form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-form-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-form-compact { max-width: 40rem; width: 100%; }
.sf-form-stack { display: flex; flex-direction: column; gap: var(--space-4); }
.sf-form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}
.sf-form-grid > .sf-form-field {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: var(--space-2);
}
.sf-form-field .form-label { margin-bottom: 0; }
.sf-form-grid > .sf-form-field > :is(.sf-form-feedback, .form-text) { margin-top: 0; }
.form-label-hint {
  display: inline;
  margin-left: 0.25em;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-muted);
}
/* Grille : hint sous le titre — hauteur de label homogène, selects alignés via subgrid */
.sf-form-grid > .sf-form-field .form-label-hint {
  display: block;
  margin: 0.15em 0 0;
  line-height: 1.3;
}
.sf-form-field > :is(.form-control, .form-select, textarea, .sf-color-field) { width: 100%; }
.sf-form-field > :is(.btn, .btn-group) { align-self: start; width: auto; max-width: 100%; }
.sf-form-field--span-wide { grid-column: 1 / -1; }
/* Contenu libre (calendrier, tableaux…) : pas de subgrid — évite l’étirement des enfants */
.sf-form-grid > .sf-form-field--stack {
  display: flex;
  flex-direction: column;
  grid-row: auto;
  align-self: start;
}
@supports not (grid-template-rows: subgrid) {
  .sf-form-grid > .sf-form-field {
    display: flex;
    grid-row: auto;
  }
  .sf-form-grid > .sf-form-field > .form-label:has(.form-label-hint) {
    min-height: 3.25rem;
  }
}
.sf-form-actions,
.form-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  margin-top: var(--space-3);
}
.sf-form-actions.mt-0,
.form-actions.mt-0 { margin-top: 0; }
.sf-form-actions.flex-column,
.form-actions.flex-column { flex-direction: row; }
.sf-form-actions > :is(.btn, a.btn, .btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .form-control, .form-select, select),
.form-actions > :is(.btn, a.btn, .btn-icon-del, .btn-icon-dl, .btn-icon-view, .btn-icon-refresh, .form-control, .form-select, select) {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

/* ─── Luxury Compact Panels & Forms ─── */
.sf-compact-quick-add {
  background: var(--sf-color-surface, #f8fafc) !important;
  border: 1px solid var(--sf-color-border, rgba(226, 232, 240, 0.9)) !important;
  border-radius: var(--sf-radius-lg, 10px);
  box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.02);
}
.sf-compact-quick-add .form-label {
  display: block;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--sf-color-text-muted, #475569);
  letter-spacing: 0.01em;
  margin-bottom: 0.25rem;
  line-height: 1.25;
}
.sf-compact-quick-add .form-control,
.sf-compact-quick-add .form-select,
.sf-compact-quick-add .input-group-text {
  font-size: var(--font-size-sm);
  min-height: 32px;
  height: 32px;
  border-color: #cbd5e1;
}
.sf-compact-quick-add .form-control:focus,
.sf-compact-quick-add .form-select:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}
.sf-compact-quick-add .input-group {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: 100%;
}
.sf-compact-quick-add .input-group > .form-control,
.sf-compact-quick-add .input-group > .form-select {
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  height: 32px;
  min-height: 32px;
}
.sf-btn-luxury {
  height: 30px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  border-radius: var(--sf-radius-sm, 6px);
  border-color: #cbd5e1;
  color: #334155;
  background-color: #ffffff;
  padding: 0.25rem 0.65rem;
  transition: all 0.15s ease-in-out;
}
.sf-btn-luxury:hover {
  background-color: #f1f5f9;
  border-color: #94a3b8;
  color: #0f172a;
}
.sf-btn-luxury-cta {
  height: 32px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  border-radius: var(--sf-radius-sm, 6px);
  background-color: var(--sf-color-cta, #2563eb);
  border-color: var(--sf-color-cta, #2563eb);
  color: #ffffff;
  box-shadow: 0 1px 2px rgba(37, 99, 235, 0.18);
  transition: all 0.15s ease;
  white-space: nowrap;
}
.sf-btn-luxury-cta:hover {
  background-color: var(--sf-color-cta-hover, #1d4ed8);
  border-color: var(--sf-color-cta-hover, #1d4ed8);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.25);
}

/* ==================== Input Groups (Global) ==================== */
.input-group {
  position: relative;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  width: 100%;
}
.input-group > .form-control,
.input-group > .form-select,
.input-group > input,
.input-group > select {
  position: relative;
  flex: 1 1 auto;
  width: 1%;
  min-width: 0;
  margin-bottom: 0;
}
.input-group > .form-control:focus,
.input-group > .form-select:focus,
.input-group > input:focus,
.input-group > select:focus {
  z-index: 3;
}
.input-group-text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1;
  color: var(--sf-color-text-muted, #64748b);
  text-align: center;
  white-space: nowrap;
  background-color: var(--sf-color-surface, #f8fafc);
  border: 1px solid var(--border-color, #cbd5e1);
  border-radius: var(--radius-md, 8px);
  flex-shrink: 0;
  min-height: var(--sf-control-height, 38px);
  height: var(--sf-control-height, 38px);
}
.input-group-sm {
  min-height: var(--sf-control-height-sm, 32px);
  height: var(--sf-control-height-sm, 32px);
}
.input-group-sm > .form-control,
.input-group-sm > .form-select,
.input-group-sm > .input-group-text,
.input-group-sm > .btn,
.input-group-sm > input {
  padding: 0 var(--space-2);
  font-size: var(--font-size-sm);
  min-height: var(--sf-control-height-sm, 32px);
  height: var(--sf-control-height-sm, 32px);
  border-radius: var(--sf-radius-sm, 6px);
}
.input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
.input-group > :not(:first-child):not(.dropdown-menu) {
  margin-left: -1px;
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.sf-table-luxury {
  border: 1px solid var(--sf-color-border, rgba(226, 232, 240, 0.85));
  border-radius: var(--sf-radius-lg, 10px);
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.sf-table-luxury thead th {
  font-size: var(--font-size-xs);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sf-color-text-muted, #64748b);
  background: var(--sf-color-surface, #f8fafc);
  border-bottom: 1px solid #e2e8f0;
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
  font-weight: 600;
}
.sf-table-luxury tbody td {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(241, 245, 249, 0.9);
  vertical-align: middle;
  font-size: var(--font-size-sm);
}
.sf-table-luxury tbody tr:last-child td {
  border-bottom: none;
}
.sf-table-luxury tbody tr:hover {
  background-color: rgba(248, 250, 252, 0.75);
}

/* Totaux / récap (factures, devis, devises) — source unique */
.sf-summary-rows { margin: 0 0 var(--space-3); }
.sf-summary-rows > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-light, var(--border-color));
}
.sf-summary-rows dt {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}
.sf-summary-rows dd {
  margin: 0;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text-color);
}
.sf-summary-rows > .sf-summary-ttc { border-bottom: none; }
.sf-summary-ttc dd { font-size: var(--font-size-xl); font-weight: 700; }
.sf-avatar {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  border-radius: 50%;
  border: 1px solid var(--border-color);
  background: color-mix(in srgb, var(--border-color) 35%, #fff);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.sf-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-avatar img[hidden] { display: none !important; }

/* Ligne input + action — source unique (SIREN, slug, fichier, recherche, client facture, SLA) */
.sf-inline-field-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.sf-inline-field-row--media { flex-wrap: wrap; }
.sf-inline-field-row > :is(.form-control, .form-select, .form-control-sm, .form-select-sm, select, input) {
  width: auto;
  flex: 1 1 10rem;
  min-width: 0;
  max-width: none;
  margin: 0 !important;
}
.sf-inline-field-row > input[type="number"] {
  flex: 0 1 5rem;
  min-width: 3.5rem;
  max-width: 6rem;
}
.sf-inline-field-row > :is(.btn, a.btn, [class*="btn-icon-"]) {
  flex: 0 0 auto;
  white-space: nowrap;
  align-self: center;
  margin: 0 !important;
}
.sf-inline-field-row--media .form-control { max-width: 18rem; }
.sf-inline-field-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 var(--space-2);
  color: var(--text-muted);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  min-height: var(--sf-control-height);
}

/* Formulaires en ligne explicites — factorisés, sans effets de bord */
.form-inline,
.sf-form-grid.form-inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}
.form-inline > :is(div, .sf-form-field, label):not(:has(textarea)) {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}
.form-inline > .sf-form-field { flex: 1 1 12rem; max-width: 24rem; grid-column: auto; grid-row: auto; }
.form-inline > .sf-form-field--span-wide { flex: 1 1 18rem; max-width: none; }
.form-inline .form-label {
  width: auto;
  margin: 0;
  white-space: nowrap;
}
.form-inline :is(.form-control, .form-select, select) {
  width: auto;
  flex: 1 1 8rem;
  min-width: 7rem;
}
.form-inline > :is(.btn, .sf-form-actions, .sf-form-feedback, [class*="btn-icon-"]) {
  flex: 0 0 auto;
  width: auto;
  margin: 0;
  align-self: center;
}
.form-inline .sf-form-actions { margin-top: 0; }

/* Contrôle suivi d'un bouton sans wrapper dédié : alignement en ligne sans marge parasite */
:not(.sf-inline-field-row):not(.form-inline) > :is(select, input.form-control, .form-select):not([type="color"]):has(+ :is(.btn, a.btn, .sf-form-actions, .form-actions)) {
  display: inline-flex;
  width: auto;
  max-width: min(100%, 22rem);
  margin: 0 var(--space-2) 0 0;
  vertical-align: middle;
}
:not(.sf-inline-field-row):not(.form-inline) > :is(select, input.form-control, .form-select):not([type="color"]) + :is(.btn, a.btn, .sf-form-actions, .form-actions) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  width: auto;
  margin: 0;
  vertical-align: middle;
}
.crm-toolbar-search { max-width: 18.75rem; }
.crm-toolbar-filter { max-width: 11.25rem; }

/* Grille 12 cols — Bootstrap-like, sans framework */
.row {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-3);
  align-items: start;
  width: 100%;
}
.row.g-1 { gap: var(--space-1); }
.row.g-2 { gap: var(--space-2); }
.row.g-3 { gap: var(--space-3); }
.row.g-4 { gap: var(--space-4); }
.row.align-items-start { align-items: start; }
.row.align-items-center { align-items: center; }
.row.align-items-end { align-items: end; }
.row.align-items-stretch { align-items: stretch; }
/* Rangée formulaire inline direct : bas des contrôles uniquement sans carte ni modale */
:is(.row, .paie-field-grid):not(:has(.card, .contact-dossier-card, .sf-dossier-card, .deal-modal-panel)):has(> :is([class*="col"], .paie-field) > .form-label):has(> :is([class*="col"], .paie-field) > .btn) { align-items: end; }
:is(.row, .paie-field-grid):not(:has(.card, .contact-dossier-card, .sf-dossier-card, .deal-modal-panel)) > :is([class*="col"], .paie-field):has(> .btn:only-child) {
  display: flex;
  align-items: flex-end;
}
.paie-field:has(> .btn:only-child) > .btn { width: 100%; }
/* Modales & dossiers : rangées toujours étirées avec cartes à niveau égal */
.deal-modal-body .row,
.deal-modal-panel .row {
  align-items: stretch;
}
.row.text-center { text-align: center; }
.row > [class*="col-"] { grid-column: span var(--sf-col-span, 12); min-width: 0; }
/* Empty-state, skeleton, alerte : sans col-* ils prenaient 1/12 (colonne étroite). */
.row > :not([class*="col-"]) { grid-column: 1 / -1; min-width: 0; width: 100%; }
/* CTA / champs auto : flex au lieu d’1 track grille (évite bouton coupé) */
.row:has(> .col-auto) {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}
.row:has(> .col-auto) > [class*="col-"] {
  flex: 1 1 12rem;
  width: auto;
  max-width: 100%;
  grid-column: unset;
}
.row:has(> .col-auto) > .col-auto {
  flex: 0 0 auto;
  width: max-content;
}
.col-1{--sf-col-span:1}.col-2{--sf-col-span:2}.col-3{--sf-col-span:3}.col-4{--sf-col-span:4}.col-5{--sf-col-span:5}.col-6{--sf-col-span:6}
.col-7{--sf-col-span:7}.col-8{--sf-col-span:8}.col-9{--sf-col-span:9}.col-10{--sf-col-span:10}.col-11{--sf-col-span:11}.col-12{--sf-col-span:12}
@media (min-width: 576px) {
  .col-sm-1{--sf-col-span:1}.col-sm-2{--sf-col-span:2}.col-sm-3{--sf-col-span:3}.col-sm-4{--sf-col-span:4}.col-sm-5{--sf-col-span:5}.col-sm-6{--sf-col-span:6}
  .col-sm-7{--sf-col-span:7}.col-sm-8{--sf-col-span:8}.col-sm-9{--sf-col-span:9}.col-sm-10{--sf-col-span:10}.col-sm-11{--sf-col-span:11}.col-sm-12{--sf-col-span:12}
}
@media (min-width: 768px) {
  .col-md-1{--sf-col-span:1}.col-md-2{--sf-col-span:2}.col-md-3{--sf-col-span:3}.col-md-4{--sf-col-span:4}.col-md-5{--sf-col-span:5}.col-md-6{--sf-col-span:6}
  .col-md-7{--sf-col-span:7}.col-md-8{--sf-col-span:8}.col-md-9{--sf-col-span:9}.col-md-10{--sf-col-span:10}.col-md-11{--sf-col-span:11}.col-md-12{--sf-col-span:12}
}
@media (min-width: 992px) {
  .col-lg-1{--sf-col-span:1}.col-lg-2{--sf-col-span:2}.col-lg-3{--sf-col-span:3}.col-lg-4{--sf-col-span:4}.col-lg-5{--sf-col-span:5}.col-lg-6{--sf-col-span:6}
  .col-lg-7{--sf-col-span:7}.col-lg-8{--sf-col-span:8}.col-lg-9{--sf-col-span:9}.col-lg-10{--sf-col-span:10}.col-lg-11{--sf-col-span:11}.col-lg-12{--sf-col-span:12}
}
@media (min-width: 1200px) {
  .col-xl-1{--sf-col-span:1}.col-xl-2{--sf-col-span:2}.col-xl-3{--sf-col-span:3}.col-xl-4{--sf-col-span:4}.col-xl-5{--sf-col-span:5}.col-xl-6{--sf-col-span:6}
  .col-xl-7{--sf-col-span:7}.col-xl-8{--sf-col-span:8}.col-xl-9{--sf-col-span:9}.col-xl-10{--sf-col-span:10}.col-xl-11{--sf-col-span:11}.col-xl-12{--sf-col-span:12}
}

.erp-documents-compta .inv-col-desc { min-width: 12rem; }

.table-container,
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
}
.data-table { width: 100%; border-collapse: collapse; }
.data-table thead { background: var(--bg-secondary); }
.data-table th {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  letter-spacing: 0.02em;
}
.data-table td { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--border-color); color: var(--text-primary); }
.data-table tbody tr:hover { background: var(--bg-secondary); }

/* ==================== Messages / Alerts (toasts flottants) ==================== */
.messages-container {
  position: fixed;
  top: calc(var(--header-height) + var(--space-4));
  right: var(--space-4);
  z-index: 2010;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: 400px;
}
.sf-access-restricted {
  position: sticky;
  top: var(--header-height);
  z-index: 50;
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: 1px solid var(--border-color);
  border-left: 3px solid var(--sf-color-warning);
  background: var(--state-warning-bg);
  color: var(--text-color);
  box-shadow: none;
}
.sf-access-restricted .alert-message { flex: 1; }
.messages-container .alert {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  box-shadow: var(--shadow-md);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
}
/* Notices in-page (hors toast) → langage .sf-banner */
:is(main, .hrm-section-content, .erp-page) .alert:not(.sf-banner) {
  display: block;
  margin: 0 0 var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  border: none;
  border-left: 3px solid var(--border-color);
  box-shadow: none;
  background: var(--bg-secondary);
  color: var(--text-color);
}
:is(main, .hrm-section-content, .erp-page) .alert-warning {
  border-left-color: var(--sf-color-warning);
  background: var(--state-warning-bg);
}
:is(main, .hrm-section-content, .erp-page) .alert-danger {
  border-left-color: var(--sf-color-danger);
  background: var(--state-danger-bg);
}
:is(main, .hrm-section-content, .erp-page) .alert-success {
  border-left-color: var(--sf-color-success);
  background: var(--state-success-bg);
}
:is(main, .hrm-section-content, .erp-page) .alert-info {
  border-left-color: var(--sf-color-info);
  background: var(--state-info-bg);
}
.alert-close { 
  background: none; 
  border: none; 
  cursor: pointer; 
  width: 24px;
  height: 24px;
  opacity: 0.6; 
  transition: opacity var(--transition-base), transform var(--transition-base);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='currentColor' stroke-linecap='round' stroke-width='2.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1rem;
  font-size: 0;
  color: transparent;
  line-height: 0;
  overflow: hidden;
}
.alert-close:hover { opacity: 1; transform: scale(1.1); }

/* ==================== Bootstrap bits (override) ==================== */
/* Close button (fond clair): même trait épais que btn-close-white, sinon la croix Bootstrap paraît trop fine */
button.btn-close:not(.btn-close-white) {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  background-color: transparent;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  background-size: 1.1rem 1.1rem;
  opacity: 0.72;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%231e293b' stroke-linecap='round' stroke-width='2.75'/%3e%3c/svg%3e");
}
button.btn-close:not(.btn-close-white):hover { opacity: 1; }
button.btn-close:not(.btn-close-white):focus { box-shadow: none; }
button.btn-close:not(.btn-close-white):focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}
/* Close button: rendre la croix plus "épaisse" et mieux cliquable */
.btn-close.btn-close-white {
  width: 1.25rem;
  height: 1.25rem;
  padding: 0;
  opacity: 0.9;
  background-size: 1.1rem 1.1rem;
  filter: drop-shadow(0 0 0.35px rgba(255, 255, 255, 0.9));
  /* SVG X plus épais que celui par défaut Bootstrap */
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%23fff' stroke-linecap='round' stroke-width='2.75'/%3e%3c/svg%3e");
}
.btn-close.btn-close-white:hover { opacity: 1; }
.btn-close.btn-close-white:focus { box-shadow: none; }
.btn-close.btn-close-white:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}

/* ==================== Toasts (utils.js) ==================== */
.toast-container {
  position: fixed;
  right: var(--space-6);
  /* Au-dessus des FAB assistant / retour (bottom ~1.5rem + 60px) */
  bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  max-width: min(320px, calc(100vw - 2rem));
  pointer-events: none;
}
.toast-container .toast { pointer-events: auto; }
.toast {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  box-shadow: var(--shadow-md);
  max-width: 320px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.toast-content { flex: 1; line-height: 1.35; }
.toast-action {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: currentColor;
  font-weight: 600;
  font-size: var(--font-size-sm);
  padding: 0.25rem 0.625rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}
.toast-action:hover { background: rgba(255, 255, 255, 0.28); }
.toast-action:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.toast-warning .toast-action { background: rgba(15, 23, 42, 0.12); border-color: rgba(15, 23, 42, 0.24); }
.toast-close {
  background: transparent;
  border: 0;
  color: currentColor;
  font-size: var(--font-size-lg);
  font-weight: 600;
  cursor: pointer;
  opacity: .9;
  line-height: 1;
}
.toast-close:hover { opacity: 1; }
.toast-bump { transform: scale(1.01); transition: transform .15s ease; }
.toast-success { background: var(--success-color); color: #fff; }
.toast-error, .toast-danger { background: var(--danger-color); color: #fff; }
.toast-info { background: var(--primary-color); color: #fff; }
.toast-warning { background: var(--warning-color); color: #1e293b; }

.sf-victory-banner {
  position: fixed;
  top: calc(var(--header-height, 72px) + var(--space-2));
  left: 50%;
  transform: translateX(-50%);
  z-index: 9998;
  max-width: min(640px, calc(100vw - var(--space-8)));
  background: var(--state-success-bg, #ecfdf5);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
  padding: var(--space-3) var(--space-4);
  opacity: 0;
  transition: opacity var(--sf-motion-base, 250ms) var(--sf-ease-out, ease), transform var(--sf-motion-base, 250ms) var(--sf-ease-out, ease);
}
.sf-victory-banner.sf-slide-down--in { opacity: 1; transform: translateX(-50%) translateY(0); }
.sf-victory-banner.sf-slide-down--out { opacity: 0; transform: translateX(-50%) translateY(-8px); }
.sf-victory-inner { display: flex; align-items: center; gap: var(--space-4); justify-content: space-between; }
.sf-victory-text { font-size: var(--font-size-sm); color: var(--text-color, #0f172a); font-weight: 500; }

@keyframes sfRevealIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.sf-reveal { animation: sfRevealIn var(--sf-motion-base, 250ms) var(--sf-ease-out, ease) both; }
.sf-reveal--stagger > * { animation: sfRevealIn var(--sf-motion-base, 250ms) var(--sf-ease-out, ease) both; }
.sf-reveal--stagger > *:nth-child(1) { animation-delay: 0ms; }
.sf-reveal--stagger > *:nth-child(2) { animation-delay: 60ms; }
.sf-reveal--stagger > *:nth-child(3) { animation-delay: 120ms; }
.sf-reveal--stagger > *:nth-child(4) { animation-delay: 180ms; }
.sf-slide-down { animation: sfRevealIn var(--sf-motion-base, 250ms) var(--sf-ease-out, ease) both; }
@keyframes sfOptimisticMove {
  from { transform: scale(1.02); box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.25); }
  to { transform: scale(1); box-shadow: none; }
}
.sf-optimistic-move { animation: sfOptimisticMove 280ms var(--sf-ease-out, ease) both; }
@keyframes sfCheckSettle {
  0% { transform: scale(1); }
  40% { transform: scale(1.03); }
  100% { transform: scale(1); }
}
.sf-check-settle { animation: sfCheckSettle 450ms var(--sf-ease-out, ease) both; }
.sf-check-settle .sf-setup-progress__check { background: #047857; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .sf-reveal, .sf-reveal--stagger > *, .sf-slide-down, .sf-victory-banner,
  .sf-optimistic-move, .sf-check-settle { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ==================== Modales (utils.js) ==================== */
.sf-modal-overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  /* Zone main uniquement : --sidebar-page-margin = 0 sous 900px */
  left: var(--sidebar-page-margin, 0px);
  background: rgba(15, 23, 42, 0.45);
  z-index: 10000;
  display: none;
  pointer-events: none;
  align-items: flex-start;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
  overflow: auto;
}
.sf-modal {
  width: 100%;
  max-width: 560px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
  z-index: 1;
  pointer-events: auto;
}
.sf-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
}
.sf-modal-title { margin: 0; font-size: var(--font-size-lg); font-weight: 600; }
.sf-modal-heading-text { flex: 1; min-width: 0; }
.sf-modal-heading-text .sf-modal-title + p { margin-top: var(--space-1); }
.sf-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-base);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='2.5'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 1.1rem;
  font-size: 0;
  color: transparent;
  line-height: 0;
  overflow: hidden;
}
.sf-modal-close:hover { 
  border-color: var(--primary-color); 
  background-color: var(--bg-secondary);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%232563eb' stroke-linecap='round' stroke-width='2.5'/%3e%3c/svg%3e");
}
.sf-modal-body { padding: var(--space-5); }

/* Aperçu document (PDF / image) — utils.js */
.sf-doc-preview-overlay { align-items: center; padding: var(--space-3); }
.sf-doc-preview-modal {
  max-width: min(1100px, 96vw);
  width: 100%;
  max-height: 94vh;
  display: flex;
  flex-direction: column;
}
.sf-doc-preview-modal > .sf-modal-header {
  flex-wrap: nowrap;
  gap: var(--space-3);
}
.sf-doc-preview-modal .sf-modal-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 1.3;
}
.sf-doc-preview-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}
.sf-doc-preview-actions > :is(.btn, .btn-icon-dl, .sf-modal-close) {
  box-sizing: border-box;
  width: auto;
  height: 2.25rem;
  min-height: 2.25rem;
  margin: 0;
  vertical-align: middle;
}
.sf-doc-preview-actions > .btn-icon-dl,
.sf-doc-preview-actions > .sf-modal-close { width: 2.25rem; }
.sf-doc-preview-actions > .btn {
  padding: 0 0.75rem;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-md);
  white-space: nowrap;
}
.sf-doc-preview-actions [hidden] { display: none !important; }
.sf-doc-preview-body {
  padding: 0;
  background: var(--bg-secondary);
  overflow: auto;
}
.sf-doc-preview-frame {
  width: 100%;
  height: min(80vh, 860px);
  border: 0;
  display: block;
  background: #fff;
}
.sf-doc-preview-img {
  display: block;
  max-width: 100%;
  max-height: min(80vh, 860px);
  margin: 0 auto;
}
.sf-doc-preview-empty {
  margin: 0;
  padding: var(--space-6);
  text-align: center;
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}
.sf-confirm-message {
  margin: 0;
  color: var(--text-color);
  font-size: var(--font-size-sm);
  line-height: 1.55;
}
.sf-confirm-message--multiline {
  background: #f8fafc;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  max-height: 52vh;
  overflow: auto;
}
.sf-modal-footer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) var(--space-6);
  border-top: 1px solid var(--border-light);
}
.sf-modal-footer:empty { display: none; padding: 0; border: none; }
.sf-modal-footer.flex-column { flex-direction: row; }
.sf-modal-footer > :is(.btn, a.btn) {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}
.sf-modal:has(.sf-followup-compose),
.sf-modal:has(.sf-action-preview) { max-width: 42rem; }
.sf-followup-compose .form-label { margin-top: var(--space-3); margin-bottom: var(--space-2); }
.sf-followup-compose .form-label:first-of-type { margin-top: var(--space-2); }
.sf-followup-compose .sf-confirm-message { margin-bottom: 0; }
.sf-mail-field { margin-top: var(--space-2); }
.sf-mail-field__frame {
  display: block; width: 100%; min-height: 16rem; height: min(42vh, 22rem);
  border: 1px solid var(--border-light, #e2e8f0); border-radius: var(--radius-md, 6px); background: #f4f3f0;
}
.sf-followup-draft__mail .sf-mail-field__frame { min-height: 14rem; height: min(36vh, 18rem); }
.sf-mail-field__edit { margin-top: 0.5rem; }
.sf-mail-field__edit > summary {
  cursor: pointer; font-size: var(--font-size-xs); font-weight: 600;
  color: var(--text-secondary, #475569); list-style: none;
}
.sf-mail-field__edit > summary::-webkit-details-marker { display: none; }
.sf-mail-field__ta {
  margin-top: 0.5rem; min-height: 8rem; resize: vertical;
  white-space: pre-wrap; font-size: var(--font-size-sm); line-height: 1.55;
}
.sf-mail-field__hint { margin: 0.35rem 0 0; font-size: var(--font-size-xs); color: var(--text-muted, #64748b); }
.sf-action-preview-badge {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  line-height: 1;
  border-radius: var(--radius-sm, 4px);
  background: var(--color-primary-50, #eff6ff);
  color: var(--color-primary-700, #1d4ed8);
}
.sf-action-preview-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding: 0.625rem 0.875rem;
  background: var(--bg-surface-variant, #f8fafc);
  border: 1px solid var(--border-light, #e2e8f0);
  border-radius: var(--radius-md, 6px);
}
.sf-action-preview-fact {
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-sm);
  color: var(--text-secondary, #475569);
  font-weight: 500;
}
.sf-action-preview-fact + .sf-action-preview-fact::before {
  content: "•";
  margin: 0 0.5rem;
  color: var(--text-muted, #94a3b8);
}
.sf-action-preview-form .form-group {
  margin-bottom: 0.875rem;
}
.sf-action-preview-form label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  margin-bottom: 0.25rem;
}
.sf-action-preview-form .form-control,
.sf-action-preview-form .form-select {
  width: 100%;
}
.sf-action-preview-hint {
  font-size: var(--font-size-sm);
  color: var(--text-muted, #64748b);
  margin: 0.75rem 0 0;
}
.sf-action-preview-error {
  font-size: var(--font-size-sm);
  color: var(--color-danger, #ef4444);
  margin-top: 0.5rem;
}
.sf-modal-overlay--centered { align-items: center; }
.sf-modal-overlay.active,
.sf-modal-overlay.show,
.sf-modal-overlay[style*="display: flex"],
.sf-modal-overlay[style*="display:flex"] {
  display: flex;
  pointer-events: auto !important;
}
.sf-modal-overlay:not(.active):not(.show):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]),
.deal-modal-overlay:not(.active):not(.show):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]),
.crm-form-modal:not(.active):not(.show):not([style*="display: flex"]):not([style*="display:flex"]):not([style*="display: block"]):not([style*="display:block"]) {
  display: none !important;
  pointer-events: none !important;
}
body.sf-modal-open { overflow: hidden; overscroll-behavior: none; }
.sf-modal--sm { max-width: 28rem; }
.sf-modal--lg { max-width: 800px; }
.sf-modal--xl { max-width: 1100px; }
/* Grandes modales : hauteur bornée, header fixe, corps scrollable */
.sf-modal--lg,
.sf-modal--xl {
  max-height: min(90vh, calc(100vh - 2 * var(--space-8, 2rem)));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.sf-modal--lg > .sf-modal-header,
.sf-modal--xl > .sf-modal-header,
.sf-modal--lg > .sf-modal-footer,
.sf-modal--xl > .sf-modal-footer { flex-shrink: 0; }
.sf-modal--lg > .sf-modal-body,
.sf-modal--xl > .sf-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ==================== Deal & Dossier Modales ==================== */
.deal-modal-overlay.modal,
.deal-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000;
  box-sizing: border-box;
  background: rgba(15, 23, 42, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 1.5rem;
  align-items: center;
  justify-content: center;
}

.deal-modal-overlay.modal.active,
.deal-modal-overlay.active,
.deal-modal-overlay.show,
.deal-modal-overlay[style*="display: flex"],
.deal-modal-overlay[style*="display:flex"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.deal-modal-panel {
  width: min(100%, 72rem);
  max-width: 100%;
  height: min(90vh, 52rem);
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  position: relative;
  z-index: 1;
}

:is(#collaboratorDossierModal, #dataroomDossierModal, [id^="candidateDossierModal-"]) .deal-modal-panel {
  height: auto;
  max-height: min(90vh, 54rem);
}
#dataroomDossierModal .deal-tabs {
  padding: 0.5rem 1.5rem 0 1.5rem;
  margin-bottom: 0;
}
#dataroomDossierModal #dataroomContent {
  padding: 1.25rem 1.5rem 1.5rem 1.5rem;
}
.dataroom-dossier-icon {
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%);
  color: #1a3a5c;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.sf-dossier-list-stack { display: flex; flex-direction: column; gap: 0.5rem; }
.sf-dossier-list-row {
  align-items: center;
  padding: 0.95rem 1.15rem;
  border-radius: 12px;
  border-color: color-mix(in srgb, var(--sf-color-border-subtle, #e2e8f0) 80%, #94a3b8);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.03), 0 10px 28px -18px rgba(15, 23, 42, 0.12);
}
.sf-dossier-list-row:hover {
  background: #fcfdff;
  border-color: color-mix(in srgb, var(--sf-color-cta, #1e3a5f) 18%, var(--sf-color-border-subtle, #e2e8f0));
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.04), 0 16px 32px -18px rgba(15, 23, 42, 0.16);
  transform: translateY(-1px);
}
.sf-dossier-list-row .sf-list-row-main {
  display: flex; align-items: center; gap: 0.9rem; cursor: pointer; min-width: 0;
}
.sf-dossier-list-row .sf-list-row-main:focus-visible {
  outline: 2px solid var(--sf-color-cta, #1e3a5f); outline-offset: 3px; border-radius: 8px;
}
.sf-dossier-list-row .sf-list-row-icon {
  width: 2.5rem; height: 2.5rem; border-radius: 11px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center; color: #1e3a5f;
  background: linear-gradient(160deg, #f8fafc, #eef2f7);
  border: 1px solid color-mix(in srgb, var(--border-color, #e2e8f0) 70%, #cbd5e1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}
.sf-dossier-list-row__body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.18rem; }
.sf-dossier-list-row__titleline { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.sf-dossier-list-row .sf-list-row-title { font-size: var(--sf-text-body-sm); letter-spacing: -0.015em; }
.sf-dossier-list-row .badge { font-size: var(--font-size-2xs); font-weight: 500; letter-spacing: 0.02em; padding: 0.22em 0.6em; border-radius: 999px; }
.sf-dossier-list-row .sf-list-row-meta {
  flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start;
  text-align: left; gap: 0; margin-top: 0.2rem; white-space: normal; font-size: var(--font-size-xs);
}
.sf-dossier-list-row .sf-list-row-actions { align-self: center; }
.sf-dossier-list-row .sf-list-row-actions .btn-sm {
  min-height: 2.125rem; padding: 0.35rem 0.9rem; border-radius: 8px; font-weight: 500;
}
.dataroom-scroll-list {
  max-height: 14rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.dataroom-scroll-list--tall {
  max-height: 22rem;
}

.deal-modal-panel-header {
  flex-shrink: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  background: #fafafa;
}

.deal-modal-title { font-weight: 700; color: var(--crm-text-main, #0f172a); margin: 0; }
.deal-modal-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  background: #ffffff;
}
/* Fiches 360° : le corps scrolle (pas le panneau) — même pattern que .deal-layout */
:is(#contactDossierModal, #collaboratorDossierModal, #dataroomDossierModal, [id^="candidateDossierModal-"]) .deal-modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
[id^="candidateDossierModal-"] .deal-modal-body > .contact-dossier-card {
  flex-shrink: 0;
}
[id^="candidateDossierModal-"] .deal-modal-body > .row {
  flex: 1 1 auto;
  min-height: 0;
}

body.deal-modal-open { overflow: hidden; touch-action: none; }

.deal-layout {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.deal-layout > * {
  width: 100%;
}

.deal-tabs {
  display: flex;
  gap: 1.5rem;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
  margin-bottom: 1.25rem;
  padding-bottom: 0.25rem;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.deal-tabs::-webkit-scrollbar {
  display: none;
}

.deal-tab {
  padding: 0.5rem 0;
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--text-muted, #64748b);
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
  border: none;
  background: none;
  font-family: inherit;
  line-height: inherit;
  outline: none;
}

.deal-tab:hover,
.deal-tab.active,
.deal-tab.is-active {
  color: var(--sf-color-cta, var(--primary-color, #2563eb));
}

.deal-tab.active::after,
.deal-tab.is-active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--sf-color-cta, var(--primary-color, #2563eb));
  border-radius: 2px;
}

.deal-tab-panel {
  display: none;
}

.deal-tab-panel.active,
.deal-tab-panel.is-active {
  display: block;
  animation: sfRevealIn var(--sf-motion-base, 250ms) var(--sf-ease-out, ease) both;
}

/* ── Stepper Pipeline Interactif ── */
.deal-stepper-wrap {
  background: var(--sf-color-surface-subtle, #f8fafc);
  padding: 0.85rem 1.25rem;
  border-radius: var(--sf-radius-lg, 12px);
  border: 1px solid var(--sf-color-border, #e2e8f0);
  flex-shrink: 0;
  margin-bottom: 1rem;
}
.deal-stepper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  overflow-x: auto;
  padding-bottom: 2px;
}
.deal-step-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--sf-radius-md, 8px);
  border: 1px solid transparent;
  background: transparent;
  color: var(--sf-color-text-muted, #64748b);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--sf-motion-fast, 180ms) var(--sf-ease-out, ease);
}
.deal-step-btn:hover {
  background: var(--sf-color-surface-hover, #f1f5f9);
  color: var(--sf-color-primary, #0f172a);
}
.deal-step-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--sf-color-border, #cbd5e1);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-2xs);
  font-weight: 700;
}
.deal-step-done .deal-step-dot {
  background: var(--sf-color-success, #16a34a);
  color: #fff;
}
.deal-step-done {
  color: var(--sf-color-text-secondary, #334155);
}
.deal-step-active {
  background: var(--sf-color-cta, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: var(--sf-shadow-sm, 0 2px 4px rgba(37,99,235,0.25));
}
.deal-step-active .deal-step-dot {
  background: #ffffff;
  color: var(--sf-color-cta, #2563eb);
}

/* ── Hero Bar & KPIs Deal ── */
.deal-hero-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  border: 1px solid var(--sf-color-border, #e2e8f0);
  border-radius: var(--sf-radius-lg, 12px);
  box-shadow: var(--sf-shadow-xs);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}
.deal-hero-amount-val {
  font-family: var(--sf-font-display, inherit);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--sf-color-primary, #0f172a);
}
.deal-hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.65rem;
  border-radius: var(--sf-radius-full, 9999px);
  font-size: var(--font-size-xs);
  font-weight: 600;
}
.deal-hero-pill--won {
  background: rgba(22, 163, 74, 0.12);
  color: #15803d;
  border: 1px solid rgba(22, 163, 74, 0.25);
  animation: deal-won-glow 1.2s ease-out 1;
}
@keyframes deal-won-glow {
  0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.35); }
  100% { box-shadow: 0 0 0 10px rgba(22, 163, 74, 0); }
}
.deal-hero-pill--lost { background: rgba(220, 38, 38, 0.12); color: #b91c1c; border: 1px solid rgba(220, 38, 38, 0.25); }
.deal-hero-pill--open { background: rgba(37, 99, 235, 0.1); color: #1d4ed8; border: 1px solid rgba(37, 99, 235, 0.22); }

.deal-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.deal-kpi-card {
  padding: 0.95rem 1.15rem;
  background: var(--sf-color-surface, #ffffff);
  border: 1px solid var(--sf-color-border, #e2e8f0);
  border-radius: var(--sf-radius-md, 8px);
  box-shadow: var(--sf-shadow-xs);
  transition: all var(--sf-motion-fast) var(--sf-ease-out);
}
.deal-kpi-card:hover {
  box-shadow: var(--sf-shadow-sm);
  border-color: var(--sf-color-border-hover, #cbd5e1);
}
.deal-kpi-card-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--sf-color-text-muted, #64748b);
  margin-bottom: 0.35rem;
}
.deal-kpi-card-val {
  font-weight: 700;
  color: var(--sf-color-primary, #0f172a);
  margin: 0;
}
.deal-kpi-card-sub {
  font-size: var(--font-size-xs);
  color: var(--sf-color-text-muted, #64748b);
  margin-top: 0.25rem;
}

.deal-modal-panel-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--sf-color-border, #e2e8f0);
  background: var(--sf-color-surface-subtle, #fafafa);
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}

.deal-ai-box {
  background: linear-gradient(145deg, #f8faff 0%, #f0fdf4 100%);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: var(--sf-radius-lg, 12px);
  padding: 1.25rem;
  box-shadow: var(--sf-shadow-xs);
}

/* Dossier Avatar */
.contact-avatar-wrapper,
.sf-dossier-avatar-wrapper {
  position: relative;
  display: inline-block;
  cursor: pointer;
  border-radius: 50%;
  flex-shrink: 0;
  outline: none;
}
.contact-avatar-circle,
.sf-dossier-avatar-circle {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-weight: 700;
  font-size: var(--font-size-lg);
  letter-spacing: 0.02em;
  background: var(--sf-color-cta);
  border: 2px solid #ffffff;
  overflow: hidden;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.contact-avatar-wrapper:hover .contact-avatar-circle,
.sf-dossier-avatar-wrapper:hover .sf-dossier-avatar-circle {
  transform: scale(1.03);
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.contact-avatar-img,
.sf-dossier-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.contact-avatar-initials,
.sf-dossier-avatar-initials {
  display: inline-block;
  line-height: 1;
}
.contact-avatar-overlay,
.sf-dossier-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.6);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.contact-avatar-wrapper:hover .contact-avatar-overlay,
.contact-avatar-wrapper:focus-visible .contact-avatar-overlay,
.sf-dossier-avatar-wrapper:hover .sf-dossier-avatar-overlay,
.sf-dossier-avatar-wrapper:focus-visible .sf-dossier-avatar-overlay {
  opacity: 1;
}
.contact-avatar-spinner,
.sf-dossier-avatar-spinner {
  position: absolute;
  top: calc(50% - 0.5rem);
  left: calc(50% - 0.5rem);
  z-index: 2;
  pointer-events: none;
}

/* Dossier Cards */
.contact-dossier-card,
.sf-dossier-card {
  background: #ffffff;
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
}
.contact-dossier-card > .p-3,
.sf-dossier-card > .p-3 {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.contact-dossier-card:hover,
.sf-dossier-card:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.06);
}
.contact-dossier-card-header,
.sf-dossier-card-header {
  padding: 0.875rem 1.125rem;
  background: #f8fafc;
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.contact-dossier-card-header h4,
.sf-dossier-card-header h4 {
  font-size: var(--font-size-sm);
  color: var(--text-primary, #0f172a);
}
.contact-dossier-card .sf-form-grid,
.sf-dossier-card .sf-form-grid {
  padding: 1.125rem;
}
.contact-dossier-card .table-responsive,
.sf-dossier-card .table-responsive {
  margin-bottom: 0;
}
.contact-dossier-card table th,
.sf-dossier-card table th {
  background: #fafafa;
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted, #64748b);
  border-bottom: 1px solid var(--border-color, #e2e8f0);
}
.contact-dossier-empty,
.sf-dossier-empty {
  padding: 1.75rem 1rem;
  text-align: center;
  color: var(--text-muted, #64748b);
  font-size: var(--font-size-sm);
  background: #ffffff;
}
.contact-dossier-empty-icon,
.sf-dossier-empty-icon {
  width: 2rem;
  height: 2rem;
  margin: 0 auto 0.5rem;
  color: #94a3b8;
  opacity: 0.7;
}

/* ==================== Partner dashboard ==================== */
.letter-spacing-1 { letter-spacing: 0.05em; }
.sf-premium-card { border-radius: 20px; transition: all 0.3s ease; }
.sf-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: var(--space-5); }
.sf-action-card {
  padding: 24px;
  border: 1px solid #f2f2f2;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: flex-start;
  position: relative;
}
.sf-action-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
  border-color: var(--bs-primary);
  background: linear-gradient(165deg, #ffffff, #fcfdff);
}
.sf-modal-close:hover,
.alert-close:hover,
.btn-close-mini:hover {
    transform: scale(1.1);
    opacity: 1;
}

.btn-close-mini {
    width: 20px;
    height: 20px;
    border: none;
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%2364748b' stroke-linecap='round' stroke-width='2'/%3e%3c/svg%3e") no-repeat center/12px;
    opacity: 0.5;
    transition: all 0.2s ease;
    cursor: pointer;
    font-size: 0;
    color: transparent;
    line-height: 0;
    overflow: hidden;
}

.btn-close-mini:hover {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath d='M3 3l10 10M13 3L3 13' fill='none' stroke='%232563eb' stroke-linecap='round' stroke-width='2'/%3e%3c/svg%3e");
}
.sf-action-card:hover .sf-action-arrow {
  transform: translateX(4px);
  opacity: 1;
}
.sf-action-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 18px;
  flex-shrink: 0;
}
.sf-action-content { flex-grow: 1; }
.sf-action-arrow {
  position: absolute;
  right: 20px;
  top: 24px;
  font-size: var(--font-size-xl);
  color: var(--bs-primary);
  opacity: 0.3;
  transition: all 0.3s ease;
}
.bg-soft-primary { background-color: #eff6ff; color: #1d4ed8; }
.bg-soft-success { background-color: #f0fdf4; color: #15803d; }
.bg-soft-info { background-color: #ecfeff; color: #0e7490; }
.sf-action-label { font-weight: 700; margin-bottom: 6px; font-size: var(--font-size-xl); color: #1e293b; }
.sf-action-desc { font-size: var(--font-size-sm); color: #64748b; line-height: 1.5; padding-right: 20px; }
.sf-kpi-box {
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background: #fff;
  border: 1px solid var(--border-color);
  text-align: center;
  box-shadow: none;
}
.sf-kpi-value { font-size: var(--font-size-lg); font-weight: 700; color: #0f172a; display: block; margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.sf-kpi-label {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  color: #64748b;
  font-weight: 700;
  letter-spacing: 1px;
}
.sf-table-zebra tbody tr:nth-of-type(odd) { background-color: #fcfdfe; }
.progress {
  display: block;
  background-color: #f1f5f9;
  border-radius: 999px;
  overflow: hidden;
}
.progress-bar {
  display: block;
  height: 100%;
  background: var(--cta-color, #2563eb);
  border-radius: inherit;
}
.partner-portfolio-row--signal { box-shadow: inset 3px 0 0 0 var(--bs-danger); background-color: #fffafb; }
.partner-iso-progress { height: 8px; }
.sf-container-narrow { max-width: 32rem !important; margin-inline: auto; }

/* Barre de score GRC / CLM */
.grc-score-bar {
  height: 6px;
  margin-top: 0.55rem;
  border-radius: var(--sf-radius-pill);
  background: var(--sf-color-surface-muted, #f1f5f9);
  overflow: hidden;
}
.grc-score-bar__fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--sf-color-cta, #2563eb);
  min-width: 0;
}

/* Progress fills — chargement dynamique (dopamine) */
.progress-bar,
.bpm-progress-bar,
.account-quota-fill,
.probability-fill,
.grc-score-bar__fill,
.compta-reconcile-fill,
.agent-progress-bar-fill,
.agent-ranking-bar,
.crm-brief-stage__fill,
.health-bar,
.sf-setup-progress__bar > span,
.marketing-campaign-progress-bar,
.vm-gauge-bar > span,
[data-sf-progress] {
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: width;
}
.sf-progress-arming {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .progress-bar,
  .bpm-progress-bar,
  .account-quota-fill,
  .probability-fill,
  .grc-score-bar__fill,
  .compta-reconcile-fill,
  .agent-progress-bar-fill,
  .agent-ranking-bar,
  .crm-brief-stage__fill,
  .health-bar,
  .sf-setup-progress__bar > span,
  .marketing-campaign-progress-bar,
  .vm-gauge-bar > span,
  [data-sf-progress] {
    transition: none !important;
  }
}

/* ==================== States ==================== */
.state-loading, .state-empty, .state-error {
  border: 1px dashed var(--border-color);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  font-size: var(--font-size-sm);
  background: #fff;
}
.state-loading { color: var(--text-muted); }
.state-empty { color: var(--text-muted); background: #fcfdff; }
.state-error { color: var(--danger-color); background: #fff5f5; border-color: #fecaca; }

/* ==================== Utilities (minimal) ==================== */
/* HTML5 [hidden] must win over display utilities (.d-flex, .form-inline, …) */
[hidden] { display: none !important; }
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.text-nowrap { white-space: nowrap; }
.flex-grow-1, .flex-fill { flex: 1 1 0%; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }
.min-w-0 { min-width: 0; }
.align-center, .align-items-center { align-items: center; }
.align-items-start { align-items: flex-start; }
.align-items-end { align-items: flex-end; }
.align-self-center { align-self: center; }
.justify-between,
.justify-content-between { justify-content: space-between; }
.justify-content-end { justify-content: flex-end; }
.fw-normal { font-weight: 400; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.is-hidden { display: none !important; }
.is-visible { display: block !important; }
.btn.is-visible { display: inline-flex !important; }
.is-busy { pointer-events: none; opacity: 0.7; }
.w-full, .w-100 { width: 100%; }
.text-sm { font-size: var(--sf-text-body-sm); }
.small { line-height: 1.35; font-size: var(--sf-text-meta); }
.text-decoration-underline { text-decoration: underline; }
.bg-white { background: #fff !important; }
.rounded { border-radius: var(--radius-md) !important; }
.p-3 { padding: var(--space-4) !important; }
.m-3 { margin: var(--space-4) !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.float-end { float: right !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--space-2) !important; }
.mb-2 { margin-bottom: var(--space-3) !important; }
.mb-3 { margin-bottom: var(--space-4) !important; }
.mb-4 { margin-bottom: var(--space-5) !important; }
.ms-auto { margin-left: auto !important; }
.me-auto { margin-right: auto !important; }
.p-2 { padding: var(--space-2) !important; }
.p-3 { padding: var(--space-3) !important; }
.p-4 { padding: var(--space-4) !important; }
.px-2 { padding-left: var(--space-2) !important; padding-right: var(--space-2) !important; }
.px-3 { padding-left: var(--space-3) !important; padding-right: var(--space-3) !important; }
.px-4 { padding-left: var(--space-4) !important; padding-right: var(--space-4) !important; }
.py-2 { padding-top: var(--space-3) !important; padding-bottom: var(--space-3) !important; }
.py-3 { padding-top: var(--space-4) !important; padding-bottom: var(--space-4) !important; }
.py-4 { padding-top: var(--space-5) !important; padding-bottom: var(--space-5) !important; }
.border-bottom { border-bottom: 1px solid var(--border-light); }
.mb-6 { margin-bottom: var(--space-8) !important; }
.mt-1 { margin-top: var(--space-1) !important; }
.mt-2 { margin-top: var(--space-2) !important; }
.mt-3 { margin-top: var(--space-3) !important; }
.mt-4 { margin-top: var(--space-4) !important; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.cursor-pointer { cursor: pointer; }
.text-center { text-align: center; }
.text-end { text-align: right; }
.mxw-42 { max-width: 42rem; }
.mxw-48 { max-width: 48rem; }
.mxw-20 { max-width: 20rem; }
.mxw-16 { max-width: 16rem; }
.mxw-6 { max-width: 6rem; }

.sidebar-section-foot {
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--border-color);
}
.sidebar-section-admin { border-top-color: rgba(15, 23, 42, 0.15); }
body.with-sidebar .sidebar-section-account { display: none; }
.app-sidebar .sidebar-item--muted { color: var(--text-muted); }
.app-sidebar .sidebar-item--muted:hover { color: var(--danger-color); }
.settings-intro {
  margin-bottom: var(--space-6);
  padding: var(--space-4);
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
}
.settings-intro strong { display: block; margin-bottom: 0.25rem; }
.settings-inline-note { margin-bottom: 0; }

/* ==================== Callouts (alerte / prochaine action) ==================== */
.sf-banner,
.sf-ceo-next-bar {
  flex-shrink: 0;
  margin: 0 0 var(--space-4);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.sf-banner {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--sf-color-warning);
  background: var(--state-warning-bg);
  color: var(--text-color);
}
.sf-banner--toggle { display: none; }
.sf-banner--toggle.is-visible { display: block; }
.sf-banner--info { border-left-color: var(--sf-color-info); background: var(--state-info-bg); }
.sf-banner__title { margin: 0; font-size: var(--font-size-sm); font-weight: 600; line-height: 1.35; letter-spacing: 0.01em; }
.sf-banner--warning .sf-banner__title { color: var(--sf-color-warning); }
.sf-banner--info .sf-banner__title { color: var(--sf-color-info); }
.sf-banner__body { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); line-height: 1.4; color: var(--text-muted); }
.sf-banner__body:empty { display: none; }
.sf-ceo-next-bar {
  background: var(--surface, #fff);
  border: 1px solid var(--border-color, #e5e7eb);
  border-left: 3px solid var(--sf-color-info, #2563eb);
}
.sf-ceo-next-bar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem 1rem;
  padding: 0.65rem 0.85rem;
}
.sf-ceo-next-bar__copy { min-width: min(100%, 14rem); flex: 1 1 12rem; }
.sf-ceo-next-bar__kicker {
  margin: 0 0 0.15rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, #6b7280);
}
.sf-ceo-next-bar__step { font-variant-numeric: tabular-nums; color: var(--sf-color-info, #2563eb); font-weight: 700; }
.sf-ceo-next-bar[data-hydrating="1"] .sf-ceo-next-bar__step { visibility: hidden; }
/* Ghost a11y : skeletons hors arbre de titres */
[aria-busy="true"] .skeleton,
.sf-loading-inline .skeleton,
.sf-erp-skeleton-row,
.sf-erp-skeleton-table { speak: never; }
.sf-ceo-next-bar__title { margin: 0; font-weight: 650; font-size: var(--font-size-base); line-height: 1.25; color: var(--text-primary, #111827); }
.sf-ceo-next-bar__hint { margin: 0.2rem 0 0; font-size: var(--font-size-sm); line-height: 1.35; color: var(--text-secondary, #6b7280); max-width: 40rem; }
.sf-ceo-next-bar__cta { min-height: 36px; width: max-content; max-width: 100%; padding: 0.4rem 0.85rem; font-weight: 600; flex: 0 0 auto; white-space: nowrap; pointer-events: auto; }
.sf-ceo-next-bar { pointer-events: none; }
@media (max-width: 640px) {
  .sf-ceo-next-bar { border-radius: 0; margin-inline: -0.75rem; border-right: 0; }
}
.sf-note {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.sf-note--boxed {
  padding: var(--space-3) var(--space-4);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}

.empty-state-canvas {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-6) var(--space-5);
  text-align: center;
  background: var(--bg-secondary);
  border-radius: var(--radius-md);
}
.empty-state-icon { width: 40px; height: 40px; margin: 0 0 var(--space-3); color: var(--text-muted); opacity: 0.7; flex-shrink: 0; }
.empty-state-icon svg { width: 100%; height: 100%; display: block; }
.empty-state-title { margin: 0 0 var(--space-2); max-width: 28rem; font-size: var(--font-size-lg); font-weight: 600; color: var(--text-primary); }
.empty-state-desc { margin: 0 0 var(--space-4); max-width: 28rem; font-size: var(--font-size-sm); line-height: 1.5; color: var(--text-muted); }
.empty-state-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; max-width: 28rem; }
.empty-state-title + .empty-state-actions { margin-top: var(--space-3); }
.empty-state-canvas--compact { padding: var(--space-5) var(--space-4); }
.empty-state-canvas--compact .empty-state-icon { width: 36px; height: 36px; }
.empty-state-canvas--compact .empty-state-title { font-size: var(--font-size-base); }

/* ==================== Form field errors (inline) ==================== */
.form-field { margin-bottom: var(--space-4); }
.form-field-label { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--text-primary); margin-bottom: var(--space-1); }
.form-field-label .required { color: var(--danger-color); margin-left: 2px; }
.form-field-hint {
  display: block;
  margin-top: var(--space-2);
}
.sf-section-subtitle {
  margin: var(--space-3) 0 0;
}
.sf-field-status {
  --sf-tone-fg: var(--sf-text-caption);
  --sf-tone-accent: rgba(148, 163, 184, 0.45);
  --sf-tone-bg: transparent;
  display: block;
  margin-top: var(--space-3);
  padding: 0.25rem 0 0.25rem 0.65rem;
  font-size: var(--sf-text-meta);
  font-weight: 400;
  line-height: var(--sf-line-caption);
  letter-spacing: var(--sf-caption-track);
  color: var(--sf-tone-fg);
  background: var(--sf-tone-bg);
  border: 0;
  border-left: 1.5px solid var(--sf-tone-accent);
  border-radius: 0 2px 2px 0;
}
.sf-field-status--success {
  --sf-tone-fg: rgba(22, 101, 52, 0.9);
  --sf-tone-accent: rgba(34, 197, 94, 0.55);
  --sf-tone-bg: rgba(22, 101, 52, 0.03);
}
.sf-field-status--warning {
  --sf-tone-fg: rgba(180, 83, 9, 0.92);
  --sf-tone-accent: rgba(245, 158, 11, 0.55);
  --sf-tone-bg: rgba(180, 83, 9, 0.03);
}
.sf-field-status--danger {
  --sf-tone-fg: rgba(153, 27, 27, 0.92);
  --sf-tone-accent: rgba(239, 68, 68, 0.5);
  --sf-tone-bg: rgba(153, 27, 27, 0.03);
}
.sf-field-status a {
  color: inherit;
  font-weight: 500;
  text-underline-offset: 2px;
}
.small.text-muted.mt-1,
.small.mt-1.text-muted { margin-top: var(--space-3) !important; }

/* Astérisque obligatoire / recommandé (formulaires guidés) */
.sf-field-required {
  margin-left: 0.15rem;
  font-weight: 700;
  text-decoration: none;
  cursor: help;
}
.sf-field-required--req { color: var(--danger-color); }
.sf-field-required--rec { color: var(--text-muted); }
.form-label .sf-field-required { margin-left: var(--space-1); }
.sf-form-field .form-text { margin-top: var(--space-1); line-height: 1.35; }

.form-field-error { display: block; font-size: var(--font-size-sm); color: var(--danger-color); margin-top: var(--space-1); font-weight: 500; }
.form-field--invalid .form-control,
.form-field--invalid .form-select,
.form-field--invalid input,
.form-field--invalid textarea,
.form-field--invalid select {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}
.form-field--invalid .form-control:focus,
.form-field--invalid input:focus,
.form-field--invalid textarea:focus,
.form-field--invalid select:focus {
  border-color: var(--danger-color);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}
/* Champ valide */
.form-field--valid .form-control,
.form-field--valid input,
.form-field--valid textarea,
.form-field--valid select {
  border-color: var(--success-color);
}

/* Dropzone fichier — ESG, Marketing, ERP, … */
.sf-upload {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.25rem;
  width: 100%; min-height: 5.5rem; margin: 0; padding: var(--space-5);
  text-align: center; cursor: pointer;
  border: 2px dashed var(--border-color); border-radius: var(--radius-md);
  background: var(--bg-elevated);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.sf-upload:hover,
.sf-upload:focus-within { background: var(--bg-secondary); border-color: var(--text-muted); }
.sf-upload:focus-within { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.sf-upload__title { font-weight: 600; color: var(--text-primary); }
.sf-upload__hint { font-size: var(--font-size-sm); color: var(--text-muted); }
.upload-status {
  display: none; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); font-size: var(--font-size-sm);
}
.upload-status.show { display: block; }
.upload-status.loading { background: var(--bg-secondary); color: var(--text-muted); }
.upload-status.success { background: var(--sf-color-success-bg); color: var(--sf-color-success); }
.upload-status.error { background: var(--sf-color-danger-bg); color: var(--sf-color-danger); }

/* Clickable zones */
[role="button"]:not([aria-disabled="true"]),
[data-action],
[onclick] { cursor: pointer; }

/* ==================== Dashboard & CRM UX (refonte) ==================== */
.sf-mb-section { margin-bottom: var(--space-6); }
.sf-dashboard-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  min-height: calc(var(--sf-chart-height) + var(--space-4));
}
@media (max-width: 768px) {
  .sf-dashboard-charts-row { grid-template-columns: 1fr; min-height: auto; }
}
.dashboard-header-controls { flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.sf-details-ia { position: relative; }
.sf-details-ia > summary.sf-summary-btn {
  list-style: none;
  cursor: pointer;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-size: var(--font-size-sm);
}
.sf-details-ia > summary.sf-summary-btn::-webkit-details-marker { display: none; }
.sf-details-ia-body {
  position: absolute;
  right: 0;
  z-index: var(--z-dropdown);
  margin-top: var(--space-2);
  padding: var(--space-3);
  background: var(--bg-elevated);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 220px;
}
/* Réinitialisation universelle details/summary & styles exécutifs */
details > summary {
  list-style: none;
  cursor: pointer;
}
details > summary::-webkit-details-marker {
  display: none;
}
.sf-advanced-panel summary.sf-advanced-summary,
.sf-crm-advanced > summary {
  cursor: pointer;
  list-style: none;
}

/* Composant universel de carte accordéon exécutif (Gouvernance, GRC, BPM, Intégrations) */
.sf-details-card,
.grc-details-advanced,
.gov-section {
  background: var(--bg-elevated, #ffffff);
  border: 1px solid var(--border-color, #e2e8f0);
  border-radius: var(--radius-lg, 14px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));
  transition: border-color var(--transition-base, 0.2s ease), box-shadow var(--transition-base, 0.2s ease);
  overflow: hidden;
  margin-bottom: var(--space-4, 1.125rem);
  position: relative;
}

.sf-details-card:hover,
.grc-details-advanced:hover,
.gov-section:hover {
  border-color: var(--border-hover, #cbd5e1);
  box-shadow: var(--shadow-md, 0 4px 14px -2px rgba(15, 23, 42, 0.06));
}

.sf-details-card[open],
.grc-details-advanced[open],
.gov-section[open] {
  border-color: var(--border-hover, #cbd5e1);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(15, 23, 42, 0.04));
}

/* Surface exécutive — tokens or (cartes + panneaux CLM) */
:is(.sf-card--executive, .clm-compliance-header, .clm-fold, .clm-paper) {
  border: 1px solid color-mix(in srgb, var(--sf-color-gold) 18%, var(--border-color, #e2e8f0));
  border-radius: var(--sf-radius-lg);
  box-shadow: var(--sf-shadow-soft);
  background: linear-gradient(145deg, #fff 0%, var(--sf-color-gold-light) 100%);
}
.sf-card--executive {
  box-shadow: var(--sf-shadow-premium);
  background: radial-gradient(circle at 100% 0%, var(--sf-color-gold-soft) 0%, transparent 42%), var(--bg-elevated, #fff);
}
:is(.sf-card--executive:hover, .sf-card--executive[open], .clm-fold:hover, .clm-fold[open]) {
  border-color: color-mix(in srgb, var(--sf-color-gold) 34%, var(--border-color, #e2e8f0));
  box-shadow: var(--sf-shadow-premium), var(--sf-shadow-gold);
}
.sf-card--executive .grc-details-icon-box {
  background: linear-gradient(135deg, var(--sf-color-gold-soft), var(--sf-color-gold-light));
  color: var(--sf-color-gold-dark);
  border: 1px solid var(--sf-color-gold-border);
}
.grc-score-bar__fill[data-tone="ok"] { background: #059669; }
.grc-score-bar__fill[data-tone="warn"] { background: #d97706; }
.grc-score-bar__fill[data-tone="bad"] { background: #dc2626; }

.sf-details-card > summary,
.grc-details-advanced > summary,
.gov-section-header {
  padding: 1.15rem 1.35rem;
  font-family: var(--sf-font-display, inherit);
  font-weight: 600;
  color: var(--text-primary, #0f172a);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  user-select: none;
  background: transparent;
  transition: background-color 0.2s ease;
  outline: none;
}

.sf-details-card > summary:hover,
.grc-details-advanced > summary:hover,
.gov-section-header:hover {
  background: var(--bg-secondary, #f8fafc);
}

.sf-details-card[open] > summary,
.grc-details-advanced[open] > summary,
.gov-section[open] > .gov-section-header {
  background-color: var(--bg-secondary, #f8fafc);
  border-bottom: 1px solid rgba(226, 232, 240, 0.8);
}

/* En-tête avec étape et titre */
.gov-section-header-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1 1 auto;
  min-width: 0;
}

.gov-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  border-radius: 50%;
  background: var(--sf-color-cta, #2563eb);
  color: #fff;
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.gov-section[open] .gov-step-num {
  background: var(--sf-color-cta-strong, #1d4ed8);
}

.gov-section-titles {
  min-width: 0;
  flex: 1;
}

.gov-section-title {
  display: block;
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--text-color, #0f172a);
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.gov-section[open] .gov-section-title {
  color: var(--text-color, #0f172a);
}

.gov-section-description {
  display: block;
  font-size: var(--font-size-sm);
  color: #64748b;
  line-height: 1.45;
  margin-top: 0.2rem;
  font-weight: 400;
}

.gov-section-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: var(--font-size-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 9999px;
  padding: 0.25rem 0.8rem;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: auto;
  transition: all 0.2s ease;
  border: 1px solid #e2e8f0;
  color: #64748b;
  background: #f8fafc;
}

.gov-section-status-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.gov-section-status-ok {
  border-color: rgba(16, 185, 129, 0.35) !important;
  color: #047857 !important;
  background: rgba(16, 185, 129, 0.08) !important;
  box-shadow: 0 1px 2px rgba(16, 185, 129, 0.05);
}

.gov-section-status-todo {
  border-color: rgba(245, 158, 11, 0.35) !important;
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.08) !important;
  box-shadow: 0 1px 2px rgba(245, 158, 11, 0.05);
}

.gov-section-status-review {
  border-color: rgba(239, 68, 68, 0.35) !important;
  color: #b91c1c !important;
  background: rgba(239, 68, 68, 0.08) !important;
  box-shadow: 0 1px 2px rgba(239, 68, 68, 0.05);
}

.gov-section-header::after {
  content: "";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background-color: #f1f5f9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2364748b'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 16px 16px;
  flex-shrink: 0;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease;
  margin-left: 0.5rem;
}

.gov-section-header:hover::after {
  background-color: #e2e8f0;
}

.gov-section[open] > .gov-section-header::after {
  transform: rotate(180deg);
  background-color: #dbeafe;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%232563eb'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
}

.gov-section-body {
  border-top: 1px solid var(--border-light, #e2e8f0);
  background: var(--bg-elevated, #ffffff);
  padding: 1.35rem 1.35rem 1.5rem 1.35rem;
}

@media (max-width: 640px) {
  .gov-section-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.5rem 0.75rem;
    padding: 0.85rem 1rem;
  }
  .gov-section-header-main {
    flex: 1 1 calc(100% - 2.5rem);
    gap: 0.75rem;
  }
  .gov-section-status-badge {
    margin-left: 2.65rem;
    order: 2;
  }
  .gov-section-header::after {
    margin-left: auto;
  }
  .gov-section-body {
    padding: 1rem;
  }
  .gov-section-description {
    font-size: var(--font-size-xs);
  }
}

.grc-details-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.grc-details-header-content {
  display: flex;
  align-items: center;
  gap: var(--space-3, 0.75rem);
  min-width: 0;
}

.grc-details-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md, 8px);
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(59, 130, 246, 0.05));
  color: var(--sf-color-primary, #2563eb);
  flex-shrink: 0;
}

.grc-details-chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--bg-secondary, #f1f5f9);
  color: var(--text-muted, #64748b);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), background 0.15s ease, color 0.15s ease;
  flex-shrink: 0;
}

/* Sélecteur luxueux exécutif partagé */
:is(.bpm-luxury-select, .sf-luxury-select) {
  height: 36px;
  min-height: 36px;
  font-family: var(--sf-font-sans);
  font-size: var(--sf-font-size-sm);
  border-radius: var(--sf-radius-md, 8px);
  color: var(--sf-color-text, #0f172a);
  background-color: var(--sf-color-surface, #ffffff);
  border: 1px solid rgba(203, 213, 225, 0.85);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  appearance: none;
  -webkit-appearance: none;
  padding: 0 2.25rem 0 0.85rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 20 20' fill='none' stroke='%23475569' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 7.5 5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  cursor: pointer;
  transition: all var(--sf-motion-fast, 150ms) var(--sf-ease-out);
}

:is(.bpm-luxury-select, .sf-luxury-select):hover {
  border-color: #94a3b8;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.05);
}

:is(.bpm-luxury-select, .sf-luxury-select):focus {
  border-color: var(--sf-color-cta, #2563eb);
  box-shadow: var(--sf-focus-ring, 0 0 0 3px rgba(37, 99, 235, 0.12));
  outline: none;
}

details[open] > summary .grc-details-chevron,
.grc-details-advanced[open] > summary .grc-details-chevron {
  transform: rotate(180deg);
  background: rgba(37, 99, 235, 0.1);
  color: var(--sf-color-primary, #2563eb);
}

.grc-details-body {
  border-top: 1px solid var(--border-light, #e2e8f0);
  background: var(--bg-elevated, #ffffff);
  min-width: 0;
  max-width: 100%;
}

/* CRM — barres d’outils et stats (lisibilité, sans enchaînement de spans) */
.crm-toolbar-block { display: flex; flex-direction: column; gap: var(--space-3); }
.crm-prospection-toolbar .crm-field-inline {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.crm-field-inline-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.2;
}
.crm-field-search { width: 12rem; max-width: 100%; }
.crm-field-status { width: 10rem; max-width: 100%; }
.crm-field-sort { width: 12rem; max-width: 100%; }
/* Bandeau KPI : grille unique (div ou ul) — padding via tokens */
.crm-mini-stats,
.sf-stat-strip {
  --sf-stat-strip-pad-y: var(--space-3);
  --sf-stat-strip-pad-x: var(--space-5);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr));
  gap: var(--space-3) var(--space-4);
  margin: 0;
  padding: var(--sf-stat-strip-pad-y) var(--sf-stat-strip-pad-x);
  list-style: none;
  background: var(--border-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
/* Bandeaux KPI denses (moins de padding vertical, cellules plus petites) */
.crm-mini-stats--compact,
.sf-stat-strip--compact {
  --sf-stat-strip-pad-y: var(--space-2);
  --sf-stat-strip-pad-x: var(--space-4);
  padding: var(--sf-stat-strip-pad-y) var(--sf-stat-strip-pad-x);
  gap: var(--space-2) var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr));
}
.crm-mini-stats--compact .crm-mini-stat-label,
.sf-stat-strip--compact .crm-mini-stat-label {
  font-size: var(--font-size-2xs);
}
.crm-mini-stats--compact .crm-mini-stat-value,
.sf-stat-strip--compact .crm-mini-stat-value {
  font-size: var(--font-size-sm);
}
/* Bandeau KPI exécutif (RH, CRM…) — même grille compacte que CRM */
.sf-stat-strip--exec {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-3) var(--space-4);
  align-items: start;
}
.sf-stat-strip--exec .crm-mini-stat { min-width: 0; }
.sf-stat-strip--exec .crm-mini-stat--wide {
  grid-column: span 2;
  min-width: 10rem;
}
@media (max-width: 768px) {
  .sf-stat-strip--exec {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sf-stat-strip--exec .crm-mini-stat--wide {
    grid-column: 1 / -1;
  }
}
.crm-mini-stats--support.sf-stat-strip--compact,
.sf-stat-strip--support.sf-stat-strip--compact {
  grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
}
@media (min-width: 900px) {
  .crm-mini-stats--support.sf-stat-strip--compact,
  .sf-stat-strip--support.sf-stat-strip--compact {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.sf-stat-stack { display: flex; flex-direction: column; gap: var(--space-2); }
.sf-stat-stack-rule {
  border: 0;
  border-top: 1px solid var(--border-color);
  margin: var(--space-1) 0 0;
}
/* Tuiles dashboard / parcours — préférer sf-tile-grid ou sf-stat-strip aux row/col bruts */
.sf-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-2);
}
.sf-playbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-2);
}
.sf-playbook-card {
  min-height: 0;
}
.sf-playbook-card ol {
  margin: var(--space-2) 0;
  padding-left: 1.1rem;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}
.sf-playbook-card strong {
  font-size: var(--font-size-sm);
  display: block;
  margin-bottom: 2px;
}
.crm-mini-stats--support,
.sf-stat-strip--support {
  grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
}
@media (min-width: 900px) {
  .crm-mini-stats--support,
  .sf-stat-strip--support {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.crm-mini-stats--badges .crm-mini-stat,
.sf-stat-strip--badges .crm-mini-stat {
  min-width: 0;
}
.crm-mini-stats--badges .badge.crm-mini-stat-value,
.sf-stat-strip--badges .badge.crm-mini-stat-value {
  font-size: var(--font-size-xs);
  font-weight: 500;
  width: fit-content;
}
.crm-mini-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.crm-mini-stat-label {
  font-size: var(--font-size-xs);
  color: var(--text-muted);
  line-height: 1.25;
  max-width: 100%;
  overflow-wrap: break-word;
}
.crm-mini-stat-label--caps {
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.crm-mini-stat-footnote {
  margin-top: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.45;
  color: var(--sf-text-caption);
}
.crm-mini-stat-value {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--text-color);
  line-height: 1.2;
}
.crm-mini-stat--wide { grid-column: span 2; min-width: 10rem; max-width: 100%; }
.crm-mini-stat--accent .crm-mini-stat-value,
.sf-stat-group--accent .crm-mini-stat-value { color: var(--sf-color-cta, #0369a1); }
.crm-mini-stat-value--wrap {
  display: block;
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: none;
}
/* Groupes de bandeaux KPI (Pilotage RH = mêmes cellules que CRM) */
.sf-stat-groups {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.sf-stat-group-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-2xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.sf-stat-group .sf-stat-strip { margin: 0; }
/* Liste verticale libellé / valeur (ex. risques BPM) */
.sf-stat-kv {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--border-light);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
}
.sf-stat-kv-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  line-height: 1.35;
}
.sf-stat-kv-label { color: var(--text-muted); min-width: 0; overflow-wrap: anywhere; }
.sf-stat-kv-value { font-weight: 600; color: var(--text-color); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-stat-kv-value.sf-amt--pos { color: var(--success-color, #059669); }
.sf-stat-kv-value.sf-amt--neg { color: var(--danger-color, #dc2626); }
.sf-stat-kv a { color: inherit; font-weight: 600; text-decoration: none; }
.sf-stat-kv a:hover { text-decoration: underline; color: var(--text-color); }

/* Liens tableau de bord RH — pas d’enchaînement inline */
.dashboard-links { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--border-color); text-align: left; }
.dashboard-links ul { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); list-style: none; padding: 0; margin: 0; }
.dashboard-links a { color: var(--text-secondary); text-decoration: none; font-weight: 500; text-align: left; }
.dashboard-links a:hover { color: var(--text-color); text-decoration: underline; }

.sf-hint-text { line-height: var(--line-height-relaxed); max-width: 42rem; }
.sf-support-kpis-dynamic:empty { display: none; }
.sf-support-kpis-dynamic:not(:empty) { margin-top: var(--space-2); }

/* Cockpit ERP (documents) — évite flex + spans inline */
.sf-erp-cockpit {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: flex-start;
  justify-content: space-between;
}
.sf-erp-cockpit-col { min-width: min(100%, 260px); flex: 1 1 220px; }
.sf-erp-cockpit-col .small.text-muted:first-child { margin-bottom: var(--space-2); }
.sf-erp-cockpit-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
  align-items: center;
}
.sf-executive-hint a { color: var(--text-secondary); }
.crm-ventes-toolbar-primary {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-2);
  align-items: center;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
  position: relative;
  z-index: 25;
  background: var(--bg-primary, #fff);
}
.crm-ventes-toolbar-primary .form-select { max-width: 14rem; flex-shrink: 0; }
.crm-ventes-toolbar-primary > .btn,
.crm-ventes-toolbar-primary > button { flex-shrink: 0; }
section.card #pipelineKanban {
  position: relative;
  z-index: 0;
  margin-top: var(--space-2);
}
.crm-more-actions {
  flex-shrink: 0;
}
.crm-more-actions > summary {
  cursor: pointer;
  list-style: none;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--text-secondary);
  background: var(--bg-elevated);
}
.crm-more-actions > summary::-webkit-details-marker { display: none; }
.crm-more-actions-body {
  position: relative;
  z-index: 5;
  margin-top: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.08);
}
.crm-ventes-toolbar-primary:has(.crm-more-actions[open]) {
  z-index: 40;
}
.sf-minw-160 { min-width: 10rem; }
.sf-minw-220 { min-width: 13.75rem; }
.sf-portfolio-charts { min-height: calc(var(--sf-chart-height-lg) + var(--space-10)); }

/* Graphiques — règles transversales (Chart.js + conteneurs) */
.chart-container,
.chart-container-wrapper {
  position: relative;
  height: var(--sf-chart-height);
  width: 100%;
}
.chart-container-wrapper--sm { height: var(--sf-chart-height-sm); }
.chart-container canvas,
.chart-container-wrapper canvas {
  max-height: 100%;
}
.bpm-chart-card { min-height: calc(var(--sf-chart-height-lg) + var(--space-8)); }
.bpm-chart-skeleton,
.bpm-chart-area {
  height: var(--sf-chart-height-lg);
}
.bpm-chart-area canvas {
  width: 100% !important;
  height: 100% !important;
}
.sc-chart-wrap {
  position: relative;
  height: var(--sf-chart-height-lg);
}
.sc-chart-wrap canvas { width: 100% !important; height: 100% !important; }
.chart-box { min-height: var(--sf-chart-height-sm); }

/* ==================== Responsive (consolidé mobile / tablette) ==================== */
.main-nav.is-scrolled { box-shadow: var(--shadow-md); }

@media (max-width: 900px) {
  :root {
    --content-gutter: var(--space-4);
    --sidebar-width: 0px;
    --sidebar-page-margin: 0px;
  }
  html { overflow-x: hidden; overflow-y: auto; max-width: 100vw; }
  body { overflow: visible; max-width: 100vw; }
  .main-content { padding: var(--space-4); }
  .content-wrapper { padding: 0; }
  body.with-sidebar .main-content { margin-left: 0; padding-left: var(--space-4); }
  body.with-sidebar .content-wrapper,
  body.with-sidebar .main-footer {
    margin-left: 0;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    width: 100%;
    max-width: 100%;
  }
  body.with-sidebar .mobile-menu-toggle { display: flex; }
  body.with-sidebar .nav-header-links { display: none; }
  body.with-sidebar .sidebar-section-account { display: block; }
  .page-header { margin-bottom: var(--space-4); padding-bottom: var(--space-3); }
  .card { padding: var(--space-4); }
  .app-sidebar {
    width: var(--sidebar-drawer-width);
    transform: translateX(-100%);
    transition: transform var(--transition-slow);
    z-index: 1999;
    box-shadow: var(--shadow-lg);
    pointer-events: none;
  }
  .app-sidebar.open { transform: translateX(0); pointer-events: auto; }
  /* Business Hub : rail → bandeau horizontal scrollable */
  body.public-external-page .app-sidebar.portal-sidebar {
    position: sticky; top: var(--header-height); left: 0; right: 0; width: 100%; height: auto;
    transform: none; pointer-events: auto; box-shadow: none; border-right: none;
    border-bottom: 1px solid var(--border-color); z-index: 850; background: var(--bg-elevated);
    overflow: visible;
  }
  body.public-external-page .app-sidebar.portal-sidebar .sidebar-inner {
    flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding: var(--space-2) var(--content-gutter); gap: var(--space-1);
    overscroll-behavior-x: contain;
  }
  body.public-external-page .app-sidebar.portal-sidebar .sidebar-section {
    display: flex; flex-flow: row nowrap; align-items: center; gap: var(--space-1); margin: 0;
    min-width: max-content;
  }
  body.public-external-page .app-sidebar.portal-sidebar .sidebar-section-title { display: none; }
  body.public-external-page .app-sidebar.portal-sidebar .sidebar-item {
    flex: 0 0 auto; width: auto; white-space: nowrap; margin: 0; border-inline-start: none;
    border-radius: var(--radius-sm); border-bottom: 2px solid transparent;
    padding: var(--space-2) var(--space-3); color: var(--text-muted);
  }
  body.public-external-page .app-sidebar.portal-sidebar .sidebar-item.active {
    color: var(--primary-color); background: var(--nav-rail-hover);
    border-bottom-color: var(--portal-accent, var(--primary-accent));
  }
}

@media (max-width: 768px) {
  /* Table to Cards Transformation */
  .table-responsive:not(.sf-sortable-wrap) table, 
  .table-responsive:not(.sf-sortable-wrap) thead, 
  .table-responsive:not(.sf-sortable-wrap) tbody, 
  .table-responsive:not(.sf-sortable-wrap) th, 
  .table-responsive:not(.sf-sortable-wrap) td, 
  .table-responsive:not(.sf-sortable-wrap) tr {
    display: block;
  }

  .table-responsive:not(.sf-sortable-wrap) thead tr {
    position: absolute;
    top: -9999px;
    left: -9999px;
  }

  .table-responsive:not(.sf-sortable-wrap) tr {
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-4);
    padding: var(--space-2);
    box-shadow: var(--shadow-sm);
  }

  .table-responsive:not(.sf-sortable-wrap) td {
    border: none;
    position: relative;
    padding: var(--space-2) var(--space-4) !important;
    text-align: left !important;
    min-height: 44px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--space-1);
    border-bottom: 1px solid var(--border-color-subtle);
  }

  .table-responsive:not(.sf-sortable-wrap) td:last-child {
    border-bottom: none;
  }

  .table-responsive:not(.sf-sortable-wrap) td:before {
    content: attr(data-label);
    position: static;
    width: auto;
    padding-right: 0;
    white-space: normal;
    text-align: left;
    font-weight: 600;
    color: var(--text-muted);
    font-size: var(--font-size-xs);
  }

  /* Optimize touch targets */
  .btn, .nav-link, select, input:not([type="checkbox"]):not([type="radio"]) {
    min-height: var(--touch-min);
  }

  /* iOS Safari : pas de zoom auto au focus (seuil 16px) — formulaires mobiles */
  input,
  select,
  textarea,
  .form-control,
  .form-control-sm,
  .form-select,
  .form-select-sm,
  textarea.form-control-sm {
    font-size: var(--font-size-base);
  }

  :root {
    --header-height: var(--header-height-mobile);
    --content-gutter: var(--space-4);
  }
  html { overflow-x: hidden; overflow-y: auto; max-width: 100vw; }
  body { overflow: visible; max-width: 100vw; }
  .nav-user .user-name { display: none; }
  .mobile-menu-toggle { display: flex; }
  .nav-auth:not(.nav-mobile-clone) { display: none; }
  .nav-brand { max-width: calc(100% - 3rem); }
  .main-nav { height: var(--header-height-mobile); padding-top: env(safe-area-inset-top, 0); }
  .main-nav .nav-container { padding-left: max(var(--space-3), env(safe-area-inset-left)); padding-right: max(var(--space-3), env(safe-area-inset-right)); }
  .main-content {
    padding: var(--space-3);
    margin-top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px));
    min-height: calc(100vh - var(--header-height-mobile) - env(safe-area-inset-top, 0px));
  }
  .content-wrapper { padding: 0; }
  [class$="-section-content"] { gap: var(--space-3); }
  body.with-sidebar .main-content { padding-left: var(--space-3); }
  body.with-sidebar .content-wrapper,
  body.with-sidebar .main-footer { padding-left: var(--space-3); padding-right: var(--space-3); }
  .container { padding-left: 0; padding-right: 0; }
  .page-header { margin-bottom: var(--space-3); padding-bottom: var(--space-2); }
  .card { border-radius: var(--radius-lg); padding: var(--space-4); }
  .btn, .of-tab { min-height: var(--touch-min); }
  .btn { padding: 0.5rem 0.875rem; }
  .btn-sm { min-height: var(--sf-control-height-sm); }
  .sf-form-grid,
  .sf-form-grid--2,
  .sf-form-grid--3 { grid-template-columns: 1fr; }
  .sf-inline-field-row--media .form-control { max-width: none; }
  .row > [class*="col-md-"],
  .row > [class*="col-lg-"],
  .row > [class*="col-xl-"] { --sf-col-span: 12; }
  .row > .col-1,
  .row > .col-2,
  .row > .col-3,
  .row > .col-4,
  .row > .col-5 { --sf-col-span: 12; }
  .sf-tile-grid,
  .sf-playbook-grid,
  .kpis-grid,
  .crm-mini-stats,
  .sf-stat-strip { grid-template-columns: 1fr !important; }
  .sf-dashboard-charts-row { grid-template-columns: 1fr; min-height: auto; }
  .sf-list-row:not(.sf-list-row--inline) {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
    padding: var(--space-3);
  }
  .sf-list-row:not(.sf-list-row--inline) .sf-list-row-meta {
    white-space: normal;
    align-items: flex-start;
    padding-top: var(--space-1);
    border-top: 1px solid var(--border-color-subtle);
    margin-top: var(--space-1);
  }
  .sf-dossier-list-row .sf-list-row-meta { align-items: center; border-top: 0; padding-top: 0; margin-top: 0.15rem; }
  .sf-dossier-list-row .sf-list-row-actions { width: 100%; justify-content: flex-end; }
  .sf-list-row-meta.sf-actionfeed-actions { align-items: center; justify-content: flex-start; }
  .ventes-row { flex-direction: column; align-items: stretch; }
  .messages-container {
    left: var(--space-3);
    right: var(--space-3);
    max-width: none;
    top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px) + var(--space-2));
  }
  .toast-container {
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px));
  }
  .sf-modal-overlay { padding: 0; align-items: stretch; }
  .sf-modal {
    max-width: 100%;
    min-height: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .sf-modal--lg,
  .sf-modal--xl {
    max-height: 100dvh;
    max-height: 100vh;
    height: 100%;
    min-height: 0;
  }
  .deal-modal-overlay.modal.active,
  .deal-modal-overlay.active,
  .deal-modal-overlay.show,
  .deal-modal-overlay[style*="display: flex"],
  .deal-modal-overlay[style*="display:flex"] {
    display: flex !important;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
  }
  .deal-modal-panel {
    width: 100%;
    max-width: 100%;
    height: 100%;
    max-height: none;
    min-height: 100dvh;
    min-height: 100vh;
    border-radius: 0;
    border: none;
    box-shadow: none;
  }
  .deal-modal-panel-header {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    min-height: 44px;
  }
  .deal-modal-panel-header .sf-modal-close {
    min-width: 44px;
    min-height: 44px;
  }
  .deal-modal-body {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .deal-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 0.75rem;
    margin-bottom: 1rem;
    scrollbar-width: none;
  }
  .deal-tabs::-webkit-scrollbar {
    display: none;
  }
  .deal-tab {
    flex: 0 0 auto;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .main-footer { margin-top: var(--space-10); padding: var(--space-8) 0 calc(var(--space-8) + env(safe-area-inset-bottom, 0px)); }
  .main-footer .footer-container { grid-template-columns: 1fr; gap: var(--space-6); text-align: center; }
  .main-footer .footer-section ul { padding: 0; }
  .dropdown-menu { right: 0; left: auto; }
  .nav-mobile-panel { top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px)); max-height: calc(100vh - var(--header-height-mobile) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); }
  .nav-mobile-backdrop { top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px)); }
  body.with-sidebar .app-sidebar { top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px)); height: calc(100vh - var(--header-height-mobile) - env(safe-area-inset-top, 0px)); }
  .sidebar-overlay { top: calc(var(--header-height-mobile) + env(safe-area-inset-top, 0px)); }
}

@media (max-width: 480px) {
  .content-wrapper { padding: 0; }
  .page-header h1 { font-size: var(--sf-text-section); }
  .card { padding: var(--space-3); border-radius: var(--radius-md); }
  .sf-modal { border-radius: 0; }
}

/* Compte — pages secondaires (MFA, GDPR, permissions) ; voir users_management.css pour la page principale */
.account-page { width: 100%; margin-bottom: var(--space-8); }
.account-mfa-grid { display: grid; grid-template-columns: minmax(200px, 220px) 1fr; gap: var(--space-4); align-items: center; }
.account-mfa-qr-wrap { display: inline-flex; padding: var(--space-3); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-elevated); }
.account-mfa-qr { display: block; max-width: 100%; height: auto; }
.account-mfa-secret {
  display: inline-block;
  font-size: var(--font-size-sm);
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
}
@media (max-width: 480px) {
  .account-mfa-grid { grid-template-columns: 1fr; }
}

/* Feedback formulaire (transversal) */
.sf-form-feedback {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  color: var(--text-muted);
}
.sf-form-feedback:empty { display: none; }
.sf-form-feedback.is-success { color: var(--success-color); }
.sf-form-feedback.is-error { color: var(--danger-color); }
.sf-form-feedback.is-loading { color: var(--primary-color, #1d4ed8); }
.sf-form-feedback--end { text-align: right; }
@media (max-width: 768px) {
  .sf-form-feedback--end { text-align: left; }
  .page-header :is(.subtitle, .page-subtitle) {
    margin-inline-start: 0;
    margin-left: 0;
    text-align: left;
  }
}

/* Spinner de chargement transversal unifié */
.spinner {
  display: inline-block;
  width: 1.5rem;
  height: 1.5rem;
  border: 2.5px solid var(--border-color, rgba(0, 0, 0, 0.12));
  border-top-color: var(--primary-color, var(--accent-primary, #2563eb));
  border-radius: 50%;
  animation: sf-spin 0.75s linear infinite;
}
.spinner--sm { width: 1rem; height: 1rem; border-width: 2px; }
.spinner--lg { width: 2.5rem; height: 2.5rem; border-width: 3px; }
@keyframes sf-spin { to { transform: rotate(360deg); } }