/* ============================================================
   APP.CSS — MonDevisSimple Espace Connecté
   Design SaaS premium — bleu/blanc — sans Bootstrap
   Shell : client/app_base.html
   Font  : Plus Jakarta Sans (Google Fonts)
   ============================================================ */

/* ====================== RESET ====================== */
*, *::before, *::after { box-sizing: border-box; }
body.app-shell { margin: 0; }
body.app-shell *, body.app-shell *::before, body.app-shell *::after { margin: 0; }
body.app-shell img, body.app-shell svg { display: block; max-width: 100%; }
body.app-shell a { color: inherit; text-decoration: none; }
body.app-shell ul, body.app-shell ol { list-style: none; padding: 0; }
body.app-shell button { font: inherit; cursor: pointer; border: none; background: none; padding: 0; }
body.app-shell input, body.app-shell select, body.app-shell textarea { font: inherit; }
body.app-shell table { border-collapse: collapse; }

/* ====================== DESIGN TOKENS ====================== */
body.app-shell {
  /* Brand */
  --blue:        #1E3FBF;
  --blue-600:    #1E3FBF;
  --blue-700:    #16307D;
  --blue-soft:   #F4F7FC;
  --blue-line:   #E5E9F1;

  /* Navy */
  --navy:        #0F1B33;
  --navy-2:      #0F1B33;

  /* Text hierarchy */
  --ink:         #0F1B33;
  --ink-2:       #0F1B33;
  --ink-soft:    #1E2A44;
  --ink-muted:   #8A93AC;

  /* Surfaces */
  --paper:       #ffffff;
  --soft:        #F4F7FC;
  --soft-2:      #F4F7FC;
  --line:        #E5E9F1;
  --line-2:      #E5E9F1;

  /* Semantic — success */
  --green:       #16a34a;
  --green-soft:  #dcfce7;
  --green-txt:   #15803d;
  --green-line:  #bbf7d0;

  /* Semantic — warning */
  --amber:       #d97706;
  --amber-soft:  #fef3c7;
  --amber-txt:   #b45309;
  --amber-line:  #fde68a;

  /* Semantic — danger */
  --red:         #dc2626;
  --red-soft:    #fee2e2;
  --red-txt:     #b91c1c;
  --red-line:    #fecaca;

  /* Semantic — purple */
  --purple:      #2B54E6;
  --purple-soft: #F4F7FC;
  --purple-txt:  #1E3FBF;

  /* Layout */
  --sidebar-w:      240px;
  --sidebar-w-mini: 64px;
  --topbar-h:       56px;

  /* Radii */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --pill: 999px;

  /* Shadows */
  --sh-xs: 0 1px 3px rgba(15,27,51,.06), 0 1px 2px rgba(15,27,51,.04);
  --sh-sm: 0 4px 12px rgba(15,27,51,.08);
  --sh:    0 8px 24px rgba(15,27,51,.10);
  --sh-lg: 0 20px 44px rgba(15,27,51,.14);

  /* Transition */
  --tr: .18s ease;

  /* Typography */
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  background: var(--soft);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   LAYOUT — CSS GRID (sidebar | main)
   Principe : 2 colonnes fixes — impossible de se superposer.
   Inspiré de la logique admin restaurant.
   ============================================================ */

/* ── Grille principale ── */
.a-layout {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* ── SIDEBAR : sticky dans sa colonne ── */
.a-sidebar {
  grid-column: 1;
  position: sticky;
  top: 0;
  height: 100vh;
  width: var(--sidebar-w);
  background: var(--paper);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: var(--line) transparent;
  transition: width .22s cubic-bezier(.4,0,.2,1);
  flex-shrink: 0;
  z-index: 50;
}

/* ── MAIN : colonne 2 — toujours après la sidebar ── */
.a-main {
  grid-column: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--soft);
}

/* ── TOPBAR : sticky dans la colonne main ── */
.a-topbar {
  position: sticky;
  top: 0;
  height: var(--topbar-h);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 32px;
  gap: 16px;
  z-index: 40;
  flex-shrink: 0;
}

/* ── CONTENT : zone de contenu ── */
.a-content {
  flex: 1;
  padding: 32px 36px;
  min-width: 0;
}

/* ============================================================
   SIDEBAR MINI — mode icônes (desktop)
   ============================================================ */
.a-layout.sidebar-mini {
  grid-template-columns: var(--sidebar-w-mini) 1fr;
}
.a-layout.sidebar-mini .a-sidebar {
  width: var(--sidebar-w-mini);
}

/* Masquer textes en mini */
.a-layout.sidebar-mini .a-brand-text,
.a-layout.sidebar-mini .a-nav-group-label,
.a-layout.sidebar-mini .a-nav-sep,
.a-layout.sidebar-mini .a-trial-bar,
.a-layout.sidebar-mini .a-user-info,
.a-layout.sidebar-mini .a-nav-link > span,
.a-layout.sidebar-mini .a-logout > span { display: none; }

/* Icônes centrées */
.a-layout.sidebar-mini .a-nav { padding: 8px 0; align-items: center; }
.a-layout.sidebar-mini .a-nav-link {
  justify-content: center; padding: 11px 0;
  width: 100%; border-radius: 0;
}
.a-layout.sidebar-mini .a-nav-link svg { width: 20px; height: 20px; opacity: .75; }
.a-layout.sidebar-mini .a-nav-link:hover svg,
.a-layout.sidebar-mini .a-nav-link.is-active svg { opacity: 1; }
.a-layout.sidebar-mini .a-nav-link.is-active { background: var(--blue-soft); }
.a-layout.sidebar-mini .a-nav-link.is-active::before { display: none; }
.a-layout.sidebar-mini .a-brand { justify-content: center; padding: 16px 0 14px; }
.a-layout.sidebar-mini .a-brand img { width: 28px; height: 28px; }
.a-layout.sidebar-mini .a-sidebar-foot { align-items: center; padding: 8px 0; }
.a-layout.sidebar-mini .a-user { justify-content: center; padding: 6px 0; }
.a-layout.sidebar-mini .a-logout {
  justify-content: center; width: 40px; height: 40px; padding: 0;
}
.a-layout.sidebar-mini .a-logout svg { width: 18px; height: 18px; }

/* ============================================================
   SIDEBAR — BRAND
   ============================================================ */
.a-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.a-brand img {
  width: 30px;
  height: 30px;
  object-fit: contain;
  flex-shrink: 0;
}
.a-brand-text {}
.a-brand-name {
  font-size: .88rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.2;
}
.a-brand-badge {
  display: inline-flex;
  align-items: center;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blue-700);
  background: var(--blue-soft);
  border-radius: var(--pill);
  padding: 2px 8px;
  margin-top: 3px;
}

/* ============================================================
   SIDEBAR — NAV
   ============================================================ */
.a-nav {
  flex: 1;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.a-nav-group-label {
  padding: 14px 8px 4px;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  user-select: none;
}
.a-nav-group-label:first-child { padding-top: 6px; }

.a-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-sm);
  font-size: .845rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background var(--tr), color var(--tr);
  position: relative;
  white-space: nowrap;
}
.a-nav-link svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  stroke-width: 1.8;
  opacity: .65;
  transition: opacity var(--tr);
}
.a-nav-link span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.a-nav-link:hover {
  background: var(--soft-2);
  color: var(--ink);
}
.a-nav-link:hover svg { opacity: 1; }

.a-nav-link.is-active {
  background: var(--blue-soft);
  color: var(--blue);
  font-weight: 600;
}
.a-nav-link.is-active svg { opacity: 1; color: var(--blue); }
.a-nav-link.is-active::before {
  content: '';
  position: absolute;
  left: -8px; top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: var(--blue);
  border-radius: 0 3px 3px 0;
}

.a-nav-link.is-pay {
  color: var(--amber-txt);
  background: var(--amber-soft);
}
.a-nav-link.is-pay svg { opacity: 1; color: var(--amber-txt); }
.a-nav-link.is-pay:hover { background: #fde68a; }

.a-nav-sep {
  height: 1px;
  background: var(--line);
  margin: 6px 4px;
}

/* ====================== TRIAL BANNER ====================== */
.a-trial-bar {
  margin: 8px;
  padding: 14px;
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: var(--r);
  flex-shrink: 0;
}
.a-trial-bar-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--blue-700);
  margin-bottom: 3px;
}
.a-trial-bar-sub {
  font-size: .72rem;
  color: var(--blue-600);
  line-height: 1.45;
  margin-bottom: 10px;
}
.a-trial-bar-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 12px;
  background: var(--blue);
  color: #fff;
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 700;
  transition: background var(--tr);
}
.a-trial-bar-cta:hover { background: var(--blue-600); }

/* ====================== SIDEBAR FOOTER ====================== */
.a-sidebar-foot {
  border-top: 1px solid var(--line);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
}
.a-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-radius: var(--r-sm);
}
.a-avatar {
  width: 32px;
  height: 32px;
  border-radius: var(--pill);
  background: var(--blue-soft);
  color: var(--blue);
  font-size: .72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  letter-spacing: .02em;
}
.a-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: .65rem;
}
.a-user-info { min-width: 0; }
.a-user-name {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}
.a-user-status {
  font-size: .67rem;
  color: var(--ink-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a-logout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-soft);
  width: 100%;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.a-logout svg { width: 14px; height: 14px; flex-shrink: 0; }
.a-logout:hover {
  background: var(--red-soft);
  color: var(--red-txt);
  border-color: var(--red-line);
}

/* ============================================================
   TOPBAR
   ============================================================ */
.a-burger {
  display: flex;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  color: var(--ink-soft);
  flex-shrink: 0;
  transition: background var(--tr);
}
.a-burger svg { width: 18px; height: 18px; }
.a-burger:hover { background: var(--soft-2); }

.a-topbar-left { flex: 1; min-width: 0; }
.a-topbar-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a-topbar-sub {
  font-size: .72rem;
  color: var(--ink-muted);
  margin-top: 1px;
}

.a-topbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Lang in topbar */
.a-lang {
  display: flex;
  align-items: center;
  gap: 2px;
}
.a-lang .lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  opacity: .45;
  transition: opacity var(--tr);
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.a-lang .lang-btn:hover { opacity: .8; }
.a-lang .lang-btn.is-active { opacity: 1; }
.a-lang .lang-btn img {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  object-fit: cover;
}

/* Topbar divider */
.a-topbar-div {
  width: 1px;
  height: 20px;
  background: var(--line);
}

/* ============================================================
   MOBILE OVERLAY
   ============================================================ */
.a-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15,27,51,.45);
  z-index: 190;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.a-overlay.is-open { display: block; }

/* ============================================================
   FLASH MESSAGES / ALERTS
   ============================================================ */
.a-alerts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}
.a-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 16px;
  border-radius: var(--r);
  font-size: .875rem;
  line-height: 1.5;
  position: relative;
  border: 1px solid transparent;
}
.a-alert svg:first-child { width: 17px; height: 17px; flex-shrink: 0; margin-top: 2px; }
.a-alert-body { flex: 1; }
.a-alert-close {
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  opacity: .45; cursor: pointer; border-radius: 50%;
  flex-shrink: 0;
  transition: opacity var(--tr);
  margin-top: 1px;
}
.a-alert-close svg { width: 13px; height: 13px; }
.a-alert-close:hover { opacity: 1; }

.a-alert--success { background: var(--green-soft); color: var(--green-txt); border-color: var(--green-line); }
.a-alert--warning { background: var(--amber-soft); color: var(--amber-txt); border-color: var(--amber-line); }
.a-alert--danger  { background: var(--red-soft);   color: var(--red-txt);   border-color: var(--red-line);   }
.a-alert--info    { background: var(--blue-soft);  color: var(--blue-700);  border-color: var(--blue-line);  }

/* ====================== PLAN INACTIVE BANNER ====================== */
.a-plan-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--amber-soft);
  border: 1px solid var(--amber-line);
  border-radius: var(--r);
  margin-bottom: 24px;
}
.a-plan-banner-text strong {
  display: block;
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink-2);
  margin-bottom: 2px;
}
.a-plan-banner-text span {
  font-size: .78rem;
  color: var(--amber-txt);
}

/* ============================================================
   PAGE HEADER
   ============================================================ */
.a-page-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.a-page-head-info h1,
.doc-head-badge h1 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.15;
}
.a-page-head-info p {
  font-size: .855rem;
  color: var(--ink-muted);
  margin-top: 6px;
}
.a-page-head-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.doc-head-badge { display: flex; align-items: center; gap: 10px; }

/* ============================================================
   CARDS
   ============================================================ */
.a-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}
.a-card-body { padding: 20px 24px; }
.a-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
}
.a-card-head-title {
  font-size: .845rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.a-card-head-title svg { width: 16px; height: 16px; color: var(--blue); }
.a-card-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ============================================================
   KPI STATS WIDGETS
   ============================================================ */
.a-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 28px;
}
.a-stat {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 18px 20px;
  box-shadow: var(--sh-xs);
  position: relative;
  overflow: hidden;
}
.a-stat::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.a-stat--blue::after  { background: var(--blue); }
.a-stat--green::after { background: var(--green); }
.a-stat--amber::after { background: var(--amber); }
.a-stat--purple::after { background: var(--purple); }
.a-stat--red::after   { background: var(--red); }

.a-stat-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.a-stat-icon svg { width: 18px; height: 18px; }
.a-stat--blue  .a-stat-icon { background: var(--blue-soft);   color: var(--blue); }
.a-stat--green .a-stat-icon { background: var(--green-soft);  color: var(--green); }
.a-stat--amber .a-stat-icon { background: var(--amber-soft);  color: var(--amber); }
.a-stat--purple .a-stat-icon { background: var(--purple-soft); color: var(--purple); }
.a-stat--red   .a-stat-icon { background: var(--red-soft);    color: var(--red); }

.a-stat-value {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.04em;
  line-height: 1;
  margin-bottom: 5px;
}
.a-stat-label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.a-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 18px;
  border-radius: var(--r-sm);
  font-size: .83rem;
  font-weight: 600;
  line-height: 1;
  transition: background var(--tr), color var(--tr), border-color var(--tr),
              box-shadow var(--tr), transform .12s ease;
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  -webkit-appearance: none;
}
.a-btn svg { width: 15px; height: 15px; flex-shrink: 0; transition: transform .15s ease; }
.a-btn:hover { transform: translateY(-1px); }
.a-btn:active { transform: translateY(0); }

/* Primary */
.a-btn--primary {
  background: var(--blue);
  color: #fff !important;
  border-color: var(--blue);
  box-shadow: 0 4px 12px rgba(43,84,230,.22);
}
.a-btn--primary:hover {
  background: var(--blue-600);
  border-color: var(--blue-600);
  box-shadow: 0 6px 18px rgba(43,84,230,.30);
}

/* Secondary (outlined) */
.a-btn--secondary {
  background: var(--paper);
  color: var(--ink-soft);
  border-color: var(--line);
}
.a-btn--secondary:hover {
  background: var(--soft-2);
  border-color: var(--line-2);
  color: var(--ink);
}

/* Ghost */
.a-btn--ghost {
  background: transparent;
  color: var(--ink-soft);
  border-color: var(--line);
}
.a-btn--ghost:hover { background: var(--soft); color: var(--ink); }

/* Danger */
.a-btn--danger {
  background: var(--red-soft);
  color: var(--red-txt);
  border-color: transparent;
}
.a-btn--danger:hover { background: var(--red); color: #fff; }

/* Sizes */
.a-btn--sm { padding: 6px 12px; font-size: .775rem; }
.a-btn--lg { padding: 12px 24px; font-size: .9rem; }

/* Icon-only button */
.a-ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  color: var(--ink-muted);
  transition: background var(--tr), color var(--tr);
  cursor: pointer;
  flex-shrink: 0;
  border: none;
  background: none;
}
.a-ibtn svg { width: 15px; height: 15px; }
.a-ibtn:hover { background: var(--soft-2); color: var(--ink); }
.a-ibtn--danger:hover { background: var(--red-soft); color: var(--red-txt); }
.a-ibtn--blue:hover { background: var(--blue-soft); color: var(--blue); }

/* ============================================================
   FORMS & INPUTS
   ============================================================ */
.a-form { display: flex; flex-direction: column; gap: 0; }
.a-form-section {
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.a-form-section + .a-form-section {
  border-top: 1px solid var(--line);
}
.a-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.a-form-row--3 {
  grid-template-columns: 1fr 1fr 1fr;
}
.a-form-row--wide {
  grid-template-columns: 2fr 1fr;
}
.a-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.a-field--full { grid-column: 1 / -1; }
.a-label {
  font-size: .775rem;
  font-weight: 600;
  color: var(--ink-2);
  letter-spacing: .005em;
}
.a-label-opt {
  font-weight: 400;
  color: var(--ink-muted);
  font-size: .7rem;
}
.a-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font-size: .875rem;
  line-height: 1.5;
  transition: border-color var(--tr), box-shadow var(--tr);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
}
.a-input::placeholder { color: var(--ink-muted); }
.a-input:hover { border-color: var(--line-2); }
.a-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,84,230,.11);
}
.a-input:disabled {
  background: var(--soft);
  color: var(--ink-muted);
  cursor: not-allowed;
}
textarea.a-input { resize: vertical; min-height: 80px; }
select.a-input {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a96ac' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}
.a-form-hint {
  font-size: .72rem;
  color: var(--ink-muted);
  line-height: 1.45;
}

/* Radio group */
.a-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.a-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: .83rem;
  color: var(--ink-soft);
}
.a-radio-label input[type="radio"] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
}

/* File input */
input[type="file"].a-input { cursor: pointer; }

/* ============================================================
   FILTER BAR
   ============================================================ */
.a-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
}
.a-filter-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  flex: 1;
  min-width: 160px;
}
.a-filter-field label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
}

/* ============================================================
   TABLES
   ============================================================ */
.a-table-wrap { overflow-x: auto; border-radius: 0 0 var(--r-lg) var(--r-lg); }
.a-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .858rem;
}
.a-table thead {
  background: var(--soft);
}
.a-table thead th {
  text-align: left;
  padding: 10px 16px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.a-table thead th.tr { text-align: right; }
.a-table tbody tr {
  border-bottom: 1px solid var(--line);
  transition: background var(--tr);
}
.a-table tbody tr:last-child { border-bottom: none; }
.a-table tbody tr:hover { background: var(--soft-2); }
.a-table td {
  padding: 13px 16px;
  color: var(--ink-soft);
  vertical-align: middle;
}
.a-table td.fw { font-weight: 600; color: var(--ink); }
.a-table td.tr { text-align: right; font-variant-numeric: tabular-nums; }
.a-table td.actions { text-align: right; white-space: nowrap; }
.a-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 3px;
}
.a-table-empty td {
  text-align: center;
  padding: 56px 32px !important;
}
.a-table-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: var(--ink-muted);
}
.a-table-empty-inner svg {
  width: 36px;
  height: 36px;
  opacity: .35;
}
.a-table-empty-inner p { font-size: .875rem; }

/* ============================================================
   STATUS BADGES
   ============================================================ */
.a-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--pill);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  white-space: nowrap;
}
.a-badge::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.a-badge--draft    { background: var(--soft-2);      color: var(--ink-soft); }
.a-badge--sent     { background: var(--blue-soft);   color: var(--blue-700); }
.a-badge--pending  { background: var(--amber-soft);  color: var(--amber-txt); }
.a-badge--paid     { background: var(--green-soft);  color: var(--green-txt); }
.a-badge--accepted { background: var(--green-soft);  color: var(--green-txt); }
.a-badge--refused  { background: var(--red-soft);    color: var(--red-txt); }
.a-badge--expired  { background: var(--red-soft);    color: var(--red-txt); }
.a-badge--unpaid   { background: var(--amber-soft);  color: var(--amber-txt); }
.a-badge--cancelled{ background: var(--soft-2);      color: var(--ink-muted); }
.a-badge--active   { background: var(--green-soft);  color: var(--green-txt); }
.a-badge--trial    { background: var(--purple-soft); color: var(--purple-txt); }

/* French DB status values → badge color aliases */
.a-badge--brouillon                  { background: var(--soft-2);      color: var(--ink-soft); }
.a-badge--envoye, .a-badge--envoyee  { background: var(--blue-soft);   color: var(--blue-700); }
.a-badge--paye,   .a-badge--payee    { background: var(--green-soft);  color: var(--green-txt); }
.a-badge--accepte                    { background: var(--green-soft);  color: var(--green-txt); }
.a-badge--refuse, .a-badge--annule   { background: var(--red-soft);    color: var(--red-txt); }
/* 4-column stat grid */
.a-stats--4 { grid-template-columns: repeat(4, 1fr); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.a-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 32px;
  text-align: center;
}
.a-empty-icon {
  width: 60px;
  height: 60px;
  border-radius: var(--r-lg);
  background: var(--soft-2);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  color: var(--blue);
}
.a-empty-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }
.a-empty h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 8px;
  letter-spacing: -.02em;
}
.a-empty p {
  font-size: .858rem;
  color: var(--ink-muted);
  max-width: 34ch;
  margin: 0 auto 20px;
  line-height: 1.6;
}

/* ============================================================
   SUMMARY TOTALS (devis/factures)
   ============================================================ */
.a-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.a-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  font-size: .875rem;
}
.a-summary-row span { color: var(--ink-soft); }
.a-summary-row strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.a-summary-sep {
  height: 1px;
  background: var(--line);
  margin: 4px 0;
}
.a-summary-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.a-summary-total span {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}
.a-summary-total strong {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

/* ============================================================
   QUOTE / INVOICE LINES TABLE
   ============================================================ */
.a-lines-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.a-lines-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .83rem;
  min-width: 640px;
}
.a-lines-table thead th {
  padding: 8px 10px;
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
  background: var(--soft);
}
.a-lines-table thead th.tr { text-align: right; }
.a-lines-table td {
  padding: 8px 6px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.a-lines-table tbody tr:last-child td { border-bottom: none; }
.a-lines-table td.tr { text-align: right; font-variant-numeric: tabular-nums; }
.a-lines-table td.fw { font-weight: 600; color: var(--ink); }
.a-lines-table .a-input { padding: 7px 9px; font-size: .83rem; }
.a-lines-table td:first-child { padding-left: 14px; }
.a-lines-table td:last-child { padding-right: 14px; }
.a-lines-table thead th:first-child { padding-left: 14px; }
.a-lines-table thead th:last-child { padding-right: 14px; }

/* Price mode radio inside table header */
.a-price-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}
.a-price-mode label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 600;
  color: var(--ink-muted);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
}
.a-price-mode input[type="radio"] { width: 13px; height: 13px; accent-color: var(--blue); }

/* ============================================================
   DETAIL PAGE (quote/invoice detail view)
   ============================================================ */
.a-detail-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 20px;
}
.a-detail-party {}
.a-detail-party-role {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.a-detail-party-role::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.a-detail-party-name {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 5px;
}
.a-detail-party-line {
  font-size: .83rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.a-detail-meta-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 20px;
}
.a-detail-meta-item {}
.a-detail-meta-label {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  margin-bottom: 4px;
}
.a-detail-meta-value {
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
}

/* ============================================================
   RECENT ACTIVITY (dashboard)
   ============================================================ */
.a-activity-list {
  display: flex;
  flex-direction: column;
}
.a-activity-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.a-activity-item:last-child { border-bottom: none; }
.a-activity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--blue-soft);
  border: 2px solid var(--blue-line);
}
.a-activity-doc {
  font-size: .858rem;
  font-weight: 600;
  color: var(--ink);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a-activity-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.a-activity-date {
  font-size: .75rem;
  color: var(--ink-muted);
}
.a-activity-empty {
  text-align: center;
  padding: 32px 16px;
  font-size: .845rem;
  color: var(--ink-muted);
}

/* Dashboard action buttons */
.a-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
  background: var(--soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  border-top: 1px solid var(--line);
}

/* ============================================================
   COMPANY MANAGE
   ============================================================ */
.a-company-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.a-company-card.is-active {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}
.a-company-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
.a-company-sub {
  font-size: .775rem;
  color: var(--ink-muted);
  margin-top: 2px;
}

/* ============================================================
   MOBILE CARDS (alternative to table on mobile)
   ============================================================ */
.a-m-cards { display: none; }

.a-m-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 16px;
  box-shadow: var(--sh-xs);
}
.a-m-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.a-m-card-ref {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
.a-m-card-meta {
  font-size: .78rem;
  color: var(--ink-muted);
  margin-bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.a-m-card-amount {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.a-m-card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.a-m-card-actions .a-btn { flex: 1; min-width: 80px; justify-content: center; font-size: .78rem; }

/* ============================================================
   UTILITY GRID CLASSES
   ============================================================ */
.a-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.a-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.a-mb-lg { margin-bottom: 24px; }
.a-mb-md { margin-bottom: 16px; }
.a-mb-sm { margin-bottom: 12px; }

@media (max-width: 900px) {
  .a-grid-2 { grid-template-columns: 1fr; }
  .a-grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .a-grid-3 { grid-template-columns: 1fr; }
}

/* ============================================================
   RESPONSIVE — MOBILE (≤ 1024px) : drawer overlay
   ============================================================ */
@media (max-width: 1024px) {

  /* Grid : 1 seule colonne — main prend toute la largeur */
  .a-layout,
  .a-layout.sidebar-mini {
    grid-template-columns: 1fr;
  }

  /* Sidebar redevient position:fixed (drawer) */
  .a-sidebar {
    grid-column: 1;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    height: 100vh;
    width: 280px !important;
    transform: translateX(calc(-100% - 2px));
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--sh-lg);
    z-index: 300;
    overflow-y: auto !important;
  }
  .a-sidebar.is-open {
    transform: translateX(0);
  }

  /* Main : colonne 1 (pleine largeur) */
  .a-main {
    grid-column: 1;
  }

  /* Topbar : padding réduit */
  .a-topbar { padding: 0 16px; }

  /* Contenu : padding réduit */
  .a-content { padding: 20px 16px; }

  /* Réafficher les textes en mini (drawer = toujours full sidebar) */
  .a-layout.sidebar-mini .a-brand-text,
  .a-layout.sidebar-mini .a-nav-group-label,
  .a-layout.sidebar-mini .a-nav-sep,
  .a-layout.sidebar-mini .a-trial-bar,
  .a-layout.sidebar-mini .a-user-info,
  .a-layout.sidebar-mini .a-nav-link > span,
  .a-layout.sidebar-mini .a-logout > span { display: revert; }
  .a-layout.sidebar-mini .a-nav { padding: 8px; align-items: stretch; }
  .a-layout.sidebar-mini .a-nav-link {
    justify-content: flex-start; padding: 9px 10px; width: auto; border-radius: var(--r-sm);
  }
  .a-layout.sidebar-mini .a-brand { justify-content: flex-start; padding: 18px 16px 14px; }
  .a-layout.sidebar-mini .a-brand img { width: 30px; height: 30px; }
  .a-layout.sidebar-mini .a-sidebar-foot { align-items: stretch; padding: 10px 8px; }
  .a-layout.sidebar-mini .a-user { justify-content: flex-start; padding: 8px 6px; }
  .a-layout.sidebar-mini .a-logout { justify-content: center; width: auto; height: auto; padding: 8px 10px; }
}

@media (max-width: 768px) {
  .a-content { padding: 20px 16px; }
  .a-stats { grid-template-columns: 1fr 1fr; }
  .a-table-wrap { display: none; }
  .a-m-cards { display: flex; flex-direction: column; gap: 10px; }
  .a-detail-parties { grid-template-columns: 1fr; gap: 16px; }
  .a-form-row { grid-template-columns: 1fr; }
  .a-form-row--3 { grid-template-columns: 1fr; }
  .a-form-row--wide { grid-template-columns: 1fr; }
  .a-page-head { flex-direction: column; align-items: flex-start; }
  .a-page-head-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 480px) {
  .a-content { padding: 16px 12px; }
  .a-stats { grid-template-columns: 1fr; }
  .a-card-body { padding: 16px; }
  .a-topbar { padding: 0 16px; }
}

/* ============================================================
   PREMIUM POLISH — Améliorations visuelles 10/10
   ============================================================ */

/* ── Topbar : mieux ── */
.a-topbar-title { font-size: 1rem; letter-spacing: -.025em; }

/* ── Cards : hover lift + meilleur head ── */
.a-card {
  transition: box-shadow .18s ease;
}
.a-card:hover { box-shadow: var(--sh-sm); }
.a-card-head {
  padding: 16px 24px;
  min-height: 52px;
}
.a-card-head-title {
  font-size: .9rem;
  letter-spacing: -.01em;
}
.a-card-body { padding: 24px; }

.a-stat { padding: 22px 24px; }
.a-stat-value { font-size: 2rem; letter-spacing: -.05em; }
.a-stat-label { font-size: .68rem; letter-spacing: .1em; margin-top: 4px; }

/* ── Tableau : meilleure première colonne ── */
.a-table td:first-child { font-weight: 500; color: var(--ink); }

/* ── Statuts français → badges colorés ── */
.status-brouillon, .translate-status.status-brouillon {
  background: var(--soft-2); color: var(--ink-soft);
}
.status-brouillon::before, .translate-status.status-brouillon::before { background: var(--ink-muted); }

.status-envoye, .translate-status.status-envoye,
.status-envoyee, .translate-status.status-envoyee {
  background: var(--blue-soft); color: var(--blue-700);
}
.status-envoye::before, .translate-status.status-envoye::before,
.status-envoyee::before, .translate-status.status-envoyee::before { background: var(--blue); }

.status-accepte, .translate-status.status-accepte {
  background: var(--green-soft); color: var(--green-txt);
}
.status-accepte::before, .translate-status.status-accepte::before { background: var(--green); }

.status-paye, .translate-status.status-paye,
.status-payee, .translate-status.status-payee {
  background: var(--green-soft); color: var(--green-txt);
}
.status-paye::before, .translate-status.status-paye::before,
.status-payee::before, .translate-status.status-payee::before { background: var(--green); }

.status-refuse, .translate-status.status-refuse,
.status-annule, .translate-status.status-annule {
  background: var(--red-soft); color: var(--red-txt);
}

/* ── Boutons : meilleure qualité ── */
.a-btn {
  padding: 9px 20px;
  border-radius: var(--r-sm);
  letter-spacing: -.01em;
}
.a-btn--primary { box-shadow: 0 2px 8px rgba(43,84,230,.20); }
.a-btn--primary:hover { box-shadow: 0 4px 16px rgba(43,84,230,.32); transform: translateY(-1px); }
.a-btn--sm { padding: 6px 14px; border-radius: var(--r-xs); }
.a-btn--lg { padding: 12px 28px; }

/* ── Inputs : meilleur focus ── */
.a-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,84,230,.12);
  background: var(--paper);
}

/* ── Empty state : plus soigné ── */
.a-empty {
  padding: 72px 40px;
  background: linear-gradient(180deg, var(--soft) 0%, transparent 100%);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.a-empty-icon {
  width: 68px; height: 68px;
  background: var(--blue-soft);
  box-shadow: 0 4px 16px rgba(43,84,230,.1);
}
.a-empty-icon svg { width: 32px; height: 32px; }
.a-empty h3 { font-size: 1.05rem; }

/* ── Topbar company badge ── */
.a-topbar-company {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  background: var(--soft-2);
  border: 1px solid var(--line);
  border-radius: var(--pill);
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-2);
  max-width: 200px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.a-topbar-company svg { width: 13px; height: 13px; color: var(--blue); flex-shrink: 0; }

/* ── Filter bar : plus propre ── */
.a-filter {
  background: var(--paper);
  border-radius: var(--r);
  border: 1px solid var(--line);
  padding: 16px 20px;
  margin-bottom: 20px;
  box-shadow: var(--sh-xs);
}

/* ── Section admin dans sidebar ── */
.a-nav-admin-badge {
  display: inline-flex;
  font-size: .52rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  padding: 2px 6px;
  border-radius: var(--pill);
  margin-left: 4px;
  vertical-align: middle;
}
.a-nav-link.is-admin-link {
  color: var(--red-txt);
  font-weight: 600;
}
.a-nav-link.is-admin-link svg { color: var(--red-txt); }
.a-nav-link.is-admin-link:hover { background: var(--red-soft); }
.a-nav-link.is-admin-link.is-active { background: var(--red-soft); color: var(--red-txt); }

/* ── Activity items (dashboard) ── */
.a-activity-item { padding: 10px 0; }
.a-activity-doc {
  font-size: .875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  transition: color .15s;
}
.a-activity-doc:hover { color: var(--blue); }

/* ── Sidebar company switcher ── */
.a-company-pill {
  margin: 8px;
  padding: 8px 10px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background var(--tr);
  flex-shrink: 0;
}
.a-company-pill:hover { background: var(--soft-2); }
.a-company-pill-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── Page head breadcrumb ── */
.a-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .75rem;
  color: var(--ink-muted);
  margin-bottom: 10px;
}
.a-breadcrumb a { color: var(--ink-muted); text-decoration: none; transition: color .15s; }
.a-breadcrumb a:hover { color: var(--blue); }
.a-breadcrumb svg { width: 12px; height: 12px; color: var(--line-2); }

/* ── Detail section grid ── */
.a-detail-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
@media (max-width: 768px) {
  .a-detail-2col { grid-template-columns: 1fr; }
}

/* ── Lines table extra polish ── */
.a-lines-table thead th { padding: 10px 12px; background: var(--soft); }
.a-lines-table td { padding: 10px 8px; }
.a-lines-table tbody tr:hover td { background: var(--blue-soft); }

/* ── Mobile stats 2 cols sur tablette ── */
@media (max-width: 900px) {
  .a-stats { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
  .a-stats { grid-template-columns: 1fr 1fr; }
  .a-page-head-info h1 { font-size: 1.25rem; }
}

/* ============================================================
   BOOTSTRAP COMPAT — classes utilisées par quote-form.js
   (createLineRow, renderTradeGroups, etc.)
   ============================================================ */
.form-control {
  display: block;
  width: 100%;
  padding: 7px 10px;
  border: 1.5px solid var(--line);
  border-radius: var(--r-xs);
  background: var(--paper);
  color: var(--ink);
  font-size: .83rem;
  font-family: inherit;
  line-height: 1.5;
  transition: border-color var(--tr);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}
.form-control:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,84,230,.1);
}
.text-end { text-align: right; }
.fw-semibold { font-weight: 600; }
.d-inline { display: inline; }

/* Boutons Bootstrap utilisés dans quote-form.js */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-xs);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  white-space: nowrap;
  font-family: inherit;
  text-decoration: none;
}
.btn-sm { padding: 5px 10px; font-size: .75rem; }

/* Trade group buttons (rendered by JS) */
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover { background: var(--blue-600); border-color: var(--blue-600); }

.btn-outline-primary {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue-line);
}
.btn-outline-primary:hover { background: var(--blue-soft); }

.btn-danger {
  background: var(--red-soft);
  color: var(--red-txt);
  border-color: var(--red-line);
}
.btn-danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── Trade shortcuts (chips, items) ── */
.trade-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.trade-group-btn {
  font-size: .78rem;
  padding: 5px 12px;
  border-radius: var(--pill);
}

.trade-subgroups {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.btn-chip {
  padding: 4px 10px;
  font-size: .75rem;
  border-radius: var(--pill);
  background: var(--soft-2);
  color: var(--ink-soft);
  border: 1px solid var(--line);
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
  transition: background var(--tr), color var(--tr);
}
.btn-chip:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); }
.btn-chip.is-active { background: var(--blue); color: #fff; border-color: var(--blue); }

.trade-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.trade-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xs);
  cursor: pointer;
  font-family: inherit;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
}
.trade-item-btn:hover { background: var(--blue-soft); color: var(--blue); border-color: var(--blue-line); }
.trade-item-btn span { pointer-events: none; }

.fav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .8rem;
  color: var(--ink-muted);
  padding: 0 2px;
  line-height: 1;
  transition: color var(--tr);
  font-family: inherit;
}
.fav-toggle:hover { color: var(--amber); }
.fav-toggle.is-active { color: var(--amber); }

.trade-favorites {
  margin-bottom: 8px;
}
.trade-favorites-title {
  font-size: .67rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin-bottom: 5px;
}

/* Shortcut layout wrapper */
.shortcut-layout {
  padding: 12px 0 0;
}

/* ── Remove line button : pointer-events fix pour SVG ── */
.remove-line * { pointer-events: none; }

/* ============================================================
   DOCUMENT FORMS — Premium redesign (devis + facture)
   ============================================================ */

/* ── Layout 2 colonnes ── */
.doc-form-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
.doc-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.doc-sidebar {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Company info card ── */
.doc-company-card {
  margin-top: 10px;
  padding: 12px 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-line);
  border-radius: var(--r-sm);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.doc-company-name {
  font-weight: 700;
  color: var(--ink);
  font-size: .9rem;
  margin-bottom: 2px;
}
.doc-company-meta {
  color: var(--ink-muted);
  line-height: 1.6;
  font-size: .8rem;
}

/* ── Divider ── */
.doc-divider {
  height: 1px;
  background: var(--line);
  margin: 8px 0 16px;
}

/* ── Shortcuts zone ── */
.doc-shortcuts-zone {
  padding: 12px 16px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.doc-shortcuts-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.doc-shortcuts-label {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
  white-space: nowrap;
  flex-shrink: 0;
}
.doc-shortcuts-search {
  flex: 1;
  max-width: 220px;
  padding: 5px 10px !important;
  font-size: .8rem !important;
  min-width: 0;
}

/* ── Lines foot ── */
.doc-lines-foot {
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  border-radius: 0 0 var(--r) var(--r);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Settings body ── */
.doc-settings-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Pro mode toggle ── */
.doc-pro-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--tr);
}
.doc-pro-toggle:has(input:checked) {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}
.doc-pro-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--blue);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.doc-pro-toggle-label {
  font-size: .83rem;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  display: block;
}
.doc-pro-toggle-sub {
  font-size: .75rem;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Summary premium ── */
/* ── Responsive — tablet ── */
@media (max-width: 900px) {
  .doc-form-grid {
    grid-template-columns: 1fr;
  }
  .doc-sidebar {
    position: static;
  }
}

/* ── Responsive — mobile ── */
@media (max-width: 640px) {
  .doc-form-grid {
    gap: 12px;
  }
  .doc-shortcuts-search {
    max-width: 100%;
    width: 100%;
  }
  .doc-company-card {
    font-size: .78rem;
  }
}

/* ============================================================
   PREMIUM THEME — "Document Studio"
   Direction artistique : logiciel professionnel SaaS premium
   Ref : Pennylane · Qonto · Linear · Stripe Dashboard
   ============================================================ */

/* ── Tokens upgrade ── */
body.app-shell {
  --soft:  #F4F7FC;
  --soft-2: #F4F7FC;
  --line:  #E5E9F1;
  --line-2: #E5E9F1;
  --sh-xs: 0 0 0 1px rgba(15,27,51,.05), 0 1px 4px rgba(15,27,51,.06);
  --sh-sm: 0 0 0 1px rgba(15,27,51,.05), 0 4px 16px rgba(15,27,51,.07);
  --sh:    0 0 0 1px rgba(15,27,51,.05), 0 8px 32px rgba(15,27,51,.10);
  --sh-lg: 0 0 0 1px rgba(15,27,51,.05), 0 20px 48px rgba(15,27,51,.14);
}

/* ── SIDEBAR DARK NAVY ── */
.a-sidebar {
  background: #0F1B33;
  border-right: none;
  box-shadow: 1px 0 20px rgba(0,0,0,.22);
}
.a-brand {
  border-bottom: 1px solid rgba(255,255,255,.07);
  padding: 20px 16px 16px;
}
.a-brand-name { color: #fff; }
.a-brand-badge {
  background: rgba(43,84,230,.35);
  color: rgba(255,255,255,.72);
}
.a-nav-group-label {
  color: rgba(255,255,255,.22);
  font-size: .59rem;
}
.a-nav-sep { background: rgba(255,255,255,.07); margin: 6px 10px; }
.a-nav-link {
  color: rgba(255,255,255,.48);
  margin: 1px 4px;
  border-radius: 8px;
}
.a-nav-link svg { opacity: .48; color: rgba(255,255,255,.9); }
.a-nav-link:hover {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
}
.a-nav-link:hover svg { opacity: .85; }
.a-nav-link.is-active {
  background: rgba(43,84,230,.22);
  color: #fff;
  font-weight: 600;
}
.a-nav-link.is-active svg { opacity: 1; color: #C9D9FB; }
.a-nav-link.is-active::before { background: #2B54E6; border-radius: 0 3px 3px 0; }
.a-nav-link.is-pay {
  background: rgba(217,119,6,.15);
  color: #fcd34d;
}
.a-nav-link.is-pay svg { color: #fcd34d; opacity: 1; }
.a-nav-link.is-pay:hover { background: rgba(217,119,6,.25); }
.a-sidebar-foot { border-top: 1px solid rgba(255,255,255,.07); }
.a-user-name { color: rgba(255,255,255,.82); }
.a-user-email { color: rgba(255,255,255,.32); }
.a-avatar { background: rgba(43,84,230,.45); color: #fff; }
.a-logout { color: rgba(255,255,255,.32); }
.a-logout:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.7); }
.a-trial-bar {
  background: rgba(43,84,230,.18);
  border-color: rgba(43,84,230,.25);
}
.a-trial-bar-title { color: rgba(255,255,255,.82); }
.a-trial-bar-sub { color: rgba(255,255,255,.42); }
.a-trial-bar-cta { background: rgba(43,84,230,.65); color: #fff; }
.a-trial-bar-cta:hover { background: var(--blue); }
/* Sidebar mini dark */
.a-layout.sidebar-mini .a-nav-link.is-active { background: rgba(43,84,230,.22); }
.a-layout.sidebar-mini .a-nav-link.is-active::before { display: none; }

/* ── TOPBAR ── */
.a-topbar {
  background: #fff;
  border-bottom: 1px solid rgba(15,27,51,.06);
  box-shadow: 0 1px 0 rgba(15,27,51,.04);
}


/* ── CARDS ── */
.a-card {
  border: none;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(15,27,51,.07), 0 4px 16px rgba(15,27,51,.06);
  overflow: hidden;
}
.a-card:hover {
  box-shadow: 0 0 0 1px rgba(15,27,51,.09), 0 8px 24px rgba(15,27,51,.08);
}
.a-card-head {
  padding: 14px 20px;
  background: linear-gradient(180deg,#F4F7FC 0%,#F4F7FC 100%);
  border-bottom: 1px solid rgba(15,27,51,.07);
  border-radius: 14px 14px 0 0;
}
.a-card-head-title {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-2);
  letter-spacing: -.01em;
  gap: 8px;
}
.a-card-head-title svg { color: var(--blue); width: 15px; height: 15px; }
.a-card-foot {
  background: linear-gradient(180deg,#F4F7FC 0%,#F4F7FC 100%);
  border-top: 1px solid rgba(15,27,51,.07);
}

/* ── BUTTONS ── */
.a-btn {
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: .84rem;
  gap: 7px;
  transition: all .18s cubic-bezier(.4,0,.2,1);
}
.a-btn:hover { transform: translateY(-1px); }
.a-btn:active { transform: translateY(0); transition-duration: .06s; }
.a-btn--primary {
  background: linear-gradient(135deg, #2B54E6 0%, #1E3FBF 100%);
  box-shadow: 0 2px 6px rgba(43,84,230,.32), inset 0 1px 0 rgba(255,255,255,.14);
  border: none;
  color: #fff;
}
.a-btn--primary:hover {
  background: linear-gradient(135deg, #2B54E6 0%, #1E3FBF 100%);
  box-shadow: 0 5px 18px rgba(43,84,230,.42), inset 0 1px 0 rgba(255,255,255,.14);
  color: #fff;
}
.a-btn--secondary {
  background: #fff;
  border: 1.5px solid rgba(15,27,51,.13);
  color: var(--ink-2);
  box-shadow: 0 1px 3px rgba(15,27,51,.06);
}
.a-btn--secondary:hover {
  border-color: var(--blue-line);
  color: var(--blue);
  background: var(--blue-soft);
}
.a-btn--ghost { color: var(--ink-soft); background: transparent; }
.a-btn--ghost:hover { background: rgba(15,27,51,.05); color: var(--ink); }
.a-btn--sm { padding: 6px 14px; font-size: .78rem; border-radius: 7px; }
.a-btn--lg { padding: 11px 28px; font-size: .9rem; border-radius: 10px; }
.a-btn--danger {
  background: var(--red-soft);
  color: var(--red-txt);
  border: 1.5px solid var(--red-line);
}
.a-btn--danger:hover { background: var(--red); color: #fff; border-color: var(--red); }

/* ── INPUTS ── */
.a-input {
  background: #fff;
  border: 1.5px solid #E5E9F1;
  border-radius: 8px;
  height: 38px;
  padding: 0 12px;
  color: var(--ink);
  font-size: .84rem;
  transition: border-color .15s, box-shadow .15s;
}
.a-input:hover { border-color: #E5E9F1; }
.a-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,84,230,.11);
  outline: none;
  background: #fff;
}
.a-input:disabled { background: var(--soft); color: var(--ink-muted); }
textarea.a-input { height: auto; padding: 10px 12px; line-height: 1.5; resize: vertical; }
select.a-input { height: 38px; appearance: auto; padding-right: 8px; }

/* ── LABELS ── */
.a-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-muted);
  margin-bottom: 5px;
  display: block;
}

/* Lines table upgrade */
.a-lines-table thead th {
  background: #F4F7FC;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  border-bottom: 1.5px solid #E5E9F1;
  padding: 10px 10px;
  white-space: nowrap;
}
.a-lines-table tbody tr { transition: background .12s; }
.a-lines-table tbody tr:hover td { background: #F4F7FC; }
.a-lines-table td { border-bottom: 1px solid #F4F7FC; }
.a-lines-table .a-input {
  height: 33px;
  font-size: .82rem;
  border-color: #F4F7FC;
  border-radius: 6px;
  padding: 0 8px;
}
.a-lines-table .a-input:focus { border-color: var(--blue); }

/* Ibtn upgrade */
.a-ibtn { border-radius: 7px; }
.a-ibtn--danger:hover {
  background: var(--red-soft);
  color: var(--red-txt);
  box-shadow: 0 0 0 1px var(--red-line);
}

/* Stats upgrade */
.a-stat {
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(15,27,51,.07), 0 4px 12px rgba(15,27,51,.05);
  border: none;
}
.a-stat-value {
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: -.04em;
}

/* Empty state */
.a-empty {
  background: #F4F7FC;
  border-radius: 14px;
  border: 2px dashed #E5E9F1;
}

/* Filter upgrade */
.a-filter {
  background: #fff;
  border: 1.5px solid #E5E9F1;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(15,27,51,.04);
}

/* ============================================================
   PF — PREMIUM FORM COMPONENTS
   Layout spécialisé devis / factures
   ============================================================ */

/* ── Grid form ── */
.pf-grid {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 20px;
  align-items: start;
}
.pf-main {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}
.pf-panel {
  position: sticky;
  top: calc(var(--topbar-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

/* ── Parties — émetteur | destinataire ── */
.pf-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.pf-party--emitter {
  padding-right: 24px;
  border-right: 1px solid var(--line);
}
.pf-party--client { padding-left: 24px; }
.pf-party-eyebrow {
  font-size: .63rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.pf-party-eyebrow svg { width: 11px; height: 11px; }

/* Company info card */
.pf-company-card {
  margin-top: 10px;
  padding: 10px 12px;
  background: linear-gradient(135deg, #F4F7FC, #F4F7FC);
  border: 1px solid rgba(43,84,230,.12);
  border-left: 3px solid var(--blue-line);
  border-radius: 8px;
  font-size: .79rem;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.pf-company-name {
  font-weight: 700;
  color: var(--ink);
  font-size: .86rem;
}
.pf-company-meta {
  color: var(--ink-muted);
  font-size: .76rem;
  line-height: 1.55;
}

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

/* ── Bibliothèque de prestations (collapsible) ── */
.pf-library {
  border-bottom: 1px solid var(--line);
}
.pf-library-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  cursor: pointer;
  list-style: none;
  font-size: .8rem;
  font-weight: 600;
  color: var(--ink-soft);
  background: #F4F7FC;
  transition: color .15s, background .15s;
  user-select: none;
}
.pf-library-toggle::-webkit-details-marker { display: none; }
.pf-library-toggle:hover { background: #F4F7FC; color: var(--ink); }
.pf-library-toggle-icon {
  width: 24px;
  height: 24px;
  background: var(--blue-soft);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
}
.pf-library-toggle-icon svg { width: 13px; height: 13px; }
.pf-library-title { flex: 1; }
.pf-library-chevron {
  width: 16px;
  height: 16px;
  color: var(--ink-muted);
  transition: transform .22s ease;
  flex-shrink: 0;
}
.pf-library[open] .pf-library-chevron { transform: rotate(180deg); }
.pf-library-body {
  padding: 12px 20px 16px;
  background: #F4F7FC;
  border-top: 1px solid rgba(15,27,51,.05);
}
.pf-library-search-wrap { margin-bottom: 12px; }
.pf-library-search-wrap .a-input {
  height: 34px;
  font-size: .8rem;
  padding: 0 10px;
  border-color: #E5E9F1;
}

/* ── Lines footer ── */
.pf-lines-foot {
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #F4F7FC;
  border-radius: 0 0 14px 14px;
  display: flex;
  align-items: center;
}

/* ── Settings body ── */
.pf-settings {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Pro mode toggle ── */
.pf-pro-toggle {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 13px;
  background: #F4F7FC;
  border: 1.5px solid #E5E9F1;
  border-radius: 9px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.pf-pro-toggle:has(input:checked) {
  border-color: var(--blue-line);
  background: var(--blue-soft);
}
.pf-pro-toggle input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--blue);
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
}
.pf-pro-toggle-title {
  font-size: .82rem;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  display: block;
}
.pf-pro-toggle-sub {
  font-size: .73rem;
  color: var(--ink-muted);
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Summary premium ── */
.pf-summary {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.pf-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .85rem;
}
.pf-summary-row span { color: var(--ink-soft); font-weight: 500; }
.pf-summary-row strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.pf-summary-sep {
  height: 1px;
  background: linear-gradient(to right, transparent, var(--line), transparent);
  margin: 4px 0;
}
.pf-summary-ttc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 4px;
}
.pf-summary-ttc span {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.pf-ttc-amount {
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--blue);
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ── Save actions ── */
.pf-save-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pf-save-actions .a-btn { width: 100%; justify-content: center; }

/* ── Responsive ── */
@media (max-width: 1100px) {
  .pf-grid { grid-template-columns: 1fr 300px; gap: 16px; }
}
@media (max-width: 900px) {
  .pf-grid { grid-template-columns: 1fr; }
  .pf-panel { position: static; }
  .pf-parties { grid-template-columns: 1fr; }
  .pf-party--emitter {
    padding-right: 0;
    border-right: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 20px;
    margin-bottom: 4px;
  }
  .pf-party--client { padding-left: 0; }
}
@media (max-width: 640px) {
  .pf-ttc-amount { font-size: 1.7rem; }
  .pf-library-body { padding: 10px 14px 14px; }
}

/* ============================================================
   DS3 — PREMIUM DOCUMENT STUDIO
   Direction artistique finale : logiciel professionnel devis/factures
   Références : Pennylane · Qonto · Linear · Stripe Dashboard
   ============================================================ */

/* ── Background plus profond ── */
.a-content { background: #F4F7FC; }

/* ds3-* moved to consolidated PHASE 3 block (~line 4590) — old duplicate removed 2026-07-04 */

/* ============================================================
   PREMIUM v3 — Document Studio
   Refonte complète via overrides ciblés — 2026-06-24
   ============================================================ */

/* ── Fond principal ── */
.a-main { background: #F4F7FC; }
.a-content { padding: 28px 32px; }

/* ── SIDEBAR — dark navy ── */
.a-sidebar {
  background: #0F1B33 !important;
  border-right: none !important;
  box-shadow: 1px 0 0 rgba(255,255,255,.04), 6px 0 32px rgba(0,0,0,.22) !important;
}
.a-brand {
  padding: 20px 18px 16px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}
.a-brand-name { color: #ffffff !important; font-size: .92rem !important; }
.a-brand-badge {
  color: rgba(255,255,255,.4) !important;
  background: rgba(255,255,255,.08) !important;
  border: none !important;
}
.a-nav-group-label {
  color: rgba(255,255,255,.22) !important;
  font-size: .58rem !important;
  padding: 16px 10px 5px !important;
}
.a-nav-sep { background: rgba(255,255,255,.06) !important; margin: 6px 8px !important; }
.a-nav-link {
  color: rgba(255,255,255,.5) !important;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: .84rem !important;
  font-weight: 500 !important;
}
.a-nav-link svg { opacity: .5 !important; }
.a-nav-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.9) !important;
}
.a-nav-link:hover svg { opacity: 1 !important; }
.a-nav-link.is-active {
  background: rgba(43,84,230,.22) !important;
  color: #C9D9FB !important;
  font-weight: 600 !important;
}
.a-nav-link.is-active svg { opacity: 1 !important; color: #C9D9FB !important; }
.a-nav-link.is-active::before {
  background: #2B54E6 !important;
  left: 0 !important;
  border-radius: 0 3px 3px 0 !important;
}
.a-nav-link.is-pay {
  color: #fbbf24 !important;
  background: rgba(217,119,6,.18) !important;
}
.a-nav-link.is-pay:hover { background: rgba(217,119,6,.3) !important; }

/* Sidebar footer */
.a-sidebar-foot { border-top: 1px solid rgba(255,255,255,.06) !important; }
.a-avatar {
  background: rgba(255,255,255,.1) !important;
  color: rgba(255,255,255,.8) !important;
}
.a-user-name { color: rgba(255,255,255,.82) !important; font-size: .8rem !important; }
.a-user-status { color: rgba(255,255,255,.3) !important; }
.a-logout {
  color: rgba(255,255,255,.33) !important;
  border-color: rgba(255,255,255,.08) !important;
}
.a-logout:hover {
  background: rgba(220,38,38,.18) !important;
  color: #fca5a5 !important;
  border-color: rgba(220,38,38,.25) !important;
}
.a-trial-bar {
  background: rgba(43,84,230,.16) !important;
  border: 1px solid rgba(43,84,230,.28) !important;
}
.a-trial-bar-title { color: rgba(255,255,255,.82) !important; }
.a-trial-bar-sub { color: rgba(255,255,255,.38) !important; }
.a-trial-bar-cta { background: #1E3FBF !important; color: #fff !important; }

/* Mini sidebar dark */
.a-layout.sidebar-mini .a-nav-link.is-active { background: rgba(43,84,230,.22) !important; }
.a-layout.sidebar-mini .a-nav-link:hover { background: rgba(255,255,255,.07) !important; }
.a-layout.sidebar-mini .a-brand img { opacity: .9; }

/* ── TOPBAR premium ── */
.a-topbar {
  background: #ffffff !important;
  border-bottom: 1px solid #F4F7FC !important;
  box-shadow: 0 1px 0 #F4F7FC, 0 2px 8px rgba(15,27,51,.04) !important;
  height: 58px !important;
  padding: 0 28px !important;
}
.a-topbar-title {
  font-size: .96rem !important;
  font-weight: 700 !important;
  color: #0F1B33 !important;
  letter-spacing: -.02em !important;
}
.a-topbar-company {
  font-size: .71rem !important;
  color: #8A93AC !important;
  font-weight: 500 !important;
}
.a-avatar.a-avatar--sm {
  background: linear-gradient(135deg, #1E3FBF, #2B54E6) !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.a-burger {
  border-color: #F4F7FC !important;
  color: #8A93AC !important;
}
.a-burger:hover { background: #F4F7FC !important; }

/* ── CARDS premium ── */
.a-card {
  background: #ffffff !important;
  border: 1px solid #E5E9F1 !important;
  border-radius: 16px !important;
  box-shadow: 0 1px 3px rgba(15,27,51,.05), 0 4px 20px rgba(15,27,51,.04) !important;
}
.a-card-head {
  padding: 18px 22px 16px !important;
  border-bottom: 1px solid #F4F7FC !important;
}
.a-card-head-title {
  font-size: .83rem !important;
  font-weight: 700 !important;
  color: #0F1B33 !important;
  letter-spacing: -.01em !important;
}
.a-card-body { padding: 22px !important; }
.a-card-foot {
  background: #F4F7FC !important;
  border-top-color: #F4F7FC !important;
}

.a-stat {
  background: #ffffff !important;
  border: 1px solid #E5E9F1 !important;
  border-radius: 16px !important;
  padding: 22px 24px 20px !important;
  box-shadow: 0 1px 3px rgba(15,27,51,.05) !important;
  overflow: hidden !important;
}
/* Supprimer l'ancienne barre top */
.a-stat::after { display: none !important; }
/* Barre gauche premium */
.a-stat::before {
  content: '' !important;
  position: absolute !important;
  left: 0 !important; top: 18% !important; bottom: 18% !important;
  width: 4px !important;
  border-radius: 0 4px 4px 0 !important;
}
.a-stat--blue::before  { background: #1E3FBF !important; }
.a-stat--green::before { background: #16a34a !important; }
.a-stat--amber::before { background: #d97706 !important; }
.a-stat--purple::before { background: #2B54E6 !important; }
.a-stat--red::before   { background: #dc2626 !important; }

.a-stat-icon {
  width: 44px !important; height: 44px !important;
  border-radius: 12px !important;
  margin-bottom: 16px !important;
}
.a-stat-icon svg { width: 20px !important; height: 20px !important; }
.a-stat-value {
  font-size: 2.5rem !important;
  font-weight: 800 !important;
  color: #0F1B33 !important;
  letter-spacing: -.055em !important;
  line-height: 1 !important;
  margin-bottom: 8px !important;
}
.a-stat-label {
  font-size: .69rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: #8A93AC !important;
}

/* ── BOUTONS premium ── */
.a-btn {
  border-radius: 10px !important;
  font-size: .845rem !important;
  font-weight: 600 !important;
  padding: 9px 18px !important;
}
.a-btn--primary {
  background: linear-gradient(135deg, #2B54E6 0%, #1E3FBF 100%) !important;
  border-color: transparent !important;
  box-shadow: 0 2px 8px rgba(43,84,230,.28), 0 1px 2px rgba(43,84,230,.18) !important;
}
.a-btn--primary:hover {
  background: linear-gradient(135deg, #1E3FBF 0%, #1E3FBF 100%) !important;
  box-shadow: 0 4px 16px rgba(43,84,230,.38), 0 2px 4px rgba(43,84,230,.2) !important;
}
.a-btn--secondary {
  background: #ffffff !important;
  color: #1E2A44 !important;
  border-color: #E5E9F1 !important;
  box-shadow: 0 1px 3px rgba(15,27,51,.05) !important;
}
.a-btn--secondary:hover {
  background: #F4F7FC !important;
  border-color: #E5E9F1 !important;
  color: #1E3FBF !important;
}
.a-btn--ghost {
  background: transparent !important;
  color: #55607A !important;
  border-color: #E5E9F1 !important;
}
.a-btn--ghost:hover {
  background: #F4F7FC !important;
  color: #0F1B33 !important;
  border-color: #E5E9F1 !important;
}
.a-btn--sm { padding: 6px 13px !important; font-size: .785rem !important; border-radius: 8px !important; }
.a-btn--lg { padding: 12px 26px !important; font-size: .9rem !important; }


/* ── TABLES premium ── */
.a-table-wrap {
  overflow: hidden !important;
  border-radius: 16px !important;
}
.a-card.a-table-wrap { padding: 0 !important; }
.a-table-actions { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }

/* Icon buttons dans table */
.a-ibtn {
  width: 30px !important; height: 30px !important;
  border-radius: 8px !important;
  border: 1px solid #E5E9F1 !important;
  background: #F4F7FC !important;
  color: #55607A !important;
}
.a-ibtn:hover { background: var(--blue-soft) !important; border-color: var(--blue-line) !important; color: var(--blue) !important; }
.a-ibtn--blue { background: var(--blue-soft) !important; border-color: var(--blue-line) !important; color: var(--blue) !important; }
.a-ibtn--danger { background: var(--red-soft) !important; border-color: var(--red-line) !important; color: var(--red-txt) !important; }
.a-ibtn--danger:hover { background: #fecaca !important; }

/* ── BADGES premium ── */
.a-badge {
  font-size: .62rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  padding: 3px 9px !important;
  border-radius: 999px !important;
}
.a-badge--draft, .a-badge--brouillon { background: #F4F7FC !important; color: #55607A !important; }
.a-badge--active, .a-badge--accepte { background: #dcfce7 !important; color: #15803d !important; }
.a-badge--paid, .a-badge--paye { background: #E5E9F1 !important; color: #1E3FBF !important; }
.a-badge--pending, .a-badge--en-attente { background: #fef3c7 !important; color: #92400e !important; }
.a-badge--cancel, .a-badge--annule { background: #fee2e2 !important; color: #b91c1c !important; }
.a-badge--trial { background: #F4F7FC !important; color: #1E3FBF !important; }
.a-badge--unpaid { background: #fee2e2 !important; color: #b91c1c !important; }
.a-badge--pay { background: #E5E9F1 !important; color: #1E3FBF !important; }

/* ── INPUTS premium ── */
.a-input {
  border: 1.5px solid #E5E9F1 !important;
  border-radius: 9px !important;
  color: #0F1B33 !important;
  background: #ffffff !important;
}
.a-input:hover { border-color: #E5E9F1 !important; }
.a-input:focus {
  border-color: #1E3FBF !important;
  box-shadow: 0 0 0 3px rgba(43,84,230,.12) !important;
}
.a-input::placeholder { color: #C9D9FB !important; }
.a-label {
  font-size: .775rem !important;
  font-weight: 600 !important;
  color: #1E2A44 !important;
}

/* ── ACTIVITY LIST ── */
.a-activity-list { padding: 0 !important; }
.a-activity-item {
  padding: 11px 22px !important;
  border-bottom: 1px solid #F4F7FC !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}
.a-activity-item:last-child { border-bottom: none !important; }
.a-activity-dot {
  width: 8px !important; height: 8px !important;
  background: #E5E9F1 !important;
  border: 2px solid #1E3FBF !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.a-activity-doc { font-weight: 600 !important; color: #0F1B33 !important; font-size: .855rem !important; flex: 1 !important; }
.a-activity-date { font-size: .76rem !important; color: #C9D9FB !important; }
.a-quick-actions {
  padding: 14px 22px !important;
  border-top: 1px solid #F4F7FC !important;
  background: #F4F7FC !important;
  border-radius: 0 0 16px 16px !important;
}
.a-activity-empty {
  padding: 20px 22px !important;
  color: #C9D9FB !important;
  font-size: .845rem !important;
}

/* ── EMPTY STATE ── */
.a-empty { padding: 72px 32px !important; text-align: center !important; }
.a-empty-icon {
  width: 76px !important; height: 76px !important;
  background: #F4F7FC !important;
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 auto 20px !important;
}
.a-empty-icon svg { width: 34px !important; height: 34px !important; color: #1E3FBF !important; }
.a-empty h2 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0F1B33 !important;
  letter-spacing: -.02em !important;
  margin: 0 0 8px !important;
}
.a-empty p {
  font-size: .875rem !important;
  color: #8A93AC !important;
  max-width: 340px !important;
  margin: 0 auto 24px !important;
  line-height: 1.6 !important;
}

/* ── MOBILE CARDS ── */
.a-m-card {
  background: #ffffff !important;
  border: 1px solid #E5E9F1 !important;
  border-radius: 14px !important;
  padding: 16px 18px !important;
  box-shadow: 0 1px 4px rgba(15,27,51,.06) !important;
}
.a-m-card-ref {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: #0F1B33 !important;
  letter-spacing: -.02em !important;
}
.a-m-card-meta { font-size: .76rem !important; color: #8A93AC !important; margin-top: 2px !important; }
.a-m-card-amount {
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  color: #0F1B33 !important;
  letter-spacing: -.04em !important;
  margin: 10px 0 12px !important;
}
.a-m-card-actions { display: flex !important; gap: 8px !important; }
.a-m-cards { display: none; }

/* ── ALERTS ── */
.a-alert {
  border-radius: 12px !important;
  border-width: 1.5px !important;
  font-size: .855rem !important;
}

/* ── DASHBOARD welcome ── */
.pv3-welcome-h1 {
  font-size: 2rem;
  font-weight: 800;
  color: #0F1B33;
  letter-spacing: -.05em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.pv3-welcome-sub {
  font-size: .875rem;
  color: #8A93AC;
  margin: 0;
}
.pv3-welcome-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}
.pv3-welcome-ctas { display: flex; gap: 10px; flex-shrink: 0; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .a-stats { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .a-sidebar {
    position: fixed !important;
    left: 0 !important; top: 0 !important; bottom: 0 !important;
    transform: translateX(-100%) !important;
    z-index: 200 !important;
    transition: transform .22s cubic-bezier(.4,0,.2,1) !important;
  }
  .a-layout.sidebar-open .a-sidebar {
    transform: translateX(0) !important;
    box-shadow: 4px 0 32px rgba(0,0,0,.35) !important;
  }
  .a-content { padding: 20px 16px !important; }
  .a-topbar { padding: 0 16px !important; }
  .a-stats { grid-template-columns: 1fr 1fr !important; }
  .a-stat-value { font-size: 1.9rem !important; }
  .a-grid-2, .a-grid-3 { grid-template-columns: 1fr !important; }
  .a-table-wrap .a-table { display: none !important; }
  .a-m-cards { display: flex !important; flex-direction: column !important; gap: 10px !important; }
  .pv3-welcome-block { flex-direction: column; align-items: flex-start; }
  .pv3-welcome-ctas { width: 100%; }
}

/* =============================================================
   LIB v2 — Bibliothèque prestations premium
   ============================================================= */

/* Category pills — remplace .btn-primary/.btn-outline-primary sur les groupes */
.trade-group-btn {
  border-radius: 20px !important;
  font-size: .73rem !important;
  font-weight: 600 !important;
  padding: 6px 16px !important;
  white-space: nowrap !important;
  letter-spacing: .01em !important;
  line-height: 1 !important;
  transition: all .15s !important;
}
.btn-primary.trade-group-btn {
  background: #0F1B33 !important;
  border-color: #0F1B33 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(26,42,84,.25) !important;
}
.btn-primary.trade-group-btn:hover {
  background: #16307D !important;
  border-color: #16307D !important;
}
.btn-outline-primary.trade-group-btn {
  background: #fff !important;
  border-color: #E5E9F1 !important;
  color: #55607A !important;
  box-shadow: none !important;
}
.btn-outline-primary.trade-group-btn:hover {
  background: var(--blue-soft, #F4F7FC) !important;
  border-color: var(--blue-line, #E5E9F1) !important;
  color: var(--blue, #1E3FBF) !important;
}

/* Subgroup chips */
.btn-chip {
  border-radius: 14px !important;
  font-size: .71rem !important;
  padding: 4px 12px !important;
  font-weight: 500 !important;
  border-width: 1.5px !important;
}
.btn-chip.btn-outline-primary {
  background: #fff !important;
  border-color: #E5E9F1 !important;
  color: #55607A !important;
}
.btn-chip.btn-outline-primary:hover {
  background: var(--blue-soft) !important;
  border-color: var(--blue-line) !important;
  color: var(--blue) !important;
}
.btn-chip.is-active {
  background: var(--blue-soft, #F4F7FC) !important;
  border-color: var(--blue, #1E3FBF) !important;
  color: var(--blue, #1E3FBF) !important;
  font-weight: 600 !important;
}

/* Prestation chips */
.trade-item-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  font-size: .77rem !important;
  font-weight: 500 !important;
  color: #0F1B33 !important;
  background: #fff !important;
  border: 1.5px solid #E5E9F1 !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
}
.trade-item-btn:hover {
  background: var(--blue-soft, #F4F7FC) !important;
  border-color: var(--blue-line, #E5E9F1) !important;
  color: var(--blue, #1E3FBF) !important;
  box-shadow: 0 2px 6px rgba(43,84,230,.1) !important;
}
.trade-item-btn span { pointer-events: none !important; }

/* Fav toggle — invisible par défaut, visible au hover/actif */
.fav-toggle {
  opacity: 0 !important;
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: .6rem !important;
  color: #C9D9FB !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  line-height: 1 !important;
  transition: opacity .1s, color .1s !important;
  font-family: inherit !important;
  flex-shrink: 0 !important;
  margin-left: 3px !important;
}
.trade-item-btn:hover .fav-toggle { opacity: 1 !important; }
.fav-toggle:hover { color: var(--amber, #f59e0b) !important; }
.fav-toggle.is-active {
  opacity: 1 !important;
  color: var(--amber, #f59e0b) !important;
}

/* Layout zones bibliothèque */
.trade-groups {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 14px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid #F4F7FC !important;
}
.trade-subgroups {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
  min-height: 26px !important;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
.trade-items {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  max-height: 170px !important;
  overflow-y: auto !important;
  padding: 2px 0 4px !important;
}
.trade-items::-webkit-scrollbar { width: 4px; }
.trade-items::-webkit-scrollbar-track { background: transparent; }
.trade-items::-webkit-scrollbar-thumb { background: #E5E9F1; border-radius: 2px; }
.trade-favorites { margin-bottom: 12px !important; }
.trade-favorites-title {
  font-size: .59rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .12em !important;
  color: var(--amber, #f59e0b) !important;
  margin-bottom: 7px !important;
}
.trade-favorites .trade-items {
  max-height: none !important;
  margin-bottom: 12px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid #F4F7FC !important;
}

/* Panel bibliothèque (remplace <details>) */
.ds3-library-panel {
  padding: 16px 0 12px;
  border-bottom: 1px solid #F4F7FC;
  margin-bottom: 0;
}
.ds3-library-panel[hidden] { display: none !important; }

/* Barre de recherche avec icône */
.ds3-library-search { position: relative; margin-bottom: 14px; }
.ds3-library-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: #8A93AC;
  pointer-events: none;
  flex-shrink: 0;
}
.ds3-library-search .a-input { padding-left: 32px !important; }

/* Label de section dans la bibliothèque */
.ds3-library-section-label {
  font-size: .59rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #8A93AC;
  margin-bottom: 8px;
}

/* Bouton toggle bibliothèque */
.lib-toggle-btn {
  color: #55607A;
  border-color: #E5E9F1 !important;
  gap: 5px;
}
.lib-toggle-btn:hover { background: #F4F7FC !important; color: #16307D !important; }
.lib-toggle-btn--closed {
  color: var(--blue) !important;
  background: var(--blue-soft) !important;
  border-color: var(--blue-line) !important;
}

/* Table lignes — overrides premium */
.ds3-table thead th {
  background: #F4F7FC !important;
  color: #55607A !important;
  font-size: .61rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  padding: 11px 8px !important;
  border-bottom: 2px solid #E5E9F1 !important;
}
.ds3-table tbody tr.line-item-row td {
  padding: 9px 7px !important;
  vertical-align: middle !important;
  border-bottom-color: #F4F7FC !important;
}
.ds3-table .a-input {
  height: 36px !important;
  background: #F4F7FC !important;
  border-color: transparent !important;
  border-radius: 7px !important;
  font-size: .82rem !important;
  padding: 0 8px !important;
  transition: background .12s, border-color .12s, box-shadow .12s !important;
}
.ds3-table .a-input:hover {
  background: #fff !important;
  border-color: #E5E9F1 !important;
}
.ds3-table .a-input:focus {
  background: #fff !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 2.5px rgba(43,84,230,.1) !important;
}
.ds3-table .line-up-computed {
  color: #8A93AC !important;
  font-size: .79rem !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  padding-right: 12px !important;
  white-space: nowrap !important;
}
.ds3-table .line-total {
  font-weight: 700 !important;
  color: #0F1B33 !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
  font-size: .87rem !important;
  white-space: nowrap !important;
}
.ds3-table .a-ibtn--danger { opacity: .35; transition: opacity .12s; }
.ds3-table .a-ibtn--danger:hover { opacity: 1; }

/* Mobile: table → cards */
@media (max-width: 640px) {
  .ds3-table thead { display: none !important; }
  .ds3-table, .ds3-table tbody { display: block !important; }
  .ds3-table tbody tr.line-item-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    background: #fff !important;
    border: 1px solid #E5E9F1 !important;
    border-radius: 10px !important;
    padding: 12px !important;
    margin-bottom: 8px !important;
  }
  .ds3-table tbody tr.line-item-row td { display: block !important; border: none !important; padding: 2px 0 !important; }
  .ds3-table tbody tr.line-item-row td:first-child { grid-column: 1 / -1 !important; }
  .ds3-table tbody tr.line-item-row td[data-label]::before {
    content: attr(data-label);
    display: block !important;
    font-size: .62rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: .07em !important;
    color: #8A93AC !important;
    margin-bottom: 3px !important;
  }
  .ds3-table tbody tr.line-action-row { display: none !important; }
  .ds3-table .a-input { width: 100% !important; }
  .ds3-table .line-up-computed { text-align: left !important; padding-right: 0 !important; }
  .ds3-table .line-total { text-align: left !important; font-size: .9rem !important; }
  .ds3-table tbody tr.line-item-row td:last-child {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  .ds3-table tbody tr.line-item-row td:last-child .a-ibtn--danger {
    width: 42px !important;
    height: 42px !important;
  }
  .trade-items { max-height: 130px !important; }
  .trade-groups { gap: 5px !important; }
  .ds3-library-panel { padding-top: 12px !important; }
}

/* ── Stripe Payment Card ──────────────────────────────────────────────────── */
.pm-stripe-card {
  background: #fff;
  border: 2px solid #2B54E6;
  border-radius: 20px;
  padding: 28px 28px 24px;
  position: relative;
  box-shadow: 0 4px 24px rgba(99,91,255,.10);
}
.pm-stripe-badge {
  position: absolute;
  top: -13px;
  left: 28px;
  background: linear-gradient(135deg,#2B54E6,#2B54E6);
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 20px;
}
.pm-stripe-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}
.pm-stripe-logo {
  width: 48px;
  height: 40px;
  background: #F4F7FC;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.pm-stripe-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
}
.pm-stripe-sub {
  font-size: .78rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.pm-stripe-methods {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.pm-stripe-method {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--soft);
  border: 1.5px solid transparent;
}
.pm-stripe-method--highlight {
  background: #F4F7FC;
  border-color: #E5E9F1;
}
.pm-method-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #2B54E6;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
.pm-stripe-method--highlight .pm-method-icon {
  color: #2B54E6;
}
.pm-method-name {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 7px;
}
.pm-method-tag {
  font-size: .68rem;
  font-weight: 700;
  background: #F4F7FC;
  color: #2B54E6;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .03em;
}
.pm-method-desc {
  font-size: .78rem;
  color: var(--ink-muted);
  margin-top: 2px;
}
.pm-stripe-btn {
  width: 100%;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg,#2B54E6,#2B54E6);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: opacity .18s, transform .18s, box-shadow .18s;
  box-shadow: 0 4px 14px rgba(99,91,255,.30);
}
.pm-stripe-btn:hover {
  opacity: .93;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(99,91,255,.38);
}
.pm-stripe-btn:active { transform: translateY(0); }
.pm-stripe-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: .75rem;
  color: var(--ink-muted);
  margin-top: 12px;
  margin-bottom: 0;
}

/* Success / pending icons */
.pm-success-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}
.pm-success-icon svg { width: 36px; height: 36px; }
.pm-success-icon--ok { background: #e8fdf0; color: var(--green); }
.pm-success-icon--pending { background: #fff8e6; color: #d97706; }

/* ── Payment page — logos, fees, extras ─────────────────────────────────── */
.pm-logos-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.pm-logo-chip {
  height: 32px;
  padding: 0 8px;
  border-radius: 7px;
  border: 1.5px solid #E5E9F1;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--ink);
}
.pm-logo-chip svg { height: 18px; width: auto; }
.pm-logo-chip--best {
  border-color: #2B54E6;
  background: #F4F7FC;
}
.pm-logo-best {
  font-size: .65rem;
  font-weight: 800;
  color: #2B54E6;
  white-space: nowrap;
}

/* Fees table */
.pm-fees-table {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 18px;
  border-radius: 10px;
  overflow: hidden;
  border: 1.5px solid #E5E9F1;
}
.pm-fees-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: .8rem;
  background: #fafafa;
  border-bottom: 1px solid #F4F7FC;
}
.pm-fees-row:last-child { border-bottom: none; }
.pm-fees-row--best { background: #F4F7FC; }
.pm-fees-method { flex: 1; color: var(--ink); font-weight: 500; }
.pm-fees-cost { color: var(--ink-soft); font-weight: 600; white-space: nowrap; }
.pm-fees-badge {
  font-size: .65rem;
  font-weight: 800;
  background: #2B54E6;
  color: #fff;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}

/* Section label */
.pm-section-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  margin-bottom: 12px;
  margin-top: 4px;
}

/* Free tag */
.pm-free-tag {
  font-size: .68rem;
  font-weight: 800;
  background: #e6faf0;
  color: #1a7a4a;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .02em;
}

/* Paysafecard note */
.pm-paysafe-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 10px;
  font-size: .8rem;
  color: #92400e;
  line-height: 1.5;
}

@media (max-width: 520px) {
  .pm-fees-row { flex-wrap: wrap; gap: 4px; }
  .pm-fees-cost { font-size: .75rem; }
  .pm-logos-row { gap: 5px; }
  .pm-logo-chip { height: 28px; font-size: .68rem; }
}


/* ================================================================
   PREMIUM REFRESH — v1.0 — 2026-06
   Amélioration visuelle sans casser l'existant.
   Toutes les règles sont des overrides ciblés.
   ================================================================ */

/* ── DESIGN TOKENS PREMIUM ── */
body.app-shell {
  --sidebar-bg:        #0F1B33;
  --sidebar-border:    rgba(255,255,255,.055);
  --sidebar-link:      rgba(255,255,255,.58);
  --sidebar-link-hover-bg: rgba(255,255,255,.07);
  --sidebar-active-bg: rgba(43,84,230,.22);
  --sidebar-active-fg: #C9D9FB;
  --sidebar-label:     rgba(255,255,255,.28);
  --sidebar-sep:       rgba(255,255,255,.08);

  /* Blue gradient pour bouton primaire */
  --btn-primary-bg:    linear-gradient(145deg, #2B54E6 0%, #1E3FBF 100%);
  --btn-primary-hover: linear-gradient(145deg, #1E3FBF 0%, #1E3FBF 100%);
  --btn-primary-sh:    0 2px 8px rgba(43,84,230,.35);
  --btn-primary-sh-h:  0 5px 18px rgba(43,84,230,.4);
}

/* ================================================================
   SIDEBAR — DARK PREMIUM
   ================================================================ */
.a-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
}

/* Brand */
.a-brand { border-bottom: 1px solid var(--sidebar-border); }
.a-brand-name { color: #fff; }
.a-brand-badge {
  background: rgba(43,84,230,.28);
  color: #C9D9FB;
  border: 1px solid rgba(43,84,230,.4);
}

/* Nav group labels & separators */
.a-nav-group-label { color: var(--sidebar-label); }
.a-nav-sep { background: var(--sidebar-sep); }

/* Nav links — default */
.a-nav-link {
  color: var(--sidebar-link);
  border-radius: var(--r-sm);
}
.a-nav-link svg { color: var(--sidebar-link); opacity: .8; }
.a-nav-link:hover {
  background: var(--sidebar-link-hover-bg);
  color: #fff;
}
.a-nav-link:hover svg { opacity: 1; color: #fff; }

/* Nav links — active */
.a-nav-link.is-active {
  background: var(--sidebar-active-bg);
  color: var(--sidebar-active-fg);
  font-weight: 600;
}
.a-nav-link.is-active svg { opacity: 1; color: var(--sidebar-active-fg); }
.a-nav-link.is-active::before {
  background: var(--sidebar-active-fg);
  left: 0;
  border-radius: 0 3px 3px 0;
}

/* Nav links — payment warning */
.a-nav-link.is-pay {
  background: rgba(217,119,6,.18);
  color: #fbbf24;
}
.a-nav-link.is-pay svg { color: #fbbf24; opacity: 1; }
.a-nav-link.is-pay:hover { background: rgba(217,119,6,.28); color: #fcd34d; }

/* Trial bar */
.a-trial-bar {
  background: rgba(43,84,230,.14);
  border-color: rgba(43,84,230,.28);
}
.a-trial-bar-title { color: #C9D9FB; }
.a-trial-bar-sub   { color: rgba(144,180,255,.65); }
.a-trial-bar-cta   { background: #1E3FBF; color: #fff; }
.a-trial-bar-cta:hover { background: #1E3FBF; }

/* Sidebar footer */
.a-sidebar-foot { border-top: 1px solid var(--sidebar-border); }
.a-user-name    { color: #fff; }
.a-user-status  { color: rgba(255,255,255,.38); }
.a-avatar {
  background: rgba(43,84,230,.3);
  color: #C9D9FB;
  border: 1px solid rgba(43,84,230,.35);
}
.a-logout {
  color: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.1);
  background: transparent;
}
.a-logout svg { opacity: .7; }
.a-logout:hover {
  background: rgba(220,38,38,.15);
  color: #f87171;
  border-color: rgba(220,38,38,.3);
}
.a-logout:hover svg { opacity: 1; color: #f87171; }

/* Mini mode dark sidebar */
.a-layout.sidebar-mini .a-nav-link.is-active {
  background: var(--sidebar-active-bg);
}
.a-layout.sidebar-mini .a-nav-link.is-active::before { display: none; }
.a-layout.sidebar-mini .a-logout {
  color: rgba(255,255,255,.45);
  border-color: rgba(255,255,255,.1);
}

/* ================================================================
   TOPBAR — GLASSMORPHISM SUBTIL
   ================================================================ */
.a-topbar {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229,233,241,.8);
}
.a-topbar-title {
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: -.025em;
}
.a-topbar-company {
  font-size: .7rem;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.a-topbar-company svg { width: 11px; height: 11px; opacity: .6; }

.a-stat {
  padding: 22px 24px;
  border-radius: var(--r-xl);
  transition: box-shadow .22s ease, transform .22s ease;
  cursor: default;
}
.a-stat:hover {
  box-shadow: var(--sh-sm);
  transform: translateY(-2px);
}
/* Barre colorée plus épaisse */
.a-stat::after { height: 4px; }

.a-stat-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  margin-bottom: 18px;
}
.a-stat-icon svg { width: 20px; height: 20px; }
.a-stat-value {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1;
  margin-bottom: 6px;
}
.a-stat-label {
  font-size: .68rem;
  letter-spacing: .12em;
  font-weight: 700;
}


/* ================================================================
   WELCOME BLOCK — DASHBOARD
   ================================================================ */
.pv3-welcome-block {
  margin-bottom: 32px;
  padding: 28px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
}
.pv3-welcome-h1 {
  font-size: 2.1rem;
  letter-spacing: -.06em;
}
.pv3-welcome-sub { color: var(--ink-muted); font-size: .88rem; margin-top: 4px; }
.pv3-welcome-ctas { gap: 12px; }

/* ================================================================
   BOUTONS — PREMIUM GRADIENT
   ================================================================ */
.a-btn--primary {
  background: var(--btn-primary-bg);
  border-color: transparent;
  box-shadow: var(--btn-primary-sh);
  color: #fff;
}
.a-btn--primary:hover {
  background: var(--btn-primary-hover);
  box-shadow: var(--btn-primary-sh-h);
  transform: translateY(-1px);
  border-color: transparent;
}
.a-btn--primary:active { transform: translateY(0); }
.a-btn--primary:disabled { opacity: .55; transform: none; box-shadow: none; }

.a-btn--secondary {
  border-color: var(--line-2);
  color: var(--ink-soft);
  transition: background var(--tr), border-color var(--tr), color var(--tr), transform .12s ease, box-shadow var(--tr);
}
.a-btn--secondary:hover {
  background: var(--soft-2);
  border-color: var(--line-2);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: var(--sh-xs);
}

.a-btn--ghost:hover { background: var(--soft-2); }

/* ================================================================
   CARDS — PLUS RAFFINÉES
   ================================================================ */
.a-card {
  border-radius: var(--r-xl);
  transition: box-shadow .22s ease;
}
.a-card-head {
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
}
.a-card-head-title {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.a-card-body { padding: 22px 24px; }


/* Action buttons in table */
.a-ibtn {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  transition: background var(--tr), color var(--tr);
}
.a-ibtn:hover { background: var(--soft-2); color: var(--blue); }
.a-ibtn--danger:hover { background: var(--red-soft); color: var(--red); }

/* ================================================================
   ACTIVITY LIST — DASHBOARD
   ================================================================ */
.a-activity-item {
  padding: 11px 0;
  gap: 10px;
}
.a-activity-doc {
  font-size: .855rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
}
.a-activity-doc:hover { color: var(--blue); }
.a-activity-date {
  font-size: .75rem;
  color: var(--ink-muted);
  background: var(--soft);
  padding: 2px 7px;
  border-radius: var(--pill);
}

/* ================================================================
   EMPTY STATE
   ================================================================ */
.a-empty {
  padding: 72px 24px;
  border-radius: var(--r-xl);
  text-align: center;
}
.a-empty-icon {
  width: 60px;
  height: 60px;
  background: var(--soft-2);
  border-radius: 50%;
  border: 1px solid var(--line);
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.a-empty-icon svg { width: 26px; height: 26px; color: var(--ink-muted); }
.a-empty h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: 8px;
}
.a-empty p {
  font-size: .855rem;
  color: var(--ink-muted);
  margin-bottom: 24px;
  max-width: 320px;
  margin-left: auto;
  margin-right: auto;
}

/* ================================================================
   BADGES — PLUS PROPRES
   ================================================================ */
.a-badge {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 9px;
  border-radius: var(--pill);
}
.a-badge::before { display: none; }

/* ================================================================
   FORM FIELDS — PLUS RAFFINÉS
   ================================================================ */
.a-input {
  border-radius: var(--r-sm);
  border: 1.5px solid var(--line);
  color: var(--ink);
  font-size: .87rem;
  transition: border-color var(--tr), box-shadow var(--tr);
  background: var(--paper);
}
.a-input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(43,84,230,.12);
  outline: none;
}
.a-input::placeholder { color: var(--ink-muted); opacity: .8; }
.a-label {
  font-size: .725rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

/* ================================================================
   QUOTE / INVOICE FORM — LAYOUT
   ================================================================ */
.qf-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

/* Summary card */
.a-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: .855rem;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
}
.a-summary-row:last-child { border-bottom: none; }
.a-summary-row strong { color: var(--ink); font-weight: 700; }
.a-summary-sep { height: 1px; background: var(--line-2); margin: 4px 0; }
.a-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 6px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
}

/* Lines table in form */
.a-lines-table thead th {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--ink-muted);
  font-weight: 700;
  padding: 10px 8px;
  background: var(--soft);
}
.a-lines-table tbody td { padding: 8px 8px; }
.a-lines-table tbody tr:hover { background: var(--soft); }

/* Price mode selector in th */
.a-price-mode {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 600;
}
.a-price-mode label { display: flex; align-items: center; gap: 3px; cursor: pointer; }

/* ================================================================
   FILTER / SEARCH BAR
   ================================================================ */
.a-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
  margin-bottom: 20px;
}
.a-filter .a-label { text-transform: uppercase; letter-spacing: .07em; }
.a-filter .a-input { min-width: 180px; }

/* ================================================================
   MOBILE CARDS (a-m-card) — UPGRADÉS
   ================================================================ */
.a-m-card {
  border-radius: var(--r-lg);
  padding: 16px;
  border: 1px solid var(--line);
  background: var(--paper);
  box-shadow: var(--sh-xs);
}
.a-m-card-ref {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
}
.a-m-card-amount {
  font-size: .9rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.03em;
}
.a-m-card-meta {
  margin-top: 8px;
  gap: 6px;
  font-size: .78rem;
  color: var(--ink-muted);
  flex-wrap: wrap;
}
.a-m-card-actions {
  margin-top: 12px;
  gap: 8px;
  flex-wrap: wrap;
}

/* ================================================================
   RESPONSIVE PREMIUM OVERRIDES
   ================================================================ */
@media (max-width: 1100px) {
  .qf-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .pv3-welcome-block {
    padding: 20px 18px;
    flex-direction: column;
    align-items: flex-start;
  }
  .pv3-welcome-h1 { font-size: 1.6rem; }
  .pv3-welcome-ctas { width: 100%; }
  .pv3-welcome-ctas .a-btn { flex: 1; justify-content: center; }
  .a-page-head-info h1 { font-size: 1.3rem; }
  .a-stat { padding: 16px 18px; }
  .a-stat-value { font-size: 1.7rem; }
  .qf-layout { grid-template-columns: 1fr; }
  .doc-bottom-layout { grid-template-columns: 1fr; }
  .doc-head-badge { font-size: .75rem; }
}


/* ================================================================
   PHASE 2 — DETAIL PAGES + FORM POLISH + EXTRA CLASSES
   2026-06-28
   ================================================================ */

/* ── Classe layout bas de page détail (remplace inline grid) ── */
.doc-bottom-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
}

/* ── Header document identité ── */
.doc-head-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.doc-head-badge .a-badge {
  font-size: .75rem;
  padding: 4px 11px;
}
.doc-head-sub {
  margin-top: 6px;
  font-size: .875rem;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.doc-head-sub strong {
  color: var(--ink-soft);
  font-weight: 600;
}
.doc-head-sub .doc-sep {
  opacity: .4;
  font-weight: 300;
}

/* ── Parties bloc (padding dans la card) ── */
.a-detail-parties {
  padding: 24px 24px 0;
  gap: 32px;
}
.a-detail-party-role {
  font-size: .65rem;
  letter-spacing: .12em;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.a-detail-party-role::after { display: none; }

/* ── Meta strip premium ── */
.a-detail-meta-strip {
  padding: 16px 24px;
  margin: 16px 0 0;
  gap: 32px;
  border-top: 1px solid var(--line);
  border-bottom: none;
}
.a-detail-meta-label {
  font-size: .63rem;
  letter-spacing: .12em;
  margin-bottom: 5px;
  font-weight: 800;
}

/* ── Quick actions footer ── */
.a-quick-actions {
  background: transparent;
  border-top: 1px solid var(--line);
  padding: 14px 20px;
}
.a-quick-actions .a-btn { font-size: .82rem; }

/* ── Form row improvements ── */
.a-form-row {
  gap: 16px;
}
.a-field {
  display: flex;
  flex-direction: column;
}
.a-input {
  padding: 10px 13px;
  line-height: 1.5;
}
.a-label {
  margin-bottom: 6px;
}

/* ── Lines table polish ── */
.a-lines-scroll { border-radius: 0 0 var(--r-xl) var(--r-xl); }
.a-lines-table { width: 100%; }
.a-lines-table thead th {
  background: var(--soft);
  font-size: .63rem;
  padding: 11px 8px;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.a-lines-table thead th:first-child { padding-left: 16px; border-radius: 0; }
.a-lines-table td { padding: 10px 8px; vertical-align: middle; }
.a-lines-table td:first-child { padding-left: 16px; }
.a-lines-table tbody tr:hover td { background: var(--soft); }

/* Input dans les lignes de devis */
.a-lines-table .a-input {
  padding: 7px 9px;
  font-size: .84rem;
  min-width: 0;
}

/* ── DS3 invoice form polish ── */
.ds3-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.ds3-doc-eyebrow {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--blue);
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds3-doc-eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  background: var(--blue);
  border-radius: 2px;
}
.ds3-page-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.85rem;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--ink);
  line-height: 1.15;
  margin: 4px 0 2px;
}
.ds3-page-subtitle {
  font-size: .845rem;
  color: var(--ink-muted);
}
.ds3-header-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* DS3 layout */
.ds3-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}
.ds3-doc-col { display: flex; flex-direction: column; gap: 16px; }
.ds3-panel-col { display: flex; flex-direction: column; gap: 16px; position: sticky; top: calc(var(--topbar-h) + 16px); }

/* DS3 sections */
.ds3-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.ds3-section-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.ds3-section-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ds3-section-title svg { width: 15px; height: 15px; color: var(--blue); opacity: .85; }
.ds3-section-body { padding: 20px; }
.ds3-section-foot {
  padding: 12px 20px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

/* DS3 parties */
.ds3-parties {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ds3-party { padding: 20px; }
.ds3-party + .ds3-party { border-left: 1px solid var(--line); }
.ds3-party-eyebrow {
  font-size: .63rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.ds3-party-eyebrow svg { width: 13px; height: 13px; opacity: .7; }
.ds3-company-info { margin-top: 10px; }
.ds3-company-name {
  font-size: .9rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
}
.ds3-company-meta {
  font-size: .8rem;
  color: var(--ink-muted);
  line-height: 1.5;
}

/* DS3 client autocomplete */
.ds3-client-suggestion {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--sh-sm);
  background: var(--paper);
  max-height: 200px;
  overflow-y: auto;
}
.ds3-client-option {
  padding: 10px 14px;
  cursor: pointer;
  font-size: .855rem;
  transition: background var(--tr);
}
.ds3-client-option:hover { background: var(--soft-2); }

/* ── Dashboard welcome upgrade ── */
.pv3-welcome-h1 {
  font-size: 2rem;
}

/* ── Company card premium ── */
.a-company-card {
  padding: 18px 22px;
  border-radius: var(--r-lg);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.a-company-card:hover { box-shadow: var(--sh-sm); border-color: var(--blue-line); }
.a-company-card.is-active { border-color: var(--blue-line); background: var(--blue-soft); }

/* ── Responsive Phase 2 ── */
@media (max-width: 1024px) {
  .ds3-layout { grid-template-columns: 1fr; }
  .ds3-panel-col { position: static; }
}
@media (max-width: 768px) {
  .ds3-parties { grid-template-columns: 1fr; }
  .ds3-party + .ds3-party { border-left: none; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .ds3-page-header { flex-direction: column; align-items: flex-start; }
  .ds3-header-actions { width: 100%; justify-content: flex-end; }
  .ds3-summary-ttc-amount { font-size: 1.75rem; }
  .ds3-meta-bar { flex-direction: column; }
  .ds3-meta-item { border-right: none; border-bottom: 1px solid var(--line); }
  .ds3-meta-item:last-child { border-bottom: none; }
}

/* ================================================================
   PHASE 3 — FORMULAIRES PREMIUM DEVIS + FACTURE
   2026-06-28
   Classes ds3-* manquantes : meta-bar, table, library, summary,
   panel, pro-toggle, trade UI, btn generiques.
   ================================================================ */

/* Fix: ds3-section-head layout (button à droite) */
.ds3-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* ── Bouton primaire large ── */
.a-btn--lg {
  padding: 13px 24px;
  font-size: .925rem;
  min-height: 46px;
}

/* ── DS3 Meta bar (statut / dates / TVA inline) ── */
.ds3-meta-bar {
  display: flex;
  flex-wrap: wrap;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.ds3-meta-item {
  flex: 1;
  min-width: 130px;
  padding: 13px 18px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds3-meta-item:last-child { border-right: none; }
.ds3-meta-label {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted);
}
.ds3-meta-item .a-input {
  border: none;
  background: transparent;
  padding: 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  box-shadow: none;
  height: auto;
}
.ds3-meta-item .a-input:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
  box-shadow: none;
}

/* ── DS3 Table lignes de prestation ── */
.ds3-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.ds3-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .855rem;
}
.ds3-table thead th {
  font-size: .6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  background: var(--soft);
  padding: 11px 10px;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  vertical-align: bottom;
}
.ds3-table thead th:first-child { padding-left: 20px; }
.ds3-table thead th:last-child  { padding-right: 14px; }
.ds3-table tbody td {
  padding: 9px 10px;
  vertical-align: middle;
  border-bottom: 1px solid var(--line);
}
.ds3-table tbody td:first-child { padding-left: 20px; }
.ds3-table tbody td:last-child  { padding-right: 14px; }
.ds3-table tbody tr:last-child td { border-bottom: none; }
.ds3-table tbody tr:hover td { background: rgba(0,0,0,.018); }
.ds3-table .a-input {
  padding: 7px 9px;
  font-size: .84rem;
  min-width: 0;
}
.ds3-table td.line-up-computed,
.ds3-table td.line-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: .84rem;
}
.ds3-table td.line-total { font-weight: 700; color: var(--ink); }
.ds3-table td.line-up-computed { color: var(--ink-muted); }

/* DS3 price mode radio (dans th) */
.ds3-price-mode {
  display: flex;
  gap: 6px;
  margin-top: 4px;
  font-size: .68rem;
  font-weight: 600;
}
.ds3-price-mode label {
  display: flex;
  align-items: center;
  gap: 3px;
  cursor: pointer;
  color: var(--ink-muted);
  font-weight: 600;
}
.ds3-price-mode input { cursor: pointer; }
.ds3-price-mode label:has(input:checked) { color: var(--blue); }

/* DS3 table footer (+ Ajouter) */
.ds3-table-foot {
  padding: 11px 20px;
  border-top: 1px solid var(--line);
  background: var(--soft);
}

/* ── DS3 Bibliothèque de prestations ── */
.ds3-library-wrap {
  border-bottom: 1px solid var(--line);
  background: rgba(248,249,252,.7);
}
.ds3-library-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 20px;
  cursor: pointer;
  user-select: none;
  list-style: none;
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink-soft);
  transition: background var(--tr);
}
.ds3-library-toggle::-webkit-details-marker { display: none; }
.ds3-library-toggle:hover { background: rgba(0,0,0,.02); }
.ds3-library-icon {
  width: 28px;
  height: 28px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ds3-library-icon svg { width: 14px; height: 14px; color: var(--blue); }
.ds3-library-label { flex: 1; }
.ds3-library-count { font-size: .75rem; color: var(--ink-muted); font-weight: 500; }
.ds3-library-chevron {
  width: 15px;
  height: 15px;
  color: var(--ink-muted);
  transition: transform .2s ease;
  flex-shrink: 0;
}
details[open] .ds3-library-chevron { transform: rotate(180deg); }
.ds3-library-body {
  padding: 12px 20px 16px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ds3-library-search .a-input {
  width: 100%;
  background: var(--paper);
}

/* Trade groups / items buttons */
.trade-groups,
.trade-subgroups,
.trade-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.trade-favorites { display: flex; flex-direction: column; gap: 6px; }
.trade-favorites-title {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted);
  margin-bottom: 2px;
}
.trade-recent-highlight {
  background: var(--blue-soft);
  border: 1px solid var(--blue-line);
  border-radius: var(--r-sm);
  padding: 10px 12px;
}
.trade-recent-hint {
  font-size: .78rem;
  color: var(--ink-soft);
  margin: 0 0 6px;
}

/* Boutons génériques utilisés par le JS du catalogue */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 13px;
  border-radius: var(--r-sm);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--tr), color var(--tr), border-color var(--tr);
  background: var(--paper);
  color: var(--ink-soft);
  line-height: 1.2;
}
.btn-sm { padding: 4px 10px; font-size: .78rem; }
.btn-chip {
  padding: 5px 12px;
  font-size: .78rem;
  font-weight: 600;
  border-radius: var(--pill);
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
}
.btn-chip:hover,
.btn-chip.is-active {
  background: rgba(43,84,230,.07);
  border-color: var(--blue);
  color: var(--blue);
}
.btn-primary {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}
.btn-primary:hover { background: #1E3FBF; border-color: #1E3FBF; }
.btn-outline-primary {
  background: transparent;
  color: var(--blue);
  border-color: var(--blue);
}
.btn-outline-primary:hover { background: rgba(43,84,230,.07); }
.btn.trade-group-btn { border-radius: var(--pill); }

/* Trade item chips */
.trade-item-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: var(--pill);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  background: var(--paper);
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
  transition: background var(--tr), border-color var(--tr), color var(--tr);
}
.trade-item-btn:hover {
  background: rgba(43,84,230,.07);
  border-color: var(--blue);
  color: var(--blue);
}

/* Bouton favori étoile */
.fav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-muted);
  font-size: .85rem;
  padding: 0 2px;
  transition: color var(--tr);
  line-height: 1;
  flex-shrink: 0;
}
.fav-toggle:hover,
.fav-toggle.is-active { color: #f59e0b; }

/* ── DS3 Toggle mode professionnel BTP ── */
.ds3-pro-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 0;
  cursor: pointer;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.ds3-pro-toggle input[type="checkbox"] {
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  appearance: none;
  -webkit-appearance: none;
  background: var(--line-2, #E5E9F1);
  border-radius: var(--pill);
  position: relative;
  cursor: pointer;
  transition: background .2s;
  margin-top: 2px;
}
.ds3-pro-toggle input[type="checkbox"]:checked { background: var(--blue); }
.ds3-pro-toggle input[type="checkbox"]::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  top: 3px;
  left: 3px;
  transition: left .18s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.22);
}
.ds3-pro-toggle input[type="checkbox"]:checked::after { left: 19px; }
.ds3-pro-toggle-title {
  font-size: .875rem;
  font-weight: 700;
  color: var(--ink);
  display: block;
}
.ds3-pro-toggle-sub {
  font-size: .775rem;
  color: var(--ink-muted);
  display: block;
  margin-top: 2px;
}
.js-btp-fields:not([hidden]) {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── DS3 Panneau récapitulatif sticky ── */
.ds3-summary {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.ds3-summary-rows {
  padding: 16px 20px 4px;
  display: flex;
  flex-direction: column;
}
.ds3-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  font-size: .855rem;
  border-bottom: 1px solid var(--line);
}
.ds3-summary-row:last-child { border-bottom: none; }
.ds3-summary-row-label { color: var(--ink-soft); }
.ds3-summary-row-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ds3-summary-sep { height: 1px; background: var(--line); margin: 4px 0; }
.ds3-summary-ttc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--soft);
  border-top: 1px solid var(--line);
}
.ds3-summary-ttc-label {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.ds3-summary-ttc-amount {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--ink);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}
.ds3-summary-actions {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── DS3 Panel section (paramètres latéraux) ── */
.ds3-panel-section {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-xs);
  overflow: hidden;
}
.ds3-panel-head {
  padding: 13px 20px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--soft);
}
.ds3-panel-head svg { width: 15px; height: 15px; color: var(--blue); opacity: .8; }
.ds3-panel-body {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Responsive Phase 3 ── */
@media (max-width: 1100px) {
  .ds3-meta-bar { flex-direction: column; }
  .ds3-meta-item { border-right: none; border-bottom: 1px solid var(--line); }
  .ds3-meta-item:last-child { border-bottom: none; }
}
@media (max-width: 768px) {
  .ds3-meta-bar { display: grid; grid-template-columns: 1fr 1fr; flex-direction: unset; }
  .ds3-meta-item { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .ds3-meta-item:nth-child(2n) { border-right: none; }
  .ds3-meta-item:last-child { border-bottom: none; }
  .ds3-table thead th { font-size: .58rem; padding: 9px 6px; }
  .ds3-table tbody td { padding: 8px 6px; }
  .ds3-table .a-input { padding: 5px 6px; font-size: .8rem; }
  .ds3-summary-ttc-amount { font-size: 1.25rem; }
  .ds3-library-body { padding: 10px 14px 14px; }
  .a-btn--lg { padding: 12px 18px; font-size: .875rem; }
}

/* ── Mini résumé sticky mobile (devis/facture) — total toujours visible ── */
.ds3-mobile-total-bar { display: none; }
@media (max-width: 768px) {
  .ds3-layout { padding-bottom: 84px; }
  .ds3-mobile-total-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 85;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 20px rgba(15,27,51,.10);
    padding: 10px 16px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .ds3-mobile-total-item { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
  .ds3-mobile-total-item span {
    font-size: .6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-muted);
    white-space: nowrap;
  }
  .ds3-mobile-total-item strong {
    font-size: .82rem;
    font-weight: 700;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ds3-mobile-total-item--ttc strong { font-size: 1.05rem; color: var(--blue-600); }
}
@media (max-width: 380px) {
  .ds3-mobile-total-item--ht, .ds3-mobile-total-item--tva { display: none; }
}

/* ============================================================
   PHASE 5 — Clients & Paramètres entreprise
   ============================================================ */

/* Avatar initial client */
.cl-name-cell { display: flex; align-items: center; gap: 10px; }
.cl-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  font-size: .78rem; font-weight: 800; letter-spacing: 0;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; text-transform: uppercase;
}
/* Gros avatar pour page détail client */
.cl-head-wrap { display: flex; align-items: flex-start; gap: 14px; }
.cl-head-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--blue-soft); color: var(--blue);
  font-size: 1.1rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.cl-head-text { display: flex; flex-direction: column; gap: 2px; }

/* Stat strip sous le titre */
.cl-stat-strip { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 6px; }
.cl-stat { font-size: .8rem; color: var(--ink-muted); display: flex; align-items: center; gap: 5px; }
.cl-stat svg { width: 13px; height: 13px; }
.cl-stat strong { color: var(--ink); font-weight: 700; }

/* Empty state premium clients */
.cl-empty {
  text-align: center; padding: 52px 24px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.cl-empty-ico {
  width: 48px; height: 48px; border-radius: 50%;
  background: var(--blue-soft);
  display: flex; align-items: center; justify-content: center; margin-bottom: 4px;
}
.cl-empty-ico svg { width: 22px; height: 22px; color: var(--blue); }
.cl-empty h3 { font-size: 1.02rem; font-weight: 700; color: var(--ink); margin: 0; }
.cl-empty p { font-size: .88rem; color: var(--ink-muted); margin: 0; max-width: 30ch; }

/* Sections dans les cards entreprise */
.co-section-sep { border: none; border-top: 1px solid var(--line); margin: 0; }
.co-section-label {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 20px 10px;
  font-size: .66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .1em; color: var(--blue-600);
}
.co-section-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.co-section-fields { padding: 0 20px 20px; display: flex; flex-direction: column; gap: 12px; }

/* Logo upload box */
.co-logo-box {
  border: 1.5px dashed var(--line); border-radius: 12px;
  padding: 16px 18px; background: var(--soft);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.co-logo-img {
  width: 56px; height: 56px; object-fit: contain; border-radius: 8px;
  background: #fff; border: 1px solid var(--line); flex-shrink: 0;
}
.co-logo-hint { font-size: .82rem; color: var(--ink-muted); line-height: 1.55; flex: 1; min-width: 160px; }
.co-logo-hint strong { color: var(--ink); display: block; margin-bottom: 2px; }

/* Company manage — bouton activer pill */
.co-active-badge {
  font-size: .72rem; font-weight: 700;
  background: var(--green-soft); color: var(--green-txt);
  padding: 3px 10px; border-radius: var(--pill);
}
.co-section-actions { padding: 16px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 768px) {
  .cl-head-wrap { gap: 10px; }
  .cl-stat-strip { gap: 12px; }
  .co-section-fields .a-form-row { flex-direction: column; }
}

/* ── PHASE 6 — Devis / Factures lists & detail polish ── */

/* Responsive doc grids (quotes/detail.html) */
.q-doc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.q-doc-grid--amount { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }

.a-filter-bar .a-filter-field:first-child { flex: 1; min-width: 160px; }
.a-filter-bar .a-filter-actions { display: flex; gap: 8px; align-self: flex-end; }

.a-stat-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted); margin-bottom: 6px; }
.a-stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1; }
.a-stat--blue .a-stat-value { color: var(--blue); }
.a-stat--amber .a-stat-value { color: #d97706; }
.a-stat--green .a-stat-value { color: var(--green-txt); }
.a-stat--purple .a-stat-value { color: var(--purple,#2B54E6); }
.a-stat--red .a-stat-value { color: var(--red); }

/* Premium empty state */
.a-empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 64px 24px; text-align: center; }
.a-empty-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-soft); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }
.a-empty-icon svg { width: 24px; height: 24px; color: var(--blue); }
.a-empty h2, .a-empty h3 { font-size: 1.05rem; font-weight: 700; color: var(--ink); margin: 0; }
.a-empty p { font-size: .88rem; color: var(--ink-muted); margin: 0; max-width: 34ch; line-height: 1.55; }

/* doc-head-sub already in ds3 but ensure consistent */
.doc-head-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: .84rem; color: var(--ink-muted); margin-top: 4px; }
.doc-sep { color: var(--line); }

@media (max-width: 700px) {
  .q-doc-grid, .q-doc-grid--amount { grid-template-columns: 1fr; }
  .a-filter-bar { gap: 10px; }
  .a-stat { min-width: calc(50% - 5px); }
  .a-empty { padding: 40px 16px; }
}

/* ══════════════════════════════════════════════════════
   PHASE 10 — VISUAL PREMIUM UPGRADE
   Dashboard · Company cards · Tables · Mobile cards
══════════════════════════════════════════════════════ */

/* ── Dashboard welcome block — dark premium ── */
.pv3-welcome-block {
  background: linear-gradient(135deg, #0F1B33 0%, #0F1B33 100%);
  border-radius: 16px;
  padding: 28px 32px;
  margin-bottom: 28px;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.pv3-welcome-block::before {
  content: '';
  position: absolute;
  top: -60px; right: -40px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(43,84,230,.22) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.pv3-welcome-block::after {
  content: '';
  position: absolute;
  bottom: -50px; left: 20%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}
.pv3-welcome-h1 {
  font-size: clamp(1.5rem, 3.5vw, 2rem) !important;
  font-weight: 800 !important;
  color: #fff !important;
  letter-spacing: -.04em !important;
  line-height: 1.1 !important;
  margin: 0 0 6px !important;
}
.pv3-welcome-sub {
  font-size: .875rem !important;
  color: rgba(255,255,255,.6) !important;
  margin: 0 !important;
}
.pv3-welcome-ctas { display: flex; gap: 10px; flex-shrink: 0; position: relative; z-index: 1; }
.pv3-welcome-ctas .a-btn--primary {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.3) !important;
  box-shadow: none !important;
}
.pv3-welcome-ctas .a-btn--primary:hover {
  background: rgba(255,255,255,.26) !important;
  border-color: rgba(255,255,255,.5) !important;
  transform: translateY(-1px) !important;
  box-shadow: none !important;
}
.pv3-welcome-ctas .a-btn--secondary {
  background: rgba(255,255,255,.07) !important;
  color: rgba(255,255,255,.82) !important;
  border-color: rgba(255,255,255,.18) !important;
}
.pv3-welcome-ctas .a-btn--secondary:hover {
  background: rgba(255,255,255,.15) !important;
  color: #fff !important;
}
@media (max-width: 640px) {
  .pv3-welcome-block { padding: 22px 20px; }
  .pv3-welcome-ctas { width: 100%; }
  .pv3-welcome-ctas .a-btn { flex: 1; justify-content: center; }
}

/* ── Activity list — lignes plus riches ── */
.a-activity-list { padding: 0 !important; }
.a-activity-item {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 20px !important;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.a-activity-item:last-child { border-bottom: none; }
.a-activity-item:hover { background: var(--soft); }
.a-activity-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--blue);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px var(--blue-soft);
}
.a-activity-doc {
  flex: 1;
  font-size: .875rem;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.a-activity-doc:hover { color: var(--blue); }
.a-activity-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.a-activity-date { font-size: .72rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.a-activity-empty { padding: 24px 20px; font-size: .875rem; color: var(--ink-muted); text-align: center; }
.a-quick-actions {
  padding: 14px 20px;
  border-top: 1px solid var(--line);
  background: var(--soft);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

/* ── Company cards grid ── */
.co-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(272px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.co-card {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 20px;
  position: relative;
  transition: box-shadow .18s, border-color .18s;
  overflow: hidden;
}
.co-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.07); border-color: var(--blue-line); }
.co-card.is-active { border-color: var(--blue); background: var(--blue-soft); }
.co-card.is-active::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--blue);
  border-radius: 14px 14px 0 0;
}
.co-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.co-card-avatar {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; font-weight: 800;
  flex-shrink: 0; letter-spacing: 0;
}
.co-card.is-active .co-card-avatar { background: var(--blue-700, #1E3FBF); }
.co-card-name { font-size: .95rem; font-weight: 700; color: var(--ink); margin-bottom: 3px; line-height: 1.2; }
.co-card-info {
  display: flex; flex-direction: column; gap: 3px;
  font-size: .8rem; color: var(--ink-muted);
  margin-bottom: 16px; min-height: 34px;
  line-height: 1.6;
}
.co-card-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.co-card.is-active .co-card-actions { border-top-color: var(--blue-line); }
@media (max-width: 480px) { .co-cards-grid { grid-template-columns: 1fr; } }

/* ── Table rows — alignement vertical ── */
.a-table td { vertical-align: middle !important; }

/* ── Icon buttons — boutons actions table ── */
.a-ibtn {
  display: inline-flex !important;
  align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .14s, border-color .14s, color .14s, transform .1s;
}
.a-ibtn svg { width: 14px; height: 14px; }
.a-ibtn:hover {
  background: var(--soft);
  border-color: var(--ink-muted);
  color: var(--ink);
  transform: translateY(-1px);
}
.a-ibtn--blue { border-color: var(--blue-line); color: var(--blue); background: var(--blue-soft); }
.a-ibtn--blue:hover { background: var(--blue); color: #fff; border-color: var(--blue); }
.a-ibtn--danger:hover { background: var(--red-soft); border-color: #fca5a5; color: var(--red); }
.a-table-actions { display: flex; gap: 5px; justify-content: flex-end; }

/* ── Mobile cards — plus riches ── */
.a-m-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
  box-shadow: var(--sh-xs);
}
.a-m-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.a-m-card-ref { font-size: .9rem; font-weight: 700; color: var(--ink); text-decoration: none; }
a.a-m-card-ref:hover { color: var(--blue); }
.a-m-card-meta { font-size: .8rem; color: var(--ink-muted); margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.a-m-card-amount { font-size: 1.2rem; font-weight: 800; color: var(--ink); letter-spacing: -.03em; margin-bottom: 12px; }
.a-m-card-actions { display: flex; gap: 8px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }

/* ================================================================
   PREMIUM REFRESH — 2026-07-04
   Refonte design espace client (pilote : Dashboard).
   Stratégie : redéfinir les tokens existants (mêmes noms de
   variables, nouvelles valeurs) pour que tout le fichier hérite
   du nouveau look automatiquement, + overrides ciblés pour les
   quelques hex codés en dur trouvés dans les patches précédents.
   Palette : fond papier chaud, encre bleu-nuit, accent unique
   indigo profond + or (remplace le bleu/violet générique).
   ================================================================ */
body.app-shell {
  /* Accent principal — indigo profond (remplace le bleu générique) */
  --blue:        #16307D;
  --blue-600:    #0F1B33;
  --blue-700:    #0F1B33;
  --blue-soft:   #F4F7FC;
  --blue-line:   #E5E9F1;

  /* Encre */
  --navy:        #0F1B33;
  --navy-2:      #0F1B33;
  --ink:         #0F1B33;
  --ink-2:       #0F1B33;
  --ink-soft:    #1E2A44;
  --ink-muted:   #8A93AC;

  /* Surfaces — papier chaud au lieu de gris bleuté */
  --paper:       #ffffff;
  --soft:        #f7f6f2;
  --soft-2:      #efede7;
  --line:        #e9e7e1;
  --line-2:      #ddd9d1;

  /* Succès */
  --green:       #1f8a5f;
  --green-soft:  #e1f3ea;
  --green-txt:   #16714c;
  --green-line:  #c7e6d6;

  /* Attention */
  --amber:       #b4740e;
  --amber-soft:  #fbf0dc;
  --amber-txt:   #96600b;
  --amber-line:  #f0dcae;

  /* Danger */
  --red:         #c13a2e;
  --red-soft:    #fbe7e4;
  --red-txt:     #a02e24;
  --red-line:    #f0c9c4;

  /* Essai/Premium — or (remplace le violet générique) */
  --purple:      #a9790a;
  --purple-soft: #f6edd6;
  --purple-txt:  #8c650a;

  /* Ombres — plus douces, plus premium */
  --sh-xs: 0 1px 2px rgba(20,22,31,.05), 0 1px 1px rgba(20,22,31,.03);
  --sh-sm: 0 6px 16px rgba(20,22,31,.07);
  --sh:    0 14px 32px rgba(20,22,31,.10);
  --sh-lg: 0 26px 60px rgba(20,22,31,.15);

  /* Sidebar sombre premium */
  --sidebar-bg:            #0F1B33;
  --sidebar-border:        rgba(255,255,255,.06);
  --sidebar-link:          rgba(238,240,246,.68);
  --sidebar-link-hover-bg: rgba(255,255,255,.06);
  --sidebar-active-bg:     rgba(169,121,10,.16);
  --sidebar-active-fg:     #f0d590;
  --sidebar-label:         rgba(255,255,255,.3);
  --sidebar-sep:           rgba(255,255,255,.08);

  /* Bouton primaire — dégradé indigo */
  --btn-primary-bg:    linear-gradient(145deg, #16307D 0%, #0F1B33 100%);
  --btn-primary-hover: linear-gradient(145deg, #16307D 0%, #0F1B33 100%);
  --btn-primary-sh:    0 10px 22px rgba(34,52,107,.28);
  --btn-primary-sh-h:  0 14px 30px rgba(34,52,107,.36);

  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Nav active : liseré doré au lieu du bleu générique */
.a-nav-link.is-active::before { background: var(--sidebar-active-fg) !important; }
.a-nav-link.is-active svg { color: var(--sidebar-active-fg) !important; }
.a-avatar { background: var(--purple) !important; color: #241a00 !important; }

/* Typographie display — Fraunces pour les gros chiffres/titres */
.pv3-welcome-h1, .a-stat-value {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  letter-spacing: -.015em !important;
}
.a-stat-value { white-space: nowrap; }

/* Cards : profondeur premium au survol */
.a-card { transition: box-shadow .2s ease, transform .2s ease; }
.a-card:hover { box-shadow: var(--sh-sm) !important; }
.a-stat { transition: box-shadow .2s ease, transform .2s ease; }
.a-stat:hover { transform: translateY(-2px); box-shadow: var(--sh-sm) !important; }

/* ── Overrides ciblés : hex codés en dur détectés dans les patches précédents ── */
.a-trial-bar-cta { background: var(--blue) !important; color: #fff !important; }
.a-trial-bar-cta:hover { background: var(--blue-600) !important; }
.a-avatar.a-avatar--sm { background: linear-gradient(135deg, var(--blue), var(--blue-600)) !important; color: #fff !important; }
.a-stat--blue::before  { background: var(--blue) !important; }
.a-stat--purple::before { background: var(--purple) !important; }
.a-btn--secondary:hover { color: var(--blue) !important; border-color: var(--blue-line) !important; }
.a-input:focus { border-color: var(--blue) !important; box-shadow: 0 0 0 3px var(--blue-soft) !important; }
.a-activity-dot { background: var(--blue-soft) !important; border-color: var(--blue) !important; }
.a-empty-icon svg { color: var(--blue) !important; }
.a-empty-icon { background: var(--blue-soft) !important; }

/* ================================================================
   ESPACE CLIENT — REFONTE SANS DASHBOARD (2026-07-04)
   Remplace la sidebar lourde par une nav horizontale légère.
   Remplace la page "Tableau de bord" par un hub d'accès premium.
   ================================================================ */

body.app-shell.app-shell--flat {
  background: var(--paper);
}

/* ── Top nav ── */
.a-topnav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.a-topnav-inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  height: 66px;
}
.a-topnav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  color: var(--ink);
  font-size: .95rem;
  letter-spacing: -.01em;
  flex-shrink: 0;
}
.a-topnav-brand img { width: 32px; height: 32px; border-radius: 8px; }
.a-topnav-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 20px;
  flex: 1;
  min-width: 0;
}
.a-topnav-link {
  padding: 8px 14px;
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.a-topnav-link:hover { background: var(--soft); color: var(--ink); }
.a-topnav-link.is-active { background: var(--blue-soft); color: var(--blue); }
.a-topnav-right { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; }
.a-topnav-burger {
  display: none;
  width: 38px; height: 38px;
  border-radius: 9px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  align-items: center;
  justify-content: center;
}
.a-topnav-burger:hover { background: var(--soft); }

/* ── Mobile nav panel ── */
.a-mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--paper);
}
.a-mobile-nav.is-open { display: flex; }
.a-mobile-nav-link { padding: 12px 10px; border-radius: 8px; font-weight: 600; color: var(--ink-soft); font-size: .92rem; }
.a-mobile-nav-link:hover { background: var(--soft); }
.a-mobile-nav-link.is-active { color: var(--blue); background: var(--blue-soft); }
.a-mobile-nav-link.is-pay { color: var(--amber-txt); }

@media (max-width: 900px) {
  .a-topnav-links { display: none; }
  .a-topnav-burger { display: inline-flex; }
}
@media (max-width: 560px) {
  .a-topnav-cta span { display: none; }
}

/* ── Account dropdown ── */
.a-account { position: relative; }
.a-account-toggle { border: none; }
.a-account-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 240px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--sh-lg);
  padding: 8px;
  display: none;
  z-index: 70;
}
.a-account.is-open .a-account-menu { display: block; }
.a-account-menu-head { padding: 10px 12px 12px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.a-account-menu-name { font-weight: 700; color: var(--ink); font-size: .88rem; }
.a-account-menu-status { font-size: .75rem; color: var(--ink-muted); margin-top: 2px; }
.a-account-menu-label { font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted); padding: 6px 12px 4px; }
.a-account-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border-radius: 7px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.a-account-menu-item:hover { background: var(--soft); color: var(--ink); }
.a-account-menu-item--danger:hover { background: var(--red-soft); color: var(--red-txt); }
.a-account-menu-sep { height: 1px; background: var(--line); margin: 6px 0; }

/* ── Fix centrage robuste ──
   Cause racine identifiée : `body.app-shell *' (ligne ~11) a une specificite
   (0,1,1) [class + element] qui bat un simple `.a-topnav-inner' (0,1,0),
   donc son `margin:0' gagnait quel que soit l'ordre dans le fichier.
   Fix : !important sur les marges de centrage. ── */
html { width: 100%; }
body.app-shell.app-shell--flat { width: 100%; display: block; }
.a-topnav-inner {
  width: min(1180px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}

/* ── Content ── */
.a-content--flat {
  width: min(1100px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 36px 24px 64px !important;
  box-sizing: border-box !important;
  max-width: none !important;
}

/* ── Lien Administration — distinct dans la nav ── */
.a-topnav-link--admin {
  color: var(--red-txt);
  background: var(--red-soft);
}
.a-topnav-link--admin:hover { background: var(--red-soft); color: var(--red-txt); filter: brightness(.96); }
.a-topnav-link--admin.is-active { background: var(--red-soft); color: var(--red-txt); }
.a-mobile-nav-link--admin { color: var(--red-txt); }
.a-page-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  color: var(--ink);
  letter-spacing: -.015em;
  margin-bottom: 22px;
}

/* ── Hub hero ── */
.hub-hero { padding: 12px 0 40px; }
.hub-hero-eyebrow { font-size: .85rem; font-weight: 700; color: var(--ink-muted); margin-bottom: 10px; }
.hub-hero-title {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin-bottom: 14px;
}
.hub-hero-title em { font-style: normal; color: var(--blue); }
.hub-hero-sub { font-size: 1rem; color: var(--ink-soft); margin-bottom: 28px; max-width: 520px; }
.hub-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hub-hero-help { font-size: .84rem; color: var(--ink-muted); margin-top: 12px; }

/* ── Hub grid ── */
.hub-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 8px 0 32px; }
@media (max-width: 900px) { .hub-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .hub-grid { grid-template-columns: 1fr; } }

.hub-card {
  position: relative;
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  box-shadow: var(--sh-xs);
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
  text-decoration: none;
}
.hub-card:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); border-color: var(--blue-line); }
.hub-card-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.hub-card-icon svg { width: 20px; height: 20px; }
.hub-card-title { font-weight: 700; font-size: 1.02rem; color: var(--ink); margin-bottom: 4px; }
.hub-card-sub { font-size: .86rem; color: var(--ink-muted); margin-bottom: 14px; }
.hub-card-recent { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; }
.hub-card-recent-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--ink-soft);
  padding: 7px 0;
  border-top: 1px solid var(--line);
}
.hub-card-arrow {
  position: absolute;
  top: 24px;
  right: 22px;
  color: var(--ink-muted);
  font-size: 1.1rem;
  transition: transform .2s ease, color .2s ease;
}
.hub-card:hover .hub-card-arrow { transform: translateX(3px); color: var(--blue); }

/* ── Hub help ── */
.hub-help {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  padding: 22px 26px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  margin-top: 8px;
}
.hub-help-title { font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.hub-help-sub { font-size: .85rem; color: var(--ink-muted); }
.hub-help-ctas { display: flex; gap: 10px; }

/* ================================================================
   PAGES LISTE (Devis / Factures / Clients / Historique...) — PREMIUM
   Consolidation finale : le fichier contient de nombreuses regles
   dupliquees avec !important au fil des patches precedents ; ce
   bloc, place en dernier et lui-meme en !important, garantit un
   rendu premium coherent partout ou ces classes sont reutilisees.
   ================================================================ */


/* ── Barre de filtres ── */
.a-filter-bar {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 14px !important;
  align-items: flex-end !important;
  margin-bottom: 24px !important;
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  box-shadow: var(--sh-xs) !important;
}
.a-filter-field label,
.a-filter-bar .a-label {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  color: var(--ink-muted) !important;
}
.a-input {
  border: 1px solid var(--line-2) !important;
  border-radius: var(--r-sm) !important;
  padding: 10px 14px !important;
  font-size: .875rem !important;
  color: var(--ink) !important;
  background: var(--paper) !important;
  transition: border-color .15s ease, box-shadow .15s ease !important;
}

/* ── Tableau ── */
.a-card.a-table-wrap {
  padding: 0 !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xs) !important;
  border: 1px solid var(--line) !important;
  overflow: hidden !important;
}
.a-table thead th {
  background: var(--soft) !important;
  color: var(--ink-muted) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 14px 20px !important;
  border-bottom: 1px solid var(--line) !important;
}
.a-table td {
  padding: 16px 20px !important;
  border-bottom: 1px solid var(--line) !important;
  font-size: .875rem !important;
}
.a-table tbody tr:last-child td { border-bottom: none !important; }
.a-table tbody tr { transition: background .15s ease !important; }
.a-table tbody tr:hover td { background: var(--soft) !important; }

/* ── Boutons icone ── */
.a-ibtn {
  width: 32px !important;
  height: 32px !important;
  border-radius: var(--r-sm) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid var(--line-2) !important;
  background: var(--paper) !important;
  color: var(--ink-muted) !important;
  transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease !important;
}
.a-ibtn:hover { background: var(--blue-soft) !important; border-color: var(--blue-line) !important; color: var(--blue) !important; transform: translateY(-1px) !important; }
.a-ibtn--danger:hover { background: var(--red-soft) !important; border-color: var(--red-line) !important; color: var(--red-txt) !important; }

/* ── Etat vide (unifie toutes les variantes a-empty / cl-empty) ── */
.a-empty,
.cl-empty {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  gap: 8px !important;
  padding: 72px 32px !important;
}
.a-empty-icon,
.cl-empty-ico {
  width: 60px !important;
  height: 60px !important;
  border-radius: 16px !important;
  background: var(--blue-soft) !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 6px !important;
}
.a-empty-icon svg,
.cl-empty-ico svg {
  width: 26px !important;
  height: 26px !important;
  color: var(--blue) !important;
  stroke-width: 1.6 !important;
}
.a-empty h2, .a-empty h3, .cl-empty h3 {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  color: var(--ink) !important;
  margin: 0 !important;
}
.a-empty p, .cl-empty p {
  font-size: .9rem !important;
  color: var(--ink-muted) !important;
  max-width: 36ch !important;
  line-height: 1.6 !important;
  margin: 0 0 6px !important;
}

/* ── Cartes mobiles ── */
.a-m-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 16px !important;
  box-shadow: var(--sh-xs) !important;
}

/* ── Avatars client (initiales) ── */
.cl-avatar, .cl-head-avatar {
  background: linear-gradient(135deg, var(--blue), var(--blue-600)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: var(--r-sm) !important;
}
.cl-avatar { width: 34px !important; height: 34px !important; font-size: .82rem !important; }
.cl-head-avatar { width: 56px !important; height: 56px !important; font-size: 1.3rem !important; border-radius: var(--r) !important; }

/* ================================================================
   PAGE ENTREPRISE — PREMIUM
   ================================================================ */
.co-section-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 24px 24px 14px !important;
  font-size: .68rem !important;
  font-weight: 800 !important;
  text-transform: uppercase !important;
  letter-spacing: .09em !important;
  color: var(--ink) !important;
}
.co-section-label svg {
  width: 28px !important;
  height: 28px !important;
  padding: 6px !important;
  box-sizing: border-box !important;
  border-radius: var(--r-sm) !important;
  background: var(--blue-soft) !important;
  color: var(--blue) !important;
}
.co-section-fields { padding: 0 24px 24px !important; display: flex !important; flex-direction: column !important; gap: 16px !important; }
.co-section-sep { border: none !important; border-top: 1px solid var(--line) !important; margin: 0 !important; }
.co-section-actions {
  padding: 20px 24px !important;
  border-top: 1px solid var(--line) !important;
  background: var(--soft) !important;
  display: flex !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.a-form-row { gap: 18px !important; }
.a-field { gap: 7px !important; }
.a-label { font-size: .74rem !important; font-weight: 700 !important; color: var(--ink-soft) !important; }

/* Zone upload logo */
.co-logo-box {
  border: 1.5px dashed var(--line-2) !important;
  border-radius: var(--r-lg) !important;
  padding: 18px 20px !important;
  background: var(--soft) !important;
  transition: border-color .15s ease, background .15s ease !important;
}
.co-logo-box:hover { border-color: var(--blue-line) !important; background: var(--blue-soft) !important; }
.co-logo-img { width: 60px !important; height: 60px !important; border-radius: var(--r-sm) !important; box-shadow: var(--sh-xs) !important; }

/* Cartes entreprises */
.co-cards-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important; gap: 16px !important; }
.co-card {
  background: var(--paper) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  padding: 20px !important;
  box-shadow: var(--sh-xs) !important;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease !important;
}
.co-card:hover { box-shadow: var(--sh-sm) !important; transform: translateY(-2px) !important; border-color: var(--blue-line) !important; }
.co-card.is-active { border-color: var(--blue) !important; background: linear-gradient(180deg, var(--blue-soft) 0%, var(--paper) 60%) !important; }
.co-card-avatar {
  width: 42px !important;
  height: 42px !important;
  border-radius: var(--r-sm) !important;
  background: linear-gradient(135deg, var(--blue), var(--blue-600)) !important;
  color: #fff !important;
  font-weight: 700 !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
}
.co-card-name { font-family: "Fraunces", Georgia, serif !important; font-weight: 600 !important; font-size: 1rem !important; }
.co-card-info { font-size: .8rem !important; color: var(--ink-muted) !important; display: flex !important; flex-direction: column !important; gap: 4px !important; margin-bottom: 14px !important; }
.co-card-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; padding-top: 14px !important; border-top: 1px solid var(--line) !important; }

/* ================================================================
   PAGE HISTORIQUE — selection d'entreprise
   ================================================================ */
.hist-co-card {
  display: block;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--sh-xs);
  text-decoration: none;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.hist-co-card:hover { box-shadow: var(--sh-sm); transform: translateY(-2px); border-color: var(--blue-line); }
.hist-co-siret { font-size: .74rem; color: var(--ink-muted); margin-top: 2px; }
.hist-co-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: .82rem;
  font-weight: 700;
  color: var(--blue);
}
.hist-co-cta svg { width: 14px; height: 14px; transition: transform .2s ease; }
.hist-co-card:hover .hist-co-cta svg { transform: translateX(3px); }

/* ================================================================
   PAGE GUIDE
   ================================================================ */
.guide-kicker {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--blue);
  background: var(--blue-soft);
  padding: 4px 10px;
  border-radius: var(--pill);
  margin-bottom: 10px;
}
.guide-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--blue-600));
  color: #fff;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: .92rem;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 4px 10px rgba(34,52,107,.25);
}

/* Timeline verticale des étapes */
.guide-timeline { display: flex; flex-direction: column; }
.guide-timeline-item { display: flex; gap: 18px; }
.guide-timeline-marker { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.guide-timeline-line { width: 2px; flex: 1; min-height: 20px; background: var(--line); margin: 6px 0; }
.guide-timeline-body { display: flex; gap: 12px; padding-bottom: 24px; flex: 1; }
.guide-timeline-item:last-child .guide-timeline-body { padding-bottom: 0; }
.guide-timeline-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--blue); }
.guide-timeline-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--blue); margin: 0 0 4px; }
.guide-timeline-text { font-size: .9rem; font-weight: 500; color: var(--ink); margin: 0 0 4px; line-height: 1.4; }
.guide-timeline-tip { font-size: .78rem; color: var(--ink-muted); margin: 0; }

/* Cartes "À savoir" */
.guide-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.guide-info-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px;
}
.guide-info-icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.guide-info-icon--blue { color: var(--blue); }
.guide-info-icon--green { color: var(--green); }
.guide-info-title { font-size: .84rem; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.guide-info-text { font-size: .82rem; color: var(--ink-soft); margin: 0; line-height: 1.5; }

/* FAQ accordion */
.guide-faq-item { border-bottom: 1px solid var(--line); padding: 4px 0; }
.guide-faq-item:last-child { border-bottom: none; }
.guide-faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 4px; cursor: pointer; list-style: none;
  font-size: .875rem; font-weight: 600; color: var(--ink);
}
.guide-faq-q::-webkit-details-marker { display: none; }
.guide-faq-chevron { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-muted); transition: transform .2s ease; }
.guide-faq-item[open] .guide-faq-chevron { transform: rotate(180deg); }
.guide-faq-a { font-size: .82rem; color: var(--ink-muted); margin: 0 0 14px; padding: 0 4px; line-height: 1.55; }

@media (max-width: 720px) {
  .guide-info-grid { grid-template-columns: 1fr; }
  .guide-timeline-body { flex-direction: column; gap: 4px; }
}

/* ================================================================
   PAGES DETAIL DEVIS / FACTURE — document premium
   ================================================================ */
.doc-head-sub { font-size: .86rem !important; color: var(--ink-muted) !important; }
.doc-head-sub strong { color: var(--ink) !important; }
.a-lines-scroll { border-radius: var(--r-lg) !important; overflow: hidden !important; }
.a-lines-table thead th {
  background: var(--soft) !important;
  color: var(--ink-muted) !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
  padding: 13px 16px !important;
}
.a-lines-table td { padding: 14px 16px !important; border-bottom: 1px solid var(--line) !important; }
.a-lines-table tbody tr:last-child td { border-bottom: none !important; }
.a-lines-table tbody tr:hover td { background: var(--soft) !important; }
.a-summary {
  background: var(--soft) !important;
  border-radius: var(--r-lg) !important;
}
.a-summary-total {
  padding-top: 12px !important;
}
.a-summary-total strong {
  font-family: "Fraunces", Georgia, serif !important;
  font-weight: 600 !important;
  font-size: 1.35rem !important;
  color: var(--ink) !important;
}
.q-doc-grid, .q-doc-grid--amount { gap: 18px !important; }

/* ================================================================
   REFONTE PRO — MonDevisSimple × style banque/fintech (2026-07-05)
   Reference : Qonto / Revolut / BoursoBank — bleu + blanc, epure,
   serieux, rassurant. Typographie sans-serif partout (Inter),
   coins arrondis doux, ombres discretes, transitions rapides.
   Palette alignee avec le site public (vitrine.css : --blue #2b54e6).
   Ce bloc est le dernier du fichier : il gagne toujours la cascade.
   ================================================================ */

body.app-shell {
  /* Accent — bleu professionnel, identique au site public */
  --blue:        #2B54E6;
  --blue-600:    #1E3FBF;
  --blue-700:    #16307D;
  --blue-soft:   #EAF0FE;
  --blue-line:   #C9D9FB;

  /* Encre — bleu-nuit/charbon, jamais de brun */
  --ink:         #0F1B33;
  --ink-2:       #1E2A44;
  --ink-soft:    #55607A;
  --ink-muted:   #8A93AC;

  /* Surfaces — blanc et bleu tres clair */
  --paper:       #FFFFFF;
  --soft:        #F4F7FC;
  --soft-2:      #EBF0FA;
  --line:        #E5E9F1;
  --line-2:      #D7DEEC;

  /* Semantique — claire et lisible, pas desaturee */
  --green:       #2F9E63;
  --green-soft:  #E6F7EE;
  --green-txt:   #1F7A4C;
  --green-line:  #C9EBD9;

  --amber:       #D68A1F;
  --amber-soft:  #FDF3E1;
  --amber-txt:   #A6650F;
  --amber-line:  #F5DFB3;

  --red:         #DC3545;
  --red-soft:    #FBEAEC;
  --red-txt:     #B02A37;
  --red-line:    #F3C6CB;

  /* "purple" = accent secondaire indigo (badge essai) */
  --purple:      #6366F1;
  --purple-soft: #EEEEFE;
  --purple-txt:  #4338CA;

  /* Coins arrondis doux — style app bancaire, pas de coins nets */
  --r-xs: 6px;
  --r-sm: 8px;
  --r:    10px;
  --r-lg: 14px;
  --pill: 999px;

  /* Ombres discretes et froides */
  --sh-xs: 0 2px 10px rgba(15,27,51,.05);
  --sh-sm: 0 4px 16px rgba(15,27,51,.07);
  --sh:    0 8px 28px rgba(15,27,51,.10);
  --sh-lg: 0 16px 48px rgba(15,27,51,.14);

  /* Transitions rapides et nettes */
  --tr: 160ms ease;

  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
}

/* ── Fond general : blanc/bleu tres clair, jamais ivoire ── */
body.app-shell.app-shell--flat { background: var(--soft) !important; }
.a-topnav { background: var(--paper) !important; border-bottom: 1px solid var(--line) !important; }
.a-card, .hub-card, .co-card, .hist-co-card, .a-m-card { background: var(--paper) !important; border-color: var(--line) !important; }

/* ── Typographie display : Inter en gras pour les titres (jamais de serif) ── */
.pv3-welcome-h1, .a-page-title, .hub-hero-title, .a-page-head-info h1,
.doc-head-badge h1, .co-card-name, .guide-step-num, .a-empty h2, .a-empty h3, .cl-empty h3,
.ds3-page-title {
  font-family: "Inter", system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.hub-hero-title em { font-style: normal !important; font-weight: 700 !important; color: var(--blue) !important; }

/* Chiffres : toujours en Inter avec chiffres tabulaires */
.a-stat-value, .a-summary-total strong, .a-m-card-amount {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.01em !important;
}

/* ── Nav : logo en sans-serif gras, liens normaux, fond bleu clair sur l'actif ── */
.a-topnav-brand { font-family: "Inter", system-ui, sans-serif !important; font-size: 1.1rem !important; font-weight: 700 !important; letter-spacing: -.01em !important; }
.a-topnav-link {
  font-family: "Inter", sans-serif !important;
  font-size: .875rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  border-radius: var(--pill) !important;
  position: relative !important;
  background: transparent !important;
  color: var(--ink-soft) !important;
  padding: 8px 14px !important;
}
.a-topnav-link:hover { color: var(--ink) !important; background: var(--soft) !important; }
.a-topnav-link.is-active { color: var(--blue-600) !important; background: var(--blue-soft) !important; }
.a-topnav-link.is-active::after { display: none !important; }
.a-topnav-link--admin { color: var(--red-txt) !important; background: transparent !important; letter-spacing: 0 !important; }
.a-topnav-link--admin::after { display: none; }

/* ── Boutons : coins arrondis, poids normal, style app bancaire ── */
.a-btn {
  border-radius: var(--r) !important;
  font-family: "Inter", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-size: .84rem !important;
  transition: var(--tr) !important;
}
.a-btn--sm { font-size: .78rem !important; }
.a-btn--lg { font-size: .92rem !important; padding: 14px 32px !important; }
.a-btn--primary {
  background: var(--blue) !important;
  color: var(--paper) !important;
  border: 1px solid var(--blue) !important;
  box-shadow: none !important;
}
.a-btn--primary:hover { background: var(--blue-600) !important; border-color: var(--blue-600) !important; transform: none !important; box-shadow: none !important; }
.a-btn--secondary {
  background: var(--paper) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-2) !important;
  box-shadow: none !important;
}
.a-btn--secondary:hover { background: var(--soft) !important; color: var(--ink) !important; border-color: var(--ink-muted) !important; }
.a-btn--ghost { color: var(--ink-soft) !important; letter-spacing: 0 !important; }
.a-btn--ghost:hover { color: var(--ink) !important; background: var(--soft) !important; }
.a-btn--danger { border-radius: var(--r) !important; }

/* ── Cards, stats, tableaux : coins arrondis, ombres discretes ── */
.a-card, .a-stat, .hub-card, .co-card, .hist-co-card, .a-m-card, .a-card.a-table-wrap {
  border-radius: var(--r-lg) !important;
  box-shadow: var(--sh-xs) !important;
}
.a-card:hover, .hub-card:hover, .co-card:hover, .hist-co-card:hover { box-shadow: var(--sh) !important; }
.a-stat::before { background: var(--blue) !important; }
.a-ibtn { border-radius: var(--r-sm) !important; }
.a-badge { border-radius: var(--pill) !important; font-weight: 600 !important; letter-spacing: 0 !important; }
.a-input { border-radius: var(--r-sm) !important; font-family: "Inter", sans-serif !important; }
.co-card-avatar, .cl-avatar, .cl-head-avatar {
  background: var(--blue) !important;
  border-radius: var(--r-sm) !important;
}
.guide-step-num { background: var(--blue) !important; border-radius: var(--r-sm) !important; box-shadow: none !important; }

/* ── Compte / dropdown ── */
.a-avatar { border-radius: var(--r-sm) !important; background: var(--blue) !important; color: var(--paper) !important; }
.a-account-menu { border-radius: var(--r-lg) !important; box-shadow: var(--sh) !important; }

/* ── Hero dashboard : eyebrow discret, sans majuscules forcees ── */
.hub-hero-eyebrow {
  font-family: "Inter", sans-serif !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-weight: 600 !important;
  font-size: .85rem !important;
  color: var(--blue-600) !important;
}
.hub-help { background: var(--soft-2) !important; border-radius: var(--r-lg) !important; }

/* ── Fix bug critique : chevauchement nav / bouton "Nouveau devis" ──
   Les liens ne tiennent pas tous sur une seule ligne des ~1500px.
   On bascule en menu burger plus tot et on securise le conteneur
   pour qu'il ne puisse jamais deborder (sans couper les menus deroulants). ── */
.a-topnav-inner { flex-wrap: nowrap !important; overflow-x: hidden !important; overflow-y: visible !important; }
.a-topnav-links { overflow: hidden !important; }
.a-topnav-right { flex-shrink: 0 !important; }
@media (max-width: 1400px) {
  .a-topnav-links { display: none !important; }
  .a-topnav-burger { display: inline-flex !important; }
}
@media (max-width: 640px) {
  .a-topnav-cta span { display: none !important; }
}

/* ── Finitions : espaces genereux, pas de liseres decoratifs ── */
.a-content--flat { padding-top: 48px !important; }
.hub-hero { padding: 8px 0 56px !important; border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.a-mobile-nav {
  background: var(--paper) !important;
  border-top: 1px solid var(--line) !important;
  padding: 16px 24px 24px !important;
}
.a-mobile-nav-link {
  border-radius: var(--r) !important;
  font-family: "Inter", sans-serif !important;
  font-size: .9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--ink-soft) !important;
  padding: 12px 10px !important;
  border-bottom: none !important;
}
.a-mobile-nav-link:last-child { border-bottom: none !important; }
.a-mobile-nav-link.is-active { color: var(--blue-600) !important; background: var(--blue-soft) !important; }
.a-mobile-nav-link--admin { color: var(--red-txt) !important; }

/* ================================================================
   PAGE DEVIS — RECONSTRUCTION STRUCTURELLE PREMIUM
   Nouvelle forme : hero editorial + resume inline + filtres integres
   + liste premium (plus de tableau brut). Pattern reutilisable pour
   Factures/Historique.
   ================================================================ */

/* ── Hero de page ── */
.doc-hero { padding: 8px 0 32px; border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.doc-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 32px; }
.doc-hero-eyebrow {
  font-family: "Inter", sans-serif;
  font-size: .7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--blue-600);
  margin: 0 0 10px;
}
.doc-hero-title {
  font-family: "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 3.6vw, 2.4rem);
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0 0 8px;
}
.doc-hero-sub { font-size: .92rem; color: var(--ink-soft); margin: 0; font-weight: 400; }
.doc-hero-ctas { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }

/* ── Resume inline (remplace les 4 cartes KPI empilees) ── */
.doc-stats-inline { display: flex !important; flex-direction: row !important; align-items: center; gap: 28px; flex-wrap: wrap; }
.doc-stats-item { display: flex; flex-direction: column; gap: 3px; }
.doc-stats-item strong {
  font-family: "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
  line-height: 1;
}
.doc-stats-item span {
  font-size: .68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-muted);
}
.doc-stats-sep { width: 1px; height: 30px; background: var(--line); }
@media (max-width: 640px) { .doc-stats-inline { gap: 18px; } .doc-stats-sep { display: none; } }

/* ── Filtres integres (plus de gros bloc rectangulaire) ── */
.doc-filters { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 8px; padding-bottom: 20px; }
.doc-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.doc-search svg { position: absolute; left: 2px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--ink-muted); }
.doc-search input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  padding: 8px 4px 8px 24px;
  font-family: "Inter", sans-serif;
  font-size: .86rem;
  color: var(--ink);
  transition: border-color .2s ease;
}
.doc-search input:focus { outline: none; border-color: var(--blue); }
.doc-search input::placeholder { color: var(--ink-muted); }
.doc-filter-select {
  border: none;
  border-bottom: 1px solid var(--line-2);
  background: transparent;
  padding: 8px 20px 8px 2px;
  font-family: "Inter", sans-serif;
  font-size: .82rem;
  color: var(--ink-soft);
  cursor: pointer;
}
.doc-filter-submit { display: none; }
.doc-filter-reset { font-size: .78rem; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }

/* ── Liste premium (remplace le tableau) ── */
.doc-list { border-top: 1px solid var(--line); }
.doc-row {
  display: grid;
  grid-template-columns: 40px minmax(140px,1.6fr) 90px 100px 120px auto;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  border-bottom: 1px solid var(--line);
  transition: background .2s ease;
}
.doc-row:hover { background: var(--soft); }
.doc-row-icon {
  width: 38px; height: 38px;
  border-radius: var(--r-sm);
  background: var(--blue-soft);
  color: var(--blue-600);
  display: grid; place-items: center;
  flex-shrink: 0;
}
.doc-row-icon svg { width: 17px; height: 17px; }
.doc-row-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.doc-row-title {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  text-decoration: none;
  transition: color .15s ease;
}
.doc-row-title:hover { color: var(--blue-600); }
.doc-row-sub { font-size: .8rem; color: var(--ink-muted); font-weight: 300; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-row-date { font-size: .82rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.doc-row-status { display: flex; }
.doc-row-amount {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: var(--ink);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.doc-row-actions { display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity .15s ease; }
.doc-row:hover .doc-row-actions,
.doc-row:focus-within .doc-row-actions,
.doc-row-actions:focus-within,
.doc-row-actions:has(a:focus, button:focus) { opacity: 1; }
.doc-row-actions a:focus-visible,
.doc-row-actions button:focus-visible { opacity: 1; outline: 2px solid var(--blue); outline-offset: 2px; }
@media (hover: none) {
  .doc-row-actions { opacity: 1; }
}
@supports not selector(:focus-within) {
  .doc-row-actions { opacity: 1; }
}
@media (max-width: 900px) {
  .doc-list { display: none; }
}
@media (min-width: 901px) {
  .a-m-cards { display: none !important; }
}

/* ── Variante liste Clients : nom/email + telephone + adresse (pas de montant/statut) ── */
.doc-row--client {
  grid-template-columns: 40px minmax(160px,1.4fr) 130px minmax(140px,1fr) auto;
}
.doc-row--client .doc-row-icon.cl-avatar {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-size: .8rem;
}