/*
 * Jobtrade 2026 — Theme Override
 * Chargé après Bootstrap + Limitless pour restyler l'UI sans toucher les templates.
 * Garder Bootstrap/Limitless en place ; ce fichier surcharge les apparences.
 */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap');

/* ════════════════════════════════════════
   DESIGN TOKENS
════════════════════════════════════════ */
:root {
  /* Hex fallbacks (oklch not supported in Safari < 15.4) */
  --jt-bg:             #f6faf7;
  --jt-surface:        #ffffff;
  --jt-surface-2:      #f1f5f2;
  --jt-border:         #e5ebe6;
  --jt-border-strong:  #ccd6ce;
  --jt-text:           #1c2b22;
  --jt-text-2:         #566860;
  --jt-text-3:         #8a9a8e;

  --jt-accent:         #3d8a60;
  --jt-accent-hover:   #2a7048;
  --jt-accent-soft:    #e4f0e9;
  --jt-accent-softer:  #edf6f0;
  --jt-accent-border:  #a8cdb8;

  /* Upgrade to oklch where supported */
  --jt-bg:             oklch(98.5% 0.005 140);
  --jt-surface:        #ffffff;
  --jt-surface-2:      oklch(97% 0.006 140);
  --jt-border:         oklch(92% 0.008 140);
  --jt-border-strong:  oklch(86% 0.01 140);
  --jt-text:           oklch(22% 0.015 160);
  --jt-text-2:         oklch(45% 0.012 160);
  --jt-text-3:         oklch(60% 0.01 160);

  --jt-accent:         oklch(58% 0.13 158);
  --jt-accent-hover:   oklch(52% 0.13 158);
  --jt-accent-soft:    oklch(95% 0.04 158);
  --jt-accent-softer:  oklch(97.5% 0.025 158);
  --jt-accent-border:  oklch(86% 0.07 158);

  --jt-warn:           oklch(70% 0.16 55);
  --jt-warn-soft:      oklch(96% 0.04 55);
  --jt-warn-border:    oklch(85% 0.1 55);
  --jt-danger:         oklch(60% 0.18 25);
  --jt-danger-soft:    oklch(96% 0.03 25);
  --jt-danger-border:  oklch(85% 0.09 25);
  --jt-info:           oklch(60% 0.13 240);
  --jt-info-soft:      oklch(96% 0.03 240);

  --jt-radius:         12px;
  --jt-radius-sm:      8px;
  --jt-radius-lg:      16px;

  --jt-shadow-xs:      0 1px 2px oklch(0% 0 0 / 0.04);
  --jt-shadow-sm:      0 1px 2px oklch(0% 0 0 / 0.04), 0 1px 1px oklch(0% 0 0 / 0.03);
  --jt-shadow-md:      0 4px 12px -2px oklch(0% 0 0 / 0.06), 0 2px 4px -1px oklch(0% 0 0 / 0.04);

  --jt-font:           "Geist", "Inter", system-ui, -apple-system, sans-serif;
  --jt-font-num:       "Geist Mono", ui-monospace, monospace;
}

/* ════════════════════════════════════════
   GLOBAL / TYPOGRAPHIE
════════════════════════════════════════ */
body {
  font-family: var(--jt-font) !important;
  color: var(--jt-text) !important;
  background: var(--jt-bg) !important;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--jt-font) !important;
  color: var(--jt-text) !important;
  letter-spacing: -0.015em;
}
/* Only colour links inside the content area — not the sidebar nav */
.content-wrapper a { color: var(--jt-accent-hover); }
.content-wrapper a:hover { color: var(--jt-accent); text-decoration: none; }
/* Kill any inherited green on sidebar links */
.sidebar-main a,
.sidebar-default a { color: inherit; }

/* ════════════════════════════════════════
   SHELL — Navbar (topbar)
════════════════════════════════════════ */

/* Reset Bootstrap navbar */
.navbar {
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Light navbar */
.jt-navbar {
  background: var(--jt-surface) !important;
  border-bottom: 1px solid var(--jt-border) !important;
}

/* ── Main row: flex layout ── */
.jt-nav-row {
  display: flex !important;
  align-items: center !important;
  height: 68px !important;
  width: 100% !important;
}

/* ── Brand area — même largeur que la sidebar ── */
.jt-nav-brand {
  width: 280px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  padding-left: 22px !important;
  padding-right: 16px !important;
}
.jt-nav-logo {
  display: flex !important;
  align-items: center !important;
  text-decoration: none !important;
}
.jt-nav-logo img {
  max-height: 30px !important;
  width: auto !important;
}
.jt-nav-pro-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 8px !important;
  padding: 2px 7px !important;
  background: #E8641D !important;
  color: #fff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  border-radius: 5px !important;
  line-height: 1.4 !important;
  flex-shrink: 0 !important;
}

/* ── Search bar ── */
.jt-nav-search {
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0 24px !important;
}
.jt-nav-search-box {
  width: 100% !important;
  max-width: 540px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--jt-surface-2) !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: 9px !important;
  padding: 0 14px !important;
  transition: border-color 0.15s, background 0.15s !important;
}
.jt-nav-search-box:focus-within {
  background: var(--jt-surface) !important;
  border-color: var(--jt-accent-border) !important;
}
.jt-nav-search-icon {
  color: var(--jt-text-3) !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.jt-nav-search-input {
  flex: 1 !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  color: var(--jt-text) !important;
  font-size: 13.5px !important;
  font-family: var(--jt-font) !important;
  padding: 0 !important;
  min-width: 0 !important;
  box-shadow: none !important;
}
.jt-nav-search-input::placeholder {
  color: var(--jt-text-3) !important;
}
.jt-nav-search-kbd {
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
  padding: 2px 7px !important;
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border-strong) !important;
  border-radius: 5px !important;
  font-size: 11px !important;
  font-family: var(--jt-font) !important;
  color: var(--jt-text-3) !important;
  letter-spacing: 0.02em !important;
  line-height: 1.4 !important;
}

/* ── Actions (right) ── */
.jt-nav-actions {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  padding-right: 28px !important;
  height: 100% !important;
}

/* Icon list — override Bootstrap floats */
.jt-nav-icons {
  display: flex !important;
  align-items: center !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  gap: 10px !important;
  height: 100% !important;
}
.jt-nav-icons > li {
  float: none !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
}

/* Icon buttons */
.jt-nav-icon-btn,
.jt-nav-icons > li > a,
.jt-nav-icons > li > .dropdown-toggle {
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 8px !important;
  color: var(--jt-text-2) !important;
  font-size: 16px !important;
  background: transparent !important;
  text-decoration: none !important;
  line-height: 1 !important;
  transition: background 0.12s, color 0.12s !important;
  cursor: pointer !important;
}
.jt-nav-icon-btn:hover,
.jt-nav-icons > li > a:hover,
.jt-nav-icons > li > .dropdown-toggle:hover {
  background: var(--jt-surface-2) !important;
  color: var(--jt-text) !important;
}
/* Icône dans le bouton */
.jt-nav-icon-btn i,
.jt-nav-icons > li > a > i,
.jt-nav-icons > li > .dropdown-toggle > i {
  float: none !important;
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

/* Badge position sur les icônes */
.jt-nav-icons > li > a > .badge,
.jt-nav-icons > li > .dropdown-toggle > .badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  min-width: 16px !important;
  height: 16px !important;
  line-height: 16px !important;
  padding: 0 4px !important;
  font-size: 10px !important;
  border-radius: 8px !important;
}

/* Admin switch circle — spécificité (0,2,0,1) = même niveau que la règle générique */
.jt-nav-icons > li > .jt-admin-switch-active {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  background: #E8641D !important;
  border-radius: 50% !important;
}
.jt-nav-icons > li > .jt-admin-switch-active:hover {
  background: #d0551a !important;
  color: white !important;
}
.jt-nav-icons > li > .jt-admin-switch-active i {
  color: white !important;
}

/* User avatar */
.jt-nav-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3d8a60, #2a7048) !important;
  color: white !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  letter-spacing: 0.02em !important;
  flex-shrink: 0 !important;
  margin-left: 4px !important;
  transition: opacity 0.12s !important;
}
.jt-nav-avatar:hover {
  opacity: 0.85 !important;
  color: white !important;
  text-decoration: none !important;
}

/* Dropdown menus from navbar icons */
.jt-nav-icons .dropdown-menu {
  top: calc(100% + 8px) !important;
  right: 0 !important;
  left: auto !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: var(--jt-radius) !important;
  box-shadow: var(--jt-shadow-md) !important;
}

/* Mobile row */
.jt-nav-row-mobile {
  height: 56px !important;
  padding: 0 16px !important;
  justify-content: space-between !important;
}

/* ════════════════════════════════════════
   SHELL — Sidebar
════════════════════════════════════════ */
.sidebar-main,
.sidebar-default {
  background: #ffffff !important;
  border-right: 1px solid #e5ebe6 !important;
  box-shadow: none !important;
}

/* Strip the Limitless sidebar-content box (border + shadow + radius) */
.sidebar .sidebar-content,
.sidebar-main .sidebar-content,
.sidebar-default .sidebar-content {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}

/* Strip all internal Limitless borders/paddings */
.sidebar-category {
  background: #ffffff !important;
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.category-content {
  border: none !important;
  border-top: none !important;
  border-bottom: none !important;
  padding: 0 !important;
}
.category-content.no-padding {
  padding: 0 !important;
}

/* ── User card (sidebar top) ── */
.category-content.sidebar-user {
  padding: 12px !important;
  border-bottom: 1px solid #e5ebe6 !important;
  margin-bottom: 4px !important;
}
.jt-user-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px !important;
  border-radius: 10px !important;
  background: #f6faf7 !important;
  border: 1px solid #e5ebe6 !important;
}
.jt-user-card .jt-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #3d8a60, #2a7048) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  display: grid !important;
  place-items: center !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 0 0 1px #e5ebe6 !important;
  letter-spacing: 0 !important;
}
.jt-user-card .jt-user-card-text {
  flex: 1 !important;
  min-width: 0 !important;
}
.jt-user-card .jt-user-card-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1c2b22 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.jt-user-card .jt-user-card-meta {
  font-size: 11px !important;
  color: #8a9a8e !important;
  margin-top: 1px !important;
}
.jt-user-card .jt-user-card-cog {
  width: 28px !important;
  height: 28px !important;
  border-radius: 6px !important;
  display: grid !important;
  place-items: center !important;
  color: #8a9a8e !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}
.jt-user-card .jt-user-card-cog i {
  font-size: 14px !important;
}
.jt-user-card .jt-user-card-cog:hover {
  background: #e5ebe6 !important;
  color: #1c2b22 !important;
}

/* ── Nav items ── */
.sidebar-main .navigation > li > a,
.sidebar-default .navigation > li > a,
.sidebar-main .navigation > li > a:focus,
.sidebar-default .navigation > li > a:focus,
/* Defeat Limitless's li.highlight rule */
.sidebar-main .navigation > li.highlight > a,
.sidebar-default .navigation > li.highlight > a,
.sidebar-main .navigation > li.highlight > a:focus,
.sidebar-default .navigation > li.highlight > a:focus {
  color: #4a5568 !important;
  background: transparent !important;
  border-radius: 8px !important;
  margin: 1px 8px !important;
  padding: 8px 10px !important;
  min-height: 0 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  display: flex !important;
  align-items: center !important;
  transition: background 0.12s, color 0.12s !important;
  border-left: 3px solid transparent !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ── KILL core.css li.highlight span { color:#72BD94 !important } ──
   Specificity race: (0,1,0,1) vs our (0,3,0,3) → we win */
.sidebar-main .navigation li.highlight a span,
.sidebar-default .navigation li.highlight a span,
.sidebar-main .navigation li a span,
.sidebar-default .navigation li a span {
  color: inherit !important;
  font-weight: inherit !important;
}

/* Icons — undo float:left */
.sidebar-main .navigation > li > a > i,
.sidebar-default .navigation > li > a > i {
  float: none !important;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  margin-top: 0 !important;
  margin-right: 9px !important;
  font-size: 14px !important;
  color: inherit !important;
  opacity: 0.65;
}

/* Hover */
.sidebar-main .navigation > li > a:hover,
.sidebar-default .navigation > li > a:hover,
.sidebar-main .navigation > li.highlight > a:hover,
.sidebar-default .navigation > li.highlight > a:hover {
  background: #f1f5f2 !important;
  color: #1a202c !important;
}
.sidebar-main .navigation > li > a:hover > i,
.sidebar-default .navigation > li > a:hover > i {
  opacity: 1;
}

/* Active */
.sidebar-main .navigation > li.active > a,
.sidebar-default .navigation > li.active > a,
.sidebar-main .navigation > li.active > a:hover,
.sidebar-default .navigation > li.active > a:hover,
.sidebar-main .navigation > li.active > a:focus,
.sidebar-default .navigation > li.active > a:focus {
  background: #edf6f0 !important;
  color: #2a7048 !important;
  border-left: 3px solid #3d8a60 !important;
}
.sidebar-main .navigation > li.active > a > i,
.sidebar-default .navigation > li.active > a > i {
  color: #3d8a60 !important;
  opacity: 1 !important;
}

/* Override loud teal active from base .navigation */
.navigation > li.active > a,
.navigation > li.active > a:hover,
.navigation > li.active > a:focus {
  background-color: #edf6f0 !important;
  color: #2a7048 !important;
}
.navigation > li.active > a > [class*="text-"] {
  color: #2a7048 !important;
}

/* ── CTA "Créer un contrat" ── */
.sidebar-main .navigation > li.nav-cta-create > a,
.sidebar-default .navigation > li.nav-cta-create > a {
  background: #3d8a60 !important;
  color: #ffffff !important;
  border-left: 3px solid transparent !important;
  margin: 6px 8px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  justify-content: center !important;
}
.sidebar-main .navigation > li.nav-cta-create > a > i,
.sidebar-default .navigation > li.nav-cta-create > a > i {
  color: #ffffff !important;
  opacity: 1 !important;
}
.sidebar-main .navigation > li.nav-cta-create > a:hover,
.sidebar-default .navigation > li.nav-cta-create > a:hover {
  background: #2a7048 !important;
  color: #ffffff !important;
}

/* ── Séparateurs (menu_divider) ── */
.sidebar-main .navigation > li.menu_divider,
.sidebar-default .navigation > li.menu_divider {
  border: none !important;
  background: transparent !important;
  height: 28px !important;
}
.sidebar-main .navigation > li.menu_divider > a,
.sidebar-default .navigation > li.menu_divider > a {
  color: #8a9a8e !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 18px 4px !important;
  margin: 0 !important;
  border-left: none !important;
  border-radius: 0 !important;
  cursor: default !important;
  pointer-events: none !important;
  background: transparent !important;
  display: block !important;
  min-height: 0 !important;
}
/* Span du label des sections — core.css le cache via li.menu_divider *, on le réaffiche */
.sidebar-main .navigation > li.menu_divider > a > span,
.sidebar-default .navigation > li.menu_divider > a > span {
  display: inline !important;
}
/* Sept items (Sep1, Sep2) : just a subtle line */
.sidebar-main .navigation > li.menu_divider:first-child > a,
.sidebar-default .navigation > li.menu_divider:first-child > a {
  display: none !important;
}

/* Sous-menus */
.sidebar-main .navigation > li > ul,
.sidebar-default .navigation > li > ul {
  background: transparent !important;
  box-shadow: none !important;
}
.sidebar-main .navigation li ul li a,
.sidebar-default .navigation li ul li a {
  color: #4a5568 !important;
  font-size: 12.5px !important;
  padding: 7px 10px 7px 32px !important;
  min-height: 0 !important;
  border-radius: 7px !important;
  margin: 1px 8px !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  border-left: 3px solid transparent !important;
}
.sidebar-main .navigation li ul li a:hover,
.sidebar-default .navigation li ul li a:hover {
  background: #f1f5f2 !important;
  color: #1c2b22 !important;
}
.sidebar-main .navigation li ul li.active a,
.sidebar-default .navigation li ul li.active a {
  color: #2a7048 !important;
  background: #e4f0e9 !important;
  border-left-color: #3d8a60 !important;
}

/* Section headers (.navigation-header class variant) */
.sidebar-main .navigation .navigation-header,
.sidebar-default .navigation .navigation-header,
.sidebar-main .navigation .navigation-header a,
.sidebar-default .navigation .navigation-header a {
  color: #8a9a8e !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 12px 18px 4px !important;
  min-height: 0 !important;
}

/* Sub-menu accordion arrow */
.sidebar-main .navigation li > .has-ul:after,
.sidebar-default .navigation li > .has-ul:after {
  right: 14px !important;
  color: #8a9a8e !important;
  font-size: 13px !important;
}

/* ── Sidebar-xs (collapsed / icon-only) overrides ──
   Limitless adds .sidebar-xs to body to collapse sidebar to 76px.
   Our !important flex rules need to yield here.
*/
.sidebar-xs .sidebar-main .navigation > li > a,
.sidebar-xs .sidebar-main .navigation > li.highlight > a,
.sidebar-xs .sidebar-main .navigation > li.nav-cta-create > a {
  display: block !important;
  text-align: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  justify-content: center !important;
  border-left: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  border-radius: 0 !important;
}
.sidebar-xs .sidebar-main .navigation > li > a > i,
.sidebar-xs .sidebar-main .navigation > li.highlight > a > i {
  display: block !important;
  float: none !important;
  margin-right: 0 !important;
  margin: 0 auto !important;
}
/* ── Sidebar : bloc admin (features réservées aux admin) ─────────────────────
   On cible UNIQUEMENT les items `.highlight` qui ne sont PAS le CTA
   (le CTA "Créer un contrat" partage la classe .highlight). Le label "ADMIN"
   et la séparation ne s'affichent que si au moins un item .highlight existe. */

/* Teinte orange sur les items admin */
.sidebar-main .navigation > li.highlight:not(.nav-cta-create) > a {
  background: rgba(217, 119, 6, .04);
}
.sidebar-main .navigation > li.highlight:not(.nav-cta-create) > a > i {
  color: #d97706 !important;
}
.sidebar-main .navigation > li.highlight:not(.nav-cta-create) > a:hover {
  background: rgba(217, 119, 6, .10);
}
/* État actif : on garde l'accent vert sur l'icône pour cohérence */
.sidebar-main .navigation > li.highlight:not(.nav-cta-create).active > a > i {
  color: var(--jt-accent) !important;
}

/* Label "ADMIN" : apparaît UNIQUEMENT au-dessus du premier item admin
   (premier .highlight venant après un item non-.highlight comme Tableau de bord).
   Si aucun item admin n'existe → rien ne s'affiche. */
.sidebar-main .navigation > li:not(.highlight) + li.highlight:not(.nav-cta-create)::before {
  content: 'ADMIN';
  display: block;
  padding: 12px 22px 4px;
  font-size: 10px;
  font-weight: 700;
  color: #d97706;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Séparation entre le bloc admin et le CTA : uniquement si un .highlight le précède */
.sidebar-main .navigation > li.highlight:not(.nav-cta-create) + li.nav-cta-create {
  border-top: 1px solid var(--jt-border) !important;
  margin-top: 6px !important;
}

/* Mode xs (icônes seules) : on retire le label et le fond, on garde l'icône orange */
.sidebar-xs .sidebar-main .navigation > li:not(.highlight) + li.highlight:not(.nav-cta-create)::before {
  display: none !important;
}
.sidebar-xs .sidebar-main .navigation > li.highlight:not(.nav-cta-create) > a {
  background: transparent !important;
}

/* ── Sidebar-xs : flyout label + sous-menu ──
   On laisse Limitless gérer la mécanique hover, on override juste le style.
   - Largeur uniforme : 240px (span ET ul)
   - Hauteur du span : 100% du li (matche pile la hauteur de l'icône)
   - Le ul s'aligne sous le span via top: 100% (suit la hauteur réelle du li) */

/* Débloque l'overflow horizontal en xs pour que les flyouts puissent sortir */
.sidebar-xs .sidebar,
.sidebar-xs .sidebar-content {
  overflow: visible !important;
}

/* Span (label flyout) — même fond que le sous-menu pour panel uniforme */
.sidebar-xs .sidebar-main .navigation > li > a > span {
  display: none;
  position: absolute !important;
  top: 0 !important;
  right: -240px !important;
  left: auto !important;
  width: 240px !important;
  height: 100% !important;
  min-height: 44px !important;
  padding: 0 18px !important;
  align-items: center !important;
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-left: none !important;
  border-radius: 0 var(--jt-radius-sm) 0 0 !important;
  color: var(--jt-accent) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  text-align: left !important;
  white-space: nowrap !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
  z-index: 100 !important;
}
/* Sous-menu (ul) */
.sidebar-xs .sidebar-main .navigation > li > ul {
  display: none;
  position: absolute !important;
  top: 100% !important;
  right: -240px !important;
  left: auto !important;
  width: 240px !important;
  margin: 0 !important;
  padding: 4px 0 !important;
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-top: none !important;
  border-radius: 0 0 var(--jt-radius-sm) var(--jt-radius-sm) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
  z-index: 100 !important;
}
/* Affichage au hover */
.sidebar-xs .sidebar-main .navigation > li:hover > a > span {
  display: flex !important;
}
.sidebar-xs .sidebar-main .navigation > li:hover > ul {
  display: block !important;
}
/* Si l'item n'a pas de sous-menu, le span est entièrement arrondi à droite */
.sidebar-xs .sidebar-main .navigation > li:not(:has(> ul)) > a > span {
  border-radius: 0 var(--jt-radius-sm) var(--jt-radius-sm) 0 !important;
}

/* Dividers (DONNÉES, ACTIVITÉ, OUTILS, etc.) : pas de flyout en xs, on les
   réduit à une simple ligne discrète à la place du gros bloc. */
.sidebar-xs .sidebar-main .navigation > li.menu_divider > a > span,
.sidebar-xs .sidebar-main .navigation > li.menu_divider:hover > a > span,
.sidebar-xs .sidebar-main .navigation > li.menu_divider:hover > ul {
  display: none !important;
}
.sidebar-xs .sidebar-main .navigation > li.menu_divider {
  height: 8px !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 4px 12px !important;
  border-top: 1px solid var(--jt-border) !important;
  background: transparent !important;
}
.sidebar-xs .sidebar-main .navigation > li.menu_divider > a {
  display: none !important;
}
/* Sous-items dans le flyout */
.sidebar-xs .sidebar-main .navigation > li > ul > li > a {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  color: var(--jt-accent) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  background: transparent !important;
  text-align: left !important;
  border-left: none !important;
}
.sidebar-xs .sidebar-main .navigation > li > ul > li > a:hover {
  background: var(--jt-surface-2) !important;
  color: var(--jt-accent) !important;
}
.sidebar-xs .sidebar-main .navigation > li > ul > li.active > a {
  background: var(--jt-accent-soft) !important;
  color: var(--jt-accent) !important;
  font-weight: 600 !important;
}
.sidebar-xs .sidebar-main .navigation > li > ul > li > a > i {
  font-size: 15px !important;
  margin: 0 !important;
  float: none !important;
  display: inline-block !important;
}
.sidebar-xs .sidebar-main .navigation > li > ul > li > a > span {
  display: inline !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
  font-weight: inherit !important;
  width: auto !important;
}
/* CTA button in icon-only mode */
.sidebar-xs .sidebar-main .navigation > li.nav-cta-create > a {
  background: #3d8a60 !important;
  padding: 10px 0 !important;
  margin: 4px 0 !important;
}
/* User card in icon-only mode */
.sidebar-xs .sidebar-main .jt-user-card-text,
.sidebar-xs .sidebar-main .jt-user-card-cog {
  display: none !important;
}
.sidebar-xs .sidebar-main .jt-user-card {
  justify-content: center !important;
  padding: 8px !important;
  background: transparent !important;
  border: none !important;
}
.sidebar-xs .sidebar-main .category-content.sidebar-user {
  padding: 8px !important;
  border-bottom: 1px solid #e5ebe6 !important;
}

/* ════════════════════════════════════════
   SHELL — Conteneur principal
════════════════════════════════════════ */
.page-container {
  background: var(--jt-bg) !important;
  padding: 0 !important;
}
/* Override Limitless table layout — conversion en flex pour sticky sidebar */
@media (min-width: 769px) {
  /* Limitless: .page-container = display:table, .page-content = display:table-row
     On casse les deux pour passer en flex normal */
  .page-container {
    display: block !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .page-header-content {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* .page-content est le parent direct du sidebar + content-wrapper → c'est ici que
     le flex doit vivre pour que position:sticky fonctionne */
  .page-content {
    display: flex !important;
    align-items: flex-start !important; /* indispensable : sans ça les enfants s'étirent et sticky ne joue plus */
    width: 100% !important;
  }
  /* Sidebar sticky */
  .sidebar {
    padding-right: 0 !important;
    flex-shrink: 0 !important;
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scrollbar-width: none !important;
  }
  .sidebar::-webkit-scrollbar {
    display: none !important;
  }
  /* content-wrapper sort du mode table-cell */
  .content-wrapper {
    flex: 1 !important;
    min-width: 0 !important;
    display: block !important;
  }
}
.content-wrapper {
  background: var(--jt-bg) !important;
  padding: 24px 28px !important;
}
/* Hide empty page-header */
.page-header {
  display: none !important;
}

/* ════════════════════════════════════════
   PANELS → Cards
════════════════════════════════════════ */
.panel {
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: var(--jt-radius) !important;
  box-shadow: var(--jt-shadow-sm) !important;
  overflow: visible !important;
}
.panel-heading {
  background: var(--jt-surface) !important;
  border-bottom: 1px solid var(--jt-border) !important;
  padding: 16px 22px !important;
  border-radius: calc(var(--jt-radius) - 1px) calc(var(--jt-radius) - 1px) 0 0 !important;
}
.panel-default > .panel-heading {
  background: var(--jt-surface-2) !important;
}
.panel-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--jt-text) !important;
  letter-spacing: -0.01em !important;
}
.panel-body {
  padding: 20px 22px !important;
}
.panel-footer {
  background: var(--jt-surface-2) !important;
  border-top: 1px solid var(--jt-border) !important;
  border-radius: 0 0 calc(var(--jt-radius) - 1px) calc(var(--jt-radius) - 1px) !important;
}

/* Detail table (contract show, etc.) */
.jt-detail-table th,
.jt-detail-table td {
  padding: 10px 0 !important;
  border-top: 1px solid var(--jt-border) !important;
  vertical-align: top !important;
  font-size: 13px !important;
}
.jt-detail-table tr:first-child th,
.jt-detail-table tr:first-child td {
  border-top: none !important;
}
.jt-detail-table th {
  font-weight: 500 !important;
  color: var(--jt-text-3) !important;
  padding-right: 16px !important;
}

.panel-primary > .panel-heading { background: var(--jt-accent) !important;       color: white !important;                  border-color: var(--jt-accent-hover) !important;  }
.panel-success > .panel-heading { background: var(--jt-accent-soft) !important;  color: var(--jt-accent-hover) !important; border-color: var(--jt-accent-border) !important; }
.panel-info > .panel-heading    { background: var(--jt-info-soft) !important;    color: var(--jt-info) !important;         border-color: oklch(82% 0.08 240) !important;     }
.panel-warning > .panel-heading { background: var(--jt-warn-soft) !important;    color: oklch(45% 0.16 50) !important;     border-color: var(--jt-warn-border) !important;   }
.panel-danger > .panel-heading  { background: var(--jt-danger-soft) !important;  color: var(--jt-danger) !important;       border-color: var(--jt-danger-border) !important; }

/* ════════════════════════════════════════
   BUTTONS
════════════════════════════════════════ */
.btn {
  border-radius: var(--jt-radius-sm) !important;
  font-family: var(--jt-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  transition: background 0.12s, border-color 0.12s !important;
  letter-spacing: -0.01em !important;
}
.btn-xs { font-size: 11px !important; padding: 4px 8px !important; }
.btn-sm { font-size: 12px !important; padding: 6px 10px !important; }
.btn-lg { font-size: 14px !important; padding: 10px 18px !important; }

.btn-primary {
  background: var(--jt-accent) !important;
  border-color: var(--jt-accent) !important;
  color: white !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.active {
  background: var(--jt-accent-hover) !important;
  border-color: var(--jt-accent-hover) !important;
  color: white !important;
}
.btn-success {
  background: var(--jt-accent) !important;
  border-color: var(--jt-accent) !important;
  color: white !important;
}
.btn-success:hover,
.btn-success:focus {
  background: var(--jt-accent-hover) !important;
  border-color: var(--jt-accent-hover) !important;
}
.btn-default {
  background: var(--jt-surface) !important;
  border-color: var(--jt-border) !important;
  color: var(--jt-text) !important;
}
.btn-default:hover,
.btn-default:focus {
  background: var(--jt-surface-2) !important;
  border-color: var(--jt-border-strong) !important;
  color: var(--jt-text) !important;
}
.btn-info {
  background: var(--jt-info-soft) !important;
  border-color: oklch(82% 0.08 240) !important;
  color: var(--jt-info) !important;
}
.btn-warning {
  background: var(--jt-warn-soft) !important;
  border-color: var(--jt-warn-border) !important;
  color: oklch(45% 0.16 50) !important;
}
.btn-danger {
  background: var(--jt-danger-soft) !important;
  border-color: var(--jt-danger-border) !important;
  color: var(--jt-danger) !important;
}
.btn-link {
  color: var(--jt-accent-hover) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
.btn-link:hover { color: var(--jt-accent) !important; background: transparent !important; }

/* Variantes Limitless */
.btn-flat     { box-shadow: none !important; }
.btn-rounded  { border-radius: 999px !important; }
.btn-icon     { padding: 6px !important; }

/* ════════════════════════════════════════
   TABLES
════════════════════════════════════════ */
.table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}
.table > thead > tr > th {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--jt-text-3) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  padding: 12px 16px !important;
  background: var(--jt-surface-2) !important;
  border-bottom: 1px solid var(--jt-border) !important;
  border-top: 1px solid var(--jt-border) !important;
  white-space: nowrap !important;
}
.table > tbody > tr > td {
  padding: 13px 16px !important;
  border-bottom: 1px solid var(--jt-border) !important;
  border-top: none !important;
  font-size: 13px !important;
  vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) > td {
  background: oklch(98.8% 0.003 140) !important;
}
.table-hover > tbody > tr:hover > td {
  background: var(--jt-surface-2) !important;
}
.table-bordered,
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border-color: var(--jt-border) !important;
}

/* ════════════════════════════════════════
   LABELS & BADGES
════════════════════════════════════════ */
.label {
  border-radius: 6px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  padding: 3px 7px !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
}
.label-default { background: var(--jt-surface-2) !important;  color: var(--jt-text-2) !important;       border: 1px solid var(--jt-border) !important; }
.label-primary { background: var(--jt-accent-soft) !important; color: var(--jt-accent-hover) !important; }
.label-success { background: var(--jt-accent-soft) !important; color: var(--jt-accent-hover) !important; }
.label-info    { background: var(--jt-info-soft) !important;   color: var(--jt-info) !important;         }
.label-warning { background: var(--jt-warn-soft) !important;   color: oklch(45% 0.16 50) !important;     }
.label-danger  { background: var(--jt-danger-soft) !important; color: var(--jt-danger) !important;       }
.label-flat    { border-radius: 3px !important; }

.badge {
  border-radius: 999px !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  padding: 2px 7px !important;
  background: var(--jt-accent) !important;
  color: white !important;
}
.badge-primary { background: var(--jt-accent) !important;      color: white !important; }
.badge-default { background: var(--jt-surface-2) !important;   color: var(--jt-text-2) !important; border: 1px solid var(--jt-border) !important; }

/* ════════════════════════════════════════
   FORMULAIRES
════════════════════════════════════════ */
.form-control {
  border-color: var(--jt-border) !important;
  border-radius: var(--jt-radius-sm) !important;
  color: var(--jt-text) !important;
  background: var(--jt-surface) !important;
  font-family: var(--jt-font) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  height: auto !important;
  transition: border-color 0.12s !important;
}
.form-control:focus {
  border-color: var(--jt-accent-border) !important;
  box-shadow: 0 0 0 3px var(--jt-accent-soft) !important;
  outline: none !important;
}
.form-control::-webkit-input-placeholder { color: var(--jt-text-3) !important; }
.form-control::placeholder { color: var(--jt-text-3) !important; }

.form-group label,
.control-label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--jt-text-2) !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 6px !important;
}
.input-group-addon {
  background: var(--jt-surface-2) !important;
  border-color: var(--jt-border) !important;
  color: var(--jt-text-2) !important;
}
.has-error .form-control  { border-color: var(--jt-danger-border) !important; }
.has-success .form-control { border-color: var(--jt-accent-border) !important; }
.has-error .help-block { color: var(--jt-danger) !important; }

/* Bouton tooltip ? — cercle parfait */
.help-pop {
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  vertical-align: middle !important;
  margin-left: 4px !important;
}

/* Icône de champ — addon droit inline, pas d'absolute positioning */
.jt-field-icon {
  background: transparent !important;
  border-left: none !important;
  color: var(--jt-text-3) !important;
  padding: 0 10px !important;
  font-size: 15px !important;
}
.has-error .jt-field-icon {
  border-color: var(--jt-danger-border) !important;
}
/* Input précédant l'icône : raccord sans double bordure */
.input-group > .form-control:not(:last-child) {
  border-right: none !important;
  border-radius: var(--jt-radius-sm) 0 0 var(--jt-radius-sm) !important;
}
.input-group > .input-group-addon.jt-field-icon:last-child {
  border-radius: 0 var(--jt-radius-sm) var(--jt-radius-sm) 0 !important;
}

/* ════════════════════════════════════════
   ONGLETS (tabs)
════════════════════════════════════════ */
.nav-tabs {
  border-bottom: 1px solid var(--jt-border) !important;
}
.nav-tabs > li > a {
  color: var(--jt-text-2) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  margin-bottom: -1px !important;
  background: transparent !important;
}
.nav-tabs > li > a:hover {
  background: transparent !important;
  color: var(--jt-text) !important;
  border-color: transparent transparent var(--jt-border-strong) !important;
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  color: var(--jt-accent-hover) !important;
  border-color: transparent transparent var(--jt-accent) !important;
  background: transparent !important;
}
.nav-tabs-justified.nav-tabs > li.active > a {
  border-bottom: 2px solid var(--jt-accent) !important;
}
.tab-content { padding-top: 16px !important; }

/* ── nav-tabs-highlight dans un panel-heading : segmented control ── */
.panel-heading .nav-tabs-highlight,
.panel-heading .nav-tabs-highlight.nav-tabs {
  border: none !important;
  border-bottom: none !important;
  display: flex !important;
  background: #f1f5f2 !important;
  border-radius: 8px !important;
  padding: 3px !important;
  gap: 2px !important;
  margin: 0 !important;
}
.panel-heading .nav-tabs-highlight > li {
  float: none !important;
  margin-bottom: 0 !important;
}
.panel-heading .nav-tabs-highlight > li > a,
.panel-heading .nav-tabs-highlight > li > a:focus {
  border: none !important;
  border-radius: 6px !important;
  padding: 5px 11px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #4a5568 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  white-space: nowrap !important;
}
.panel-heading .nav-tabs-highlight > li > a:hover {
  background: rgba(255,255,255,0.6) !important;
  color: #1a202c !important;
}
.panel-heading .nav-tabs-highlight > li.active > a,
.panel-heading .nav-tabs-highlight > li.active > a:hover,
.panel-heading .nav-tabs-highlight > li.active > a:focus {
  background: #ffffff !important;
  color: #2a7048 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
  border: none !important;
}
/* Badges inside the nav tabs */
.panel-heading .nav-tabs-highlight .badge {
  font-size: 10px !important;
  padding: 1px 6px !important;
  border-radius: 999px !important;
  min-width: 18px !important;
  text-align: center !important;
}
.panel-heading .nav-tabs-highlight .badge-primary {
  background: #3d8a60 !important;
  color: white !important;
}
.panel-heading .nav-tabs-highlight .badge-default {
  background: #e2e8f0 !important;
  color: #4a5568 !important;
  border: none !important;
}
/* heading-elements : laisser Limitless gérer le position:absolute,
   on neutralise juste le float résiduel et on laisse top:50% marcher */
.panel-heading {
  position: relative !important;
  overflow: visible !important;
}
.panel-heading .heading-elements {
  float: none !important;
}
/* Active tab : texte foncé (pas vert sur blanc) */
.panel-heading .nav-tabs-highlight > li.active > a,
.panel-heading .nav-tabs-highlight > li.active > a:hover,
.panel-heading .nav-tabs-highlight > li.active > a:focus {
  color: #1a202c !important;
}

/* ════════════════════════════════════════
   ALERTS
════════════════════════════════════════ */
.alert {
  border-radius: var(--jt-radius-sm) !important;
  font-size: 13px !important;
  padding: 12px 16px !important;
}
.alert-success { background: var(--jt-accent-soft) !important;  border-color: var(--jt-accent-border) !important; color: var(--jt-accent-hover) !important; }
.alert-info    { background: var(--jt-info-soft) !important;    border-color: oklch(82% 0.08 240) !important;     color: var(--jt-info) !important;         }
.alert-warning { background: var(--jt-warn-soft) !important;    border-color: var(--jt-warn-border) !important;   color: oklch(45% 0.16 50) !important;     }
.alert-danger  { background: var(--jt-danger-soft) !important;  border-color: var(--jt-danger-border) !important; color: var(--jt-danger) !important;       }

/* ════════════════════════════════════════
   DROPDOWNS
════════════════════════════════════════ */
.dropdown-menu {
  border: 1px solid var(--jt-border) !important;
  border-radius: var(--jt-radius-sm) !important;
  box-shadow: var(--jt-shadow-md) !important;
  padding: 4px !important;
  background: var(--jt-surface) !important;
  z-index: 9999 !important;
}
.dropdown-menu > li > a {
  color: var(--jt-text-2) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
}
.dropdown-menu > li > a:hover {
  background: var(--jt-surface-2) !important;
  color: var(--jt-text) !important;
}
.dropdown-menu > .active > a {
  background: var(--jt-accent-soft) !important;
  color: var(--jt-accent-hover) !important;
}
.dropdown-menu > .divider { background-color: var(--jt-border) !important; margin: 4px !important; }

/* ════════════════════════════════════════
   MODALS
════════════════════════════════════════ */
.modal-content {
  border-radius: var(--jt-radius) !important;
  border: 1px solid var(--jt-border) !important;
  box-shadow: var(--jt-shadow-md) !important;
}
.modal-header {
  background: var(--jt-surface) !important;
  border-bottom: 1px solid var(--jt-border) !important;
  padding: 16px 22px !important;
  border-radius: var(--jt-radius) var(--jt-radius) 0 0 !important;
}
.modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--jt-text) !important;
}
.modal-body { padding: 20px 22px !important; }
.modal-footer {
  background: var(--jt-surface-2) !important;
  border-top: 1px solid var(--jt-border) !important;
  border-radius: 0 0 var(--jt-radius) var(--jt-radius) !important;
}

/* ════════════════════════════════════════
   PAGINATION
════════════════════════════════════════ */
.pagination > li > a,
.pagination > li > span {
  color: var(--jt-text-2) !important;
  border-color: var(--jt-border) !important;
  background: var(--jt-surface) !important;
  font-size: 12.5px !important;
}
.pagination > li > a:hover {
  background: var(--jt-surface-2) !important;
  color: var(--jt-text) !important;
  border-color: var(--jt-border-strong) !important;
}
.pagination > .active > a,
.pagination > .active > span {
  background: var(--jt-accent) !important;
  border-color: var(--jt-accent) !important;
  color: white !important;
}
.pagination > .disabled > a,
.pagination > .disabled > span {
  color: var(--jt-text-3) !important;
}

/* ════════════════════════════════════════
   BREADCRUMB
════════════════════════════════════════ */
.breadcrumb {
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 12px !important;
  color: var(--jt-text-3) !important;
}
.breadcrumb a { color: var(--jt-text-2) !important; }
.breadcrumb > .active { color: var(--jt-text) !important; }
.breadcrumb > li + li::before { color: var(--jt-text-3) !important; }

/* ════════════════════════════════════════
   UTILITAIRES (surcharges Limitless)
════════════════════════════════════════ */
.text-primary  { color: var(--jt-accent-hover) !important; }
.text-success  { color: var(--jt-accent-hover) !important; }
.text-danger   { color: var(--jt-danger) !important; }
.text-warning  { color: var(--jt-warn) !important; }
.text-info     { color: var(--jt-info) !important; }
.text-muted    { color: var(--jt-text-3) !important; }
.text-semibold { font-weight: 600 !important; }

.bg-primary { background: var(--jt-accent) !important;      color: white !important;                  }
.bg-success { background: var(--jt-accent-soft) !important; color: var(--jt-accent-hover) !important; }
.bg-danger  { background: var(--jt-danger-soft) !important; color: var(--jt-danger) !important;       }
.bg-warning { background: var(--jt-warn-soft) !important;   color: oklch(45% 0.16 50) !important;     }
.bg-info    { background: var(--jt-info-soft) !important;   color: var(--jt-info) !important;         }

.border-primary { border-color: var(--jt-accent-border) !important; }
.border-success { border-color: var(--jt-accent-border) !important; }
.border-danger  { border-color: var(--jt-danger-border) !important; }
.border-warning { border-color: var(--jt-warn-border) !important;   }
.border-default { border-color: var(--jt-border) !important;        }
.border-slate   { border-color: var(--jt-border) !important;        }


/* ── Grille collaborateurs ── */
.jt-collab-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  float: none !important;
  margin: 0 !important;
}
/* Bootstrap .row::before/::after (clearfix) deviennent des cellules de grille — on les supprime */
.jt-collab-grid::before,
.jt-collab-grid::after {
  display: none !important;
}
@media (max-width: 991px) {
  .jt-collab-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 767px) {
  .jt-collab-grid { grid-template-columns: 1fr !important; }
}
.jt-collab-grid > [class*="col-"] {
  width: auto !important;
  float: none !important;
}

/* ════════════════════════════════════════
   COMPOSANTS JT — Dashboard & pages
════════════════════════════════════════ */

/* Page header */
.jt-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-top: 2px;
}
.jt-breadcrumb {
  font-size: 12px;
  color: var(--jt-text-3);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jt-breadcrumb .sep { opacity: 0.5; }
.jt-page-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--jt-text) !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

/* Cards */
.jt-card {
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  overflow: hidden;
  box-shadow: var(--jt-shadow-sm);
}
.jt-card-pad { padding: 20px 22px; }
.jt-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid var(--jt-border);
}
.jt-card-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jt-text);
}
.jt-card-title svg { width: 15px; height: 15px; color: var(--jt-text-3); flex-shrink: 0; }

/* Tabs */
.jt-tabs {
  display: inline-flex;
  background: var(--jt-surface-2);
  border: 1px solid var(--jt-border);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.jt-tab {
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--jt-text-2);
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}
.jt-tab:hover { color: var(--jt-text); text-decoration: none; }
.jt-tab.active {
  background: var(--jt-surface);
  color: var(--jt-text);
  box-shadow: var(--jt-shadow-xs), 0 0 0 1px var(--jt-border);
  font-weight: 600;
}
.jt-tab-count {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  color: var(--jt-text-3);
  font-weight: 600;
}
.jt-tab.active .jt-tab-count {
  background: var(--jt-accent);
  color: white;
  border-color: transparent;
}

/* Badges */
.jt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.jt-badge.draft    { background: var(--jt-surface-2);    color: var(--jt-text-2);             border: 1px solid var(--jt-border); }
.jt-badge.signed   { background: var(--jt-accent-soft);  color: var(--jt-accent-hover);        }
.jt-badge.warn     { background: var(--jt-warn-soft);    color: oklch(45% 0.16 50);            border: 1px solid var(--jt-warn-border); }
.jt-badge.danger   { background: var(--jt-danger-soft);  color: var(--jt-danger);              border: 1px solid var(--jt-danger-border); }
.jt-badge.info     { background: var(--jt-info-soft);    color: var(--jt-info);                }
.jt-badge.success  { background: var(--jt-accent-soft);  color: var(--jt-accent-hover);        }

/* List rows */
.jt-list-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  padding: 12px 22px;
  border-top: 1px solid var(--jt-border);
  align-items: center;
  color: inherit;
  text-decoration: none;
}
.jt-list-row:hover { background: var(--jt-surface-2); text-decoration: none; }
.jt-list-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--jt-text);
}
.jt-list-meta {
  margin-top: 4px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 12px;
  color: var(--jt-text-3);
}
.jt-list-meta .item {
  display: flex;
  align-items: center;
  gap: 5px;
}
.jt-list-meta .item svg { width: 12px; height: 12px; opacity: 0.7; flex-shrink: 0; }
.jt-list-side {
  font-size: 12px;
  color: var(--jt-text-3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.jt-list-pill {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--jt-surface-2);
  color: var(--jt-text-2);
  border: 1px solid var(--jt-border);
}

/* Hero commission */
.jt-hero {
  background: linear-gradient(135deg, var(--jt-accent), oklch(48% 0.13 168));
  color: white;
  border-radius: var(--jt-radius-lg);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 8px 24px -8px oklch(58% 0.13 158 / 0.4);
}
.jt-hero::before {
  content: "";
  position: absolute; right: -30px; top: -30px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle at center, oklch(100% 0 0 / 0.12), transparent 70%);
  pointer-events: none;
}
.jt-hero-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  font-weight: 600;
}
.jt-hero-value {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.jt-hero-value .unit { font-size: 15px; font-weight: 500; opacity: 0.85; margin-left: 4px; }
.jt-hero-meta {
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.9;
}
.jt-hero-actions {
  position: absolute; top: 16px; right: 16px;
  display: flex; gap: 6px;
}

/* Stat cards */
.jt-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.jt-stat {
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  padding: 14px 16px;
  box-shadow: var(--jt-shadow-xs);
}
.jt-stat-label {
  font-size: 12px;
  color: var(--jt-text-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.jt-stat-label svg { width: 13px; height: 13px; flex-shrink: 0; }
.jt-stat-value {
  font-size: 26px;
  font-weight: 700;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--jt-text);
}

/* Empty state */
.jt-empty {
  padding: 48px 24px;
  text-align: center;
  color: var(--jt-text-3);
}
.jt-empty-icon {
  width: 44px; height: 44px;
  background: var(--jt-accent-softer);
  border-radius: 12px;
  display: grid; place-items: center;
  margin: 0 auto 14px;
  color: var(--jt-accent);
  border: 1px solid var(--jt-accent-border);
}
.jt-empty-icon svg { width: 20px; height: 20px; }
.jt-empty-title { font-size: 15px; font-weight: 600; color: var(--jt-text); margin-bottom: 6px; }
.jt-empty-text { font-size: 13px; max-width: 360px; margin: 0 auto 16px; line-height: 1.5; color: var(--jt-text-3); }
.jt-empty-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--jt-accent);
  color: white; font-weight: 600; font-size: 13px;
  border: none; cursor: pointer;
  box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08);
  transition: background 0.12s;
}
.jt-empty-cta svg { width: 14px; height: 14px; flex-shrink: 0; }
.jt-empty-cta:hover { background: var(--jt-accent-hover); color: white; text-decoration: none; }

/* Buttons (new component style) */
.jt-btn {
  width: auto;
  padding: 8px 14px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-family: var(--jt-font);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.12s;
  text-decoration: none;
  white-space: nowrap;
}
.jt-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.jt-btn-primary { background: var(--jt-accent); color: white !important; box-shadow: 0 1px 2px oklch(0% 0 0 / 0.08); }
.jt-btn-primary:hover { background: var(--jt-accent-hover); color: white !important; text-decoration: none; }
.jt-btn-outline { background: var(--jt-surface); color: var(--jt-text) !important; border-color: var(--jt-border); }
.jt-btn-outline:hover { background: var(--jt-surface-2); color: var(--jt-text) !important; text-decoration: none; }

/* Row action button */
.jt-row-btn {
  width: 28px; height: 28px;
  border-radius: 6px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--jt-text-3);
  background: transparent;
  border: 1px solid transparent;
  text-decoration: none;
}
.jt-row-btn svg { width: 14px; height: 14px; }
.jt-row-btn:hover { background: var(--jt-surface-2); border-color: var(--jt-border); color: var(--jt-text); text-decoration: none; }

/* Link */
.jt-link {
  color: var(--jt-accent-hover);
  font-weight: 600;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
}
.jt-link:hover { text-decoration: underline; color: var(--jt-accent); }
.jt-link svg { width: 13px; height: 13px; }

/* Inline alerts */
.jt-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 16px;
  border-radius: var(--jt-radius-sm);
  font-size: 13px;
  line-height: 1.5;
  border: 1px solid;
}
.jt-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }
.jt-alert-info { background: var(--jt-info-soft); border-color: oklch(82% 0.08 240); color: var(--jt-info); }
.jt-alert-warn { background: var(--jt-warn-soft); border-color: var(--jt-warn-border); color: oklch(45% 0.16 50); }

/* Action row inside alert card */
.jt-action-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--jt-border);
  font-size: 13px;
  color: var(--jt-text-2);
}
.jt-action-row:last-child { border-bottom: none; padding-bottom: 0; }

/* Dashboard 2-column grid */
.jt-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 20px;
  align-items: start;
}

/* Collab cards */
.jt-collab-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--jt-border);
  background: var(--jt-surface);
}
.jt-collab-status {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.jt-collab-status--available   { background: var(--jt-text-3); }
.jt-collab-status--in-progress { background: var(--jt-accent); }
.jt-collab-status--renewable   { background: var(--jt-warn); }
.jt-collab-status--soon        { background: var(--jt-info); }
.jt-collab-body { flex: 1; min-width: 0; }
.jt-collab-name {
  font-size: 13px; font-weight: 600;
  color: var(--jt-text); text-decoration: none;
  display: block;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jt-collab-name:hover { color: var(--jt-accent-hover); }
.jt-collab-meta { font-size: 11.5px; color: var(--jt-text-3); }

/* ============================================================
   Dashboard Bootstrap panel overrides
   ============================================================ */

/* Stat cards (panel-stat) */
.panel.panel-stat {
  border: 1px solid var(--jt-border) !important;
  border-radius: var(--jt-radius) !important;
  box-shadow: var(--jt-shadow-xs) !important;
  background: var(--jt-surface) !important;
}
.panel.panel-stat .panel-body {
  padding: 16px 18px !important;
}
.panel.panel-stat .stat-label {
  font-size: 12px;
  color: var(--jt-text-3);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.panel.panel-stat .stat-label i {
  font-size: 13px;
  opacity: 0.7;
}
.panel.panel-stat .stat-value {
  font-size: 28px;
  font-weight: 700;
  margin-top: 6px;
  color: var(--jt-text);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* Commission hero card (panel-commission) */
.panel.panel-commission {
  background: linear-gradient(135deg, #3d8a60, #1e5c3a) !important;
  border: none !important;
  border-radius: var(--jt-radius) !important;
  box-shadow: 0 8px 24px -8px rgba(30, 92, 58, 0.4) !important;
  color: white !important;
  position: relative;
  overflow: hidden !important;
}
.panel.panel-commission::before {
  content: "";
  position: absolute;
  right: -30px;
  top: -30px;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.12), transparent 70%);
  pointer-events: none;
}
.panel.panel-commission .panel-body {
  padding: 20px 22px !important;
  position: relative;
  z-index: 1;
}
.panel.panel-commission .commission-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.85;
  font-weight: 600;
  margin: 0 0 6px;
}
.panel.panel-commission .commission-value {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: white !important;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.panel.panel-commission .commission-value small {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.85;
  color: white !important;
}
.panel.panel-commission .commission-label {
  color: rgba(255,255,255,0.85) !important;
}
.panel.panel-commission .text-size-small {
  color: rgba(255,255,255,0.85) !important;
}

/* Panel heading reset for dashboard panels */
.panel.panel_contracts .panel-heading,
.panel.panel_offers .panel-heading,
.panel.panel-warning .panel-heading {
  background: var(--jt-surface);
  border-bottom: 1px solid var(--jt-border);
  padding: 12px 16px;
  border-radius: var(--jt-radius) var(--jt-radius) 0 0;
}

/* Dashboard alert panel — spacing driven by the H3 above (margin-bottom),
   so we keep only a bottom margin here to avoid stacking margins. */
.panel.panel-warning {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}
.panel.panel-warning > .table,
.panel.panel-warning > .table:last-child {
  margin-bottom: 0 !important;
}
.panel.panel_contracts .panel-title,
.panel.panel_offers .panel-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--jt-text);
}
.panel.panel_contracts .panel-title i,
.panel.panel_offers .panel-title i {
  margin-right: 6px;
  opacity: 0.6;
}
.panel.panel_contracts,
.panel.panel_offers {
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  box-shadow: var(--jt-shadow-xs);
  background: var(--jt-surface);
}

/* Page header row on dashboard */
.jt-page-header-row {
  margin-bottom: 20px;
}
.jt-page-header-row h4 {
  font-size: 18px;
  font-weight: 700;
  color: var(--jt-text);
  margin: 0 0 4px;
}
.jt-page-header-row .text-muted {
  font-size: 13px;
}


/* ════════════════════════════════════════
   FOOTER
════════════════════════════════════════ */
/* Bootstrap .navbar-fixed-bottom = position:fixed left:0 right:0 — on écrase
   pour que le footer reste dans le flow du content-wrapper */
/* content-wrapper en flex column + min-height pour coller le footer en bas */
.content-wrapper {
  display: flex !important;
  flex-direction: column !important;
  min-height: calc(100vh - 68px) !important; /* 68px = hauteur navbar */
}
.footer.navbar-fixed-bottom {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  z-index: auto !important;
  border-top: 1px solid var(--jt-border) !important;
  border-radius: 0 !important;
  background: var(--jt-surface) !important;
  box-shadow: none !important;
  margin: auto -28px -24px -28px !important; /* compense padding content-wrapper (28px LR, 24px bottom) */
  padding-left: 28px !important;
  padding-right: 28px !important;
}
/* Bootstrap ajoute padding-bottom au body pour le footer fixe — on reset */
body {
  padding-bottom: 0 !important;
}

/* ════════════════════════════════════════════════════════════════════════════
   POLISH : page contrôle conformité (Manage/show.html.twig) — CSS-only
   Override des styles inline du template via !important.
═══════════════════════════════════════════════════════════════════════════ */

/* Sections de conformité : remplace le fond gris #EEE inline par une carte propre */
.conformity-section {
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: var(--jt-radius) !important;
  padding: 24px 24px 16px !important;
  margin: 16px 0 24px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.03);
}

/* Boîtes documents (carte vitale, RIB, identité, etc.) */
.embed_certificate,
.embed_diploma,
.embed_document {
  background: var(--jt-surface) !important;
  border: 1px solid var(--jt-border) !important;
  border-radius: var(--jt-radius-sm) !important;
  padding: 12px !important;
  margin: 8px 0 !important;
  height: auto !important;
  max-height: none !important;
  transition: border-color .12s, box-shadow .12s;
}
.embed_certificate:hover,
.embed_diploma:hover,
.embed_document:hover {
  border-color: var(--jt-accent-border) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}

/* Headers de section dans .form_row : transforme le h4 dans label
   en titre de section propre */
.form_row > label.display-block.text-semibold > h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--jt-text) !important;
  margin: 0 0 12px !important;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--jt-border);
  position: relative;
}
.form_row > label.display-block.text-semibold > h4 sup {
  color: var(--jt-accent) !important;
  font-weight: 400 !important;
}
.form_row > label.display-block.text-semibold > h4 .conformity {
  position: absolute;
  right: 0;
  top: -4px;
}

/* Conformity status icons : on cap la taille à 20px max (inline 25px sinon) */
.conformity > i.icon-checkmark-circle,
.conformity > i.icon-cancel-circle2,
.conformity > i.icon-hour-glass2 {
  font-size: 20px !important;
  vertical-align: middle;
}

/* ════════════════════════════════════════════════════════════════════════════
   POLISH : pages liste/recherche (conformity, paysheets…) — CSS-only
═══════════════════════════════════════════════════════════════════════════ */

/* Tableaux : hover doux, padding aéré */
.panel-flat .table > tbody > tr {
  transition: background .12s;
}
.panel-flat .table > tbody > tr:hover {
  background: var(--jt-surface-2);
}
.panel-flat .table > tbody > tr > td,
.panel-flat .table > thead > tr > th {
  padding: 12px !important;
  vertical-align: middle;
}
.panel-flat .table > thead > tr > th {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--jt-text-3) !important;
  border-bottom: 1px solid var(--jt-border) !important;
}

/* Status icons (cercles verts btn-flat btn-rounded btn-icon) dans les tableaux :
   on les réduit pour ne pas dévorer la rangée */
.panel-flat .table .btn-flat.btn-rounded.btn-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  padding: 0 !important;
  line-height: 30px !important;
  font-size: 13px !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.panel-flat .table .btn-flat.btn-rounded.btn-icon i {
  font-size: 14px !important;
}

/* Labels "NON ÉDITÉ" / chips d'info dans les colonnes : look pill propre */
.panel-flat .table .label-flat {
  display: inline-block;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .02em;
  border: 1px solid var(--jt-border) !important;
}

/* Bordure left du td référence pour visual hook (souvent en gris léger) */
.panel-flat .table .active.border-double td,
.panel-flat .table .active.border-double th {
  background: var(--jt-surface-2) !important;
  font-weight: 600 !important;
  color: var(--jt-text-2) !important;
  font-size: 12px !important;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* Form de recherche : labels plus légers, plus aérés */
.form_row > .control-label {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--jt-text-2) !important;
  margin-bottom: 6px !important;
}
.form_row {
  margin-bottom: 0 !important;
}

/* Bouton "Chercher" : éviter qu'il colle au label invisible */
.form-group + .form-group { margin-top: 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   PUBLIC SIGN PAGE — Contrat de mise à disposition
   Scope strict : tout sous `.jt-sign-page` ou body.jt-sign-public-page.
═══════════════════════════════════════════════════════════════════════════ */
body.jt-sign-public-page .content-wrapper {
  padding: 0 !important;
}
body.jt-sign-public-page {
  background: var(--jt-surface-2) !important;
}
/* On masque la navbar du layout anonyme : on rend la nôtre dans le contenu */
body.jt-sign-public-page > .navbar {
  display: none !important;
}

/* Navbar custom — alignée pixel par pixel avec .jt-sign-toolbar en dessous */
.jt-sign-navbar {
  background: var(--jt-surface);
  border-bottom: 1px solid var(--jt-border);
  padding: 12px 20px;
}
@media (min-width: 768px) {
  .jt-sign-navbar { padding: 14px 32px; }
}
.jt-sign-navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.jt-sign-navbar-brand {
  display: inline-block;
  text-decoration: none;
}
.jt-sign-navbar-brand img {
  display: block;
  height: 32px;
  width: auto;
}
@media (min-width: 768px) {
  .jt-sign-navbar-brand img { height: 36px; }
}
.jt-sign-page {
  display: flex;
  flex-direction: column;
}

/* ── Toolbar (header blanc plein écran sous la navbar) ── */
.jt-sign-toolbar {
  background: var(--jt-surface);
  border-bottom: 1px solid var(--jt-border);
  padding: 16px 20px;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.jt-sign-toolbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
@media (min-width: 768px) {
  .jt-sign-toolbar { padding: 18px 32px; }
  .jt-sign-toolbar-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}
.jt-sign-toolbar-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.jt-sign-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  background: var(--jt-accent-softer);
  color: var(--jt-accent);
  border: 1px solid var(--jt-accent-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  width: fit-content;
  letter-spacing: .02em;
}
.jt-sign-eyebrow i { font-size: 12px; }
.jt-sign-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--jt-text);
  margin: 4px 0 2px;
  line-height: 1.2;
}
@media (min-width: 768px) {
  .jt-sign-title { font-size: 20px; }
}
.jt-sign-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  font-size: 12px;
  color: var(--jt-text-3);
}
.jt-sign-meta i { font-size: 11px; margin-right: 3px; opacity: .7; }
.jt-sign-meta .jt-sep { opacity: .4; margin: 0 6px; }
.jt-sign-meta strong { color: var(--jt-text-2); font-weight: 600; }
.jt-sign-download {
  flex-shrink: 0;
  align-self: flex-start;
  white-space: nowrap;
}
@media (max-width: 575px) {
  .jt-sign-download span { display: none; } /* icône seule en très petit mobile */
}

/* ── Body : 2-col Bootstrap, stretch hauteur ── */
.jt-sign-body {
  padding: 16px;
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}
@media (min-width: 768px) {
  .jt-sign-body { padding: 20px 24px; }
}
@media (min-width: 992px) {
  /* Row en flex pour stretch des cols (hauteur égale) */
  .jt-sign-row {
    display: flex;
    align-items: stretch;
    min-height: calc(100vh - 200px);
  }
  .jt-sign-row > [class^="col-"] {
    display: flex;
    flex-direction: column;
  }
}

/* Instructions (dans la carte signature) */
.jt-sign-instructions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: var(--jt-accent-softer);
  border: 1px solid var(--jt-accent-border);
  border-radius: var(--jt-radius-sm);
  padding: 10px 12px;
  font-size: 12.5px;
  color: var(--jt-text-2);
  margin: 0;
  line-height: 1.5;
}
.jt-sign-instructions i {
  flex-shrink: 0;
  color: var(--jt-accent);
  font-size: 14px;
  margin-top: 1px;
}

/* PDF doc — fill col-md-8 height */
.jt-sign-doc {
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  flex: 1;
  display: flex;
  margin-bottom: 16px;
}
@media (min-width: 992px) {
  .jt-sign-doc { margin-bottom: 0; }
}
.jt-sign-doc #viewer {
  display: block;
  width: 100%;
  height: 70vh;
  min-height: 500px;
  border: none;
  background: #2a2a2a;
  flex: 1;
}
@media (min-width: 992px) {
  .jt-sign-doc #viewer { height: 100%; min-height: 0; }
}

/* Flash messages déplacés dans .jt-sign-body via JS */
.jt-sign-body .jt-sign-flash {
  margin-bottom: 20px;
  border-radius: var(--jt-radius-sm);
}

/* Info col (left) — page wizard candidat */
.jt-sign-info-card { gap: 18px; }
.jt-sign-info-card .jt-sign-card-head { padding-bottom: 14px; }

.jt-sign-intro {
  font-size: 13.5px;
  color: var(--jt-text-2);
  line-height: 1.6;
  margin: 0;
}
.jt-sign-intro p { margin: 0 0 8px; }
.jt-sign-intro p:last-child { margin-bottom: 0; }
.jt-sign-intro strong { color: var(--jt-text); font-weight: 600; }

.jt-sign-section-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--jt-text-3);
  border-top: 1px solid var(--jt-border);
  padding-top: 14px;
  margin-top: 4px;
}

.jt-sign-summary { font-size: 13px; margin-bottom: 0 !important; }
.jt-sign-summary th { width: 38%; color: var(--jt-text-3) !important; font-weight: 500 !important; }
.jt-sign-summary td { color: var(--jt-text) !important; }

.jt-sign-contact {
  background: var(--jt-surface-2);
  border-radius: var(--jt-radius-sm);
  padding: 14px 16px;
  font-size: 12.5px;
  color: var(--jt-text-2);
  line-height: 1.5;
}
.jt-sign-contact-title {
  font-weight: 600;
  color: var(--jt-text);
  margin-bottom: 6px;
  font-size: 13px;
}
.jt-sign-contact p { margin: 0 0 4px; }
.jt-sign-contact p:last-child { margin-bottom: 0; }
.jt-sign-contact a { color: var(--jt-accent); font-weight: 500; }
.jt-sign-contact a:hover { color: var(--jt-accent-hover); text-decoration: underline; }

/* Form card (right) — wizard candidat */
.jt-sign-form-card .wizard .content { padding: 0; }
.jt-sign-required-note {
  font-size: 11px;
  color: var(--jt-text-3);
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--jt-border);
}
.jt-sign-required-note sup { color: var(--jt-accent); }

/* Confirm card (signed) — centre vertical du hero dans la carte stretch */
.jt-sign-confirm-card { justify-content: center; }
.jt-sign-confirm-cta {
  margin-top: 12px;
  text-decoration: none !important;
}
.jt-sign-confirm-cta:hover { text-decoration: none !important; }

/* Bill confirm (full-width centered card, no col split) */
.jt-bill-confirm-card {
  max-width: 600px;
  margin: 32px auto;
}
.jt-bill-confirm-foot {
  font-size: 12px;
  color: var(--jt-text-3);
  margin: 16px 0 0;
}

/* Bill stepper (mode multi-factures) */
.jt-bill-stepper {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
  padding-bottom: 8px;
}
.jt-bill-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--jt-border);
  border-radius: 999px;
  background: var(--jt-surface);
  font-size: 12px;
  color: var(--jt-text-3);
}
.jt-bill-step.is-current {
  border-color: var(--jt-accent);
  background: var(--jt-accent-softer);
  color: var(--jt-accent);
  font-weight: 600;
}
.jt-bill-step.is-done {
  border-color: var(--jt-accent-border);
  background: var(--jt-surface);
  color: var(--jt-text-2);
}
.jt-bill-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--jt-surface-2);
  font-weight: 600;
  font-size: 11px;
}
.jt-bill-step.is-current .jt-bill-step-num {
  background: var(--jt-accent);
  color: #fff;
}
.jt-bill-step.is-done .jt-bill-step-num {
  background: var(--jt-accent-soft);
  color: var(--jt-accent);
}
.jt-bill-step-label small { opacity: .6; margin-left: 4px; }

/* Success state */
.jt-sign-success {
  text-align: center;
  padding: 40px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.jt-sign-success-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--jt-accent-soft);
  color: var(--jt-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
}
.jt-sign-success h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--jt-text);
  margin: 0;
}
.jt-sign-success p {
  font-size: 14px;
  color: var(--jt-text-2);
  margin: 0;
  max-width: 380px;
}

/* Signature card — stretch full height en col-md-4 */
.jt-sign-side-col .jt-sign-form { flex: 1; display: flex; }
.jt-sign-card {
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.04);
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
@media (min-width: 768px) {
  .jt-sign-card { padding: 24px; }
}
/* Le bouton CTA est poussé en bas de la carte sur desktop */
@media (min-width: 992px) {
  .jt-sign-card .jt-sign-actions { margin-top: auto; }
}
.jt-sign-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--jt-border);
}
.jt-sign-card-head > i {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--jt-accent-soft);
  color: var(--jt-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}
.jt-sign-card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--jt-text);
}
.jt-sign-card-sub {
  font-size: 12px;
  color: var(--jt-text-3);
  margin-top: 2px;
}

/* Signature pad */
.jt-sign-pad-wrap {
  position: relative;
  background: var(--jt-surface-2);
  border: 2px dashed var(--jt-border-strong);
  border-radius: var(--jt-radius-sm);
  padding: 8px;
  margin: 0;
}
.jt-sign-pad-wrap canvas {
  display: block;
  width: 100%;
  height: 200px;
  max-width: 100%;
  background: var(--jt-surface);
  border-radius: 4px;
  cursor: crosshair;
  touch-action: none;
}
@media (min-width: 768px) {
  .jt-sign-pad-wrap canvas { height: 220px; }
}
.jt-sign-clear {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: 50%;
  color: var(--jt-text-2);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.jt-sign-clear:hover {
  background: var(--jt-surface-2);
  color: var(--jt-danger, #c0392b);
  border-color: var(--jt-danger-border, #e57373);
  text-decoration: none;
}
.jt-sign-clear i { font-size: 14px; }
.canvas_error {
  display: block;
  margin-top: 6px;
  font-size: 13px;
  color: #c0392b;
  font-weight: 500;
}

/* Consent checkbox row (re-styling du form_row natif) */
.jt-sign-page .jt-sign-consent .form_row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--jt-surface-2);
  border-radius: var(--jt-radius-sm);
  margin: 0;
}
.jt-sign-page .jt-sign-consent .form_row label {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--jt-text);
  font-weight: 400;
  line-height: 1.5;
}
.jt-sign-page .jt-sign-consent .form_row input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
}
.jt-sign-page .jt-sign-consent .form_row a {
  color: var(--jt-accent);
  font-weight: 600;
  text-decoration: none;
}
.jt-sign-page .jt-sign-consent .form_row a:hover { text-decoration: underline; }
.jt-sign-page .jt-sign-consent .checker { display: none; }

/* CTA */
.jt-sign-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
@media (min-width: 768px) {
  .jt-sign-actions { flex-direction: row; justify-content: flex-end; }
}
.jt-sign-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 0 28px;
  border-radius: var(--jt-radius-sm);
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  background: var(--jt-accent);
  color: #fff;
  width: 100%;
  transition: background .15s;
}
@media (min-width: 768px) {
  .jt-sign-cta { width: auto; min-width: 240px; }
}
.jt-sign-cta:hover { background: var(--jt-accent-hover); color: #fff; }
.jt-sign-cta i { font-size: 13px; }

/* Empty state */
.jt-sign-empty {
  text-align: center;
  padding: 60px 20px;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
}
.jt-sign-empty > i {
  font-size: 40px;
  color: var(--jt-text-3);
  margin-bottom: 16px;
  display: inline-block;
}
.jt-sign-empty h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 8px;
}
.jt-sign-empty p {
  color: var(--jt-text-2);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
   AUTH PAGE (login) — design2026
   Scope strict : tout est sous `body.jt-auth-page` pour ne pas impacter
   les autres pages utilisant anonymous_layout (registration, resetting…).
════════════════════════════════════════════════════════════════════════════ */
body.jt-auth-page {
  background: var(--jt-surface) !important;
  padding: 0 !important;
  margin: 0 !important;
}
/* Hide layout chrome on auth page only */
body.jt-auth-page > .navbar,
body.jt-auth-page > nav.navbar,
body.jt-auth-page .page-header,
body.jt-auth-page > footer,
body.jt-auth-page > .footer,
body.jt-auth-page .footer.navbar-fixed-bottom {
  display: none !important;
}
body.jt-auth-page .page-container,
body.jt-auth-page .page-content,
body.jt-auth-page .content-wrapper {
  display: block !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  min-height: 100vh !important;
  width: 100% !important;
  max-width: none !important;
}

/* ── Layout ── */
.jt-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  width: 100%;
}
@media (max-width: 991px) {
  .jt-auth { grid-template-columns: 1fr; }
  .jt-auth-brand { display: none; }
}

/* ── Brand pane ── */
.jt-auth-brand {
  background: #0f2018;
  background-image:
    linear-gradient(135deg, #0f2018 0%, #102a1d 100%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: cover, 28px 28px, 28px 28px;
  background-blend-mode: normal, overlay, overlay;
  color: #e6f0ea;
  padding: 40px 56px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Logo en haut naturellement, mid section centrée verticalement
   via margin auto qui absorbe l'espace disponible */
.jt-auth-brand-mid {
  margin: auto 0;
}
.jt-auth-brand::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(900px 600px at 20% 20%, rgba(61,138,96,.18), transparent 70%);
  pointer-events: none;
}
.jt-auth-brand > * { position: relative; z-index: 1; }

.jt-auth-brand-logo {
  display: inline-block;
  text-decoration: none;
}
.jt-auth-brand-logo img {
  height: 40px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.jt-auth-brand-mid { display: flex; flex-direction: column; gap: 18px; max-width: 540px; }

.jt-auth-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  color: #d3e3d8;
  width: fit-content;
  background: rgba(255,255,255,.03);
}
.jt-auth-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #4eaa78;
  box-shadow: 0 0 0 3px rgba(78,170,120,.25);
}
.jt-auth-headline {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff !important;
  margin: 0;
}
.jt-auth-headline em {
  font-style: normal;
  color: #7ac49a !important;
}
.jt-auth-sub {
  font-size: 15px;
  line-height: 1.5;
  color: #c0d2c6;
  margin: 0;
  max-width: 480px;
}

.jt-auth-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  max-width: 480px;
}
.jt-auth-stat-v {
  font-size: 28px;
  font-weight: 700;
  color: #7ac49a;
  letter-spacing: -0.02em;
}
.jt-auth-stat-l {
  font-size: 12px;
  color: #b1c4b8;
  margin-top: 4px;
  line-height: 1.3;
}

/* Quote card — masquée pour l'instant */
.jt-auth-brand-bot { display: none; }
.jt-auth-quote {
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  padding: 20px 22px;
  max-width: 540px;
}
.jt-auth-quote-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: #d3e3d8;
  margin-bottom: 14px;
  font-style: italic;
}
.jt-auth-quote-author {
  display: flex;
  align-items: center;
  gap: 12px;
}
.jt-auth-quote-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #4eaa78, #2f7a52);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}
.jt-auth-quote-name { font-weight: 600; font-size: 13px; color: #fff; }
.jt-auth-quote-role { font-size: 12px; opacity: 0.7; }

/* ── Form pane ── */
.jt-auth-form-pane {
  background: var(--jt-surface);
  padding: 32px 56px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.jt-auth-topnav { margin-bottom: 24px; }
.jt-auth-link-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--jt-text-2);
  font-size: 13px;
  text-decoration: none;
}
.jt-auth-link-back i { font-size: 12px; }
.jt-auth-link-back:hover { color: var(--jt-accent); text-decoration: none; }

.jt-auth-form {
  width: 100%;
  max-width: 380px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.jt-auth-form-head { margin-bottom: 8px; }
.jt-auth-form-head h2 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.02em;
  color: var(--jt-text);
}
.jt-auth-form-head p {
  font-size: 14px;
  color: var(--jt-text-2);
  margin: 0;
}

.jt-auth-alert {
  border-radius: var(--jt-radius-sm);
  margin: 0;
  padding: 10px 14px;
  font-size: 13px;
}

.jt-auth-field { display: flex; flex-direction: column; gap: 6px; }
.jt-auth-field label {
  font-size: 13px;
  font-weight: 500;
  color: var(--jt-text);
  margin: 0;
}
.jt-auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.jt-auth-link-sub {
  font-size: 12px;
  color: var(--jt-accent);
  text-decoration: none;
}
.jt-auth-link-sub:hover { color: var(--jt-accent-hover); text-decoration: underline; }

.jt-auth-input {
  position: relative;
  display: flex;
  align-items: center;
}
.jt-auth-input input {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  color: var(--jt-text);
  transition: border-color .15s, box-shadow .15s;
}
.jt-auth-input input:focus {
  outline: none;
  border-color: var(--jt-accent);
  box-shadow: 0 0 0 3px var(--jt-accent-soft);
}
.jt-auth-input-trailing {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--jt-text-3);
  cursor: pointer;
  border-radius: 6px;
}
.jt-auth-input-trailing:hover { color: var(--jt-text); background: var(--jt-surface-2); }

/* Checkbox */
.jt-auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  margin: 0;
  font-weight: 400;
  user-select: none;
}
.jt-auth-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.jt-auth-check-box {
  width: 18px; height: 18px;
  border: 1px solid var(--jt-border-strong);
  border-radius: 5px;
  background: var(--jt-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all .15s;
  position: relative;
}
.jt-auth-check input:checked + .jt-auth-check-box {
  background: var(--jt-accent);
  border-color: var(--jt-accent);
}
.jt-auth-check input:checked + .jt-auth-check-box::after {
  content: '';
  width: 5px; height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}
.jt-auth-check-label { font-size: 13px; color: var(--jt-text-2); }

/* CTA */
.jt-auth-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  background: var(--jt-accent);
  color: #fff;
  border: none;
  border-radius: var(--jt-radius-sm);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  margin-top: 4px;
}
.jt-auth-cta:hover { background: var(--jt-accent-hover); color: #fff; }
.jt-auth-cta i { font-size: 13px; }

.jt-auth-foot {
  font-size: 13px;
  color: var(--jt-text-2);
  text-align: center;
  margin-top: 4px;
}
.jt-auth-link-strong {
  color: var(--jt-accent);
  font-weight: 600;
  text-decoration: none;
}
.jt-auth-link-strong:hover { color: var(--jt-accent-hover); text-decoration: underline; }

.jt-auth-legal {
  font-size: 11px;
  color: var(--jt-text-3);
  text-align: center;
  padding-top: 24px;
}
.jt-auth-legal a { color: var(--jt-text-3); }
.jt-auth-legal a:hover { color: var(--jt-accent); text-decoration: underline; }

@media (max-width: 575px) {
  .jt-auth-form-pane { padding: 20px 20px 16px; }
  .jt-auth-form { gap: 14px; }
  .jt-auth-form-head h2 { font-size: 24px; }
}

/* Info card dans le form (resetting / check-email / passwordAlreadyRequested) */
.jt-auth-info-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--jt-accent-softer);
  border: 1px solid var(--jt-accent-border);
  border-radius: var(--jt-radius-sm);
  font-size: 13px;
  color: var(--jt-text-2);
  line-height: 1.5;
}
.jt-auth-info-card > i {
  color: var(--jt-accent);
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}
.jt-auth-info-card strong { color: var(--jt-text); display: block; margin-bottom: 4px; }
.jt-auth-info-card p { margin: 0; }

/* CTA en <a> (pages checkEmail / passwordAlreadyRequested) — texte blanc forcé
   (sinon .content-wrapper a override en vert sur vert) */
.jt-auth-cta-link,
.jt-auth-cta-link:hover,
.jt-auth-cta-link:focus,
.jt-auth-cta-link:visited {
  color: #fff !important;
  text-decoration: none !important;
}

/* ── Registration extras ── */

/* Features list (brand pane) */
.jt-auth-features {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jt-auth-features li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #d3e3d8;
}
.jt-auth-feature-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ac49a;
  flex-shrink: 0;
}

/* Wider form pane for register (more fields) */
.jt-auth-form-pane--wide { padding: 32px 64px 24px; }
.jt-auth-form--register {
  max-width: 720px;
  margin: 0 auto;
  width: 100%;
}

/* Topnav with stepper */
.jt-auth-topnav--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.jt-auth-stepper {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jt-auth-step {
  font-size: 12px;
  font-weight: 500;
  color: var(--jt-text-3);
  padding: 6px 12px;
  border: 1px solid var(--jt-border);
  border-radius: 999px;
  background: var(--jt-surface);
}
.jt-auth-step.is-active {
  color: var(--jt-accent);
  background: var(--jt-accent-softer);
  border-color: var(--jt-accent-border);
}

/* Numbered section */
.jt-auth-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-bottom: 8px;
}
.jt-auth-section + .jt-auth-section {
  border-top: 1px dashed var(--jt-border);
  padding-top: 22px;
}
.jt-auth-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 4px;
}
.jt-auth-section-num {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--jt-border);
  background: var(--jt-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--jt-text-2);
}
.jt-auth-section-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--jt-text);
  line-height: 1.3;
}
.jt-auth-section-sub {
  font-size: 12px;
  color: var(--jt-text-3);
  margin-top: 2px;
}

/* Field rows (2 cols) */
.jt-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.jt-auth-field--full { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .jt-auth-row { grid-template-columns: 1fr; }
}

.jt-auth-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--jt-text-3);
  margin-left: 4px;
}
.jt-auth-help {
  font-size: 11px;
  color: var(--jt-text-3);
  margin-top: 4px;
}

/* Bare inputs rendered by Symfony form_widget — match jt-auth-input look */
.jt-auth-input-el {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  color: var(--jt-text);
  transition: border-color .15s, box-shadow .15s;
  font-family: inherit;
}
.jt-auth-input-el:focus {
  outline: none;
  border-color: var(--jt-accent);
  box-shadow: 0 0 0 3px var(--jt-accent-soft);
}
.jt-auth-select { padding-right: 36px; cursor: pointer; }

/* ── Style du form_row natif (form_theme ManagerBundle:Forms:fields.html.twig)
   scopé à .jt-auth-form-pane pour ne pas impacter les autres pages ── */
.jt-auth-form-pane .form__container-register,
.jt-auth-form-pane .registration-form {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}
/* Titre + icône redondants (on a déjà notre head au-dessus) */
.jt-auth-form-pane .jt-hide-register-head { display: none; }

/* Séparateurs de section ("Votre entreprise", "Vos informations…") */
.jt-auth-form-pane .content-divider {
  position: relative;
  text-align: center;
  margin: 14px 0 6px;
  border: none;
}
.jt-auth-form-pane .content-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  border-top: 1px solid var(--jt-border);
}
.jt-auth-form-pane .content-divider span {
  position: relative;
  display: inline-block;
  padding: 0 14px;
  background: var(--jt-surface);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--jt-text-3);
}

.jt-auth-form-pane .fos_user_registration_register {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.jt-auth-form-pane .form_row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0;
}
.jt-auth-form-pane .form_row .control-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--jt-text);
  margin: 0;
  padding: 0;
}
.jt-auth-form-pane .form_row .control-label sup {
  color: var(--jt-accent);
  font-weight: 400;
}
.jt-auth-form-pane .form_row .form-control {
  width: 100%;
  height: 46px;
  padding: 0 16px;
  font-size: 14px;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  color: var(--jt-text);
  transition: border-color .15s, box-shadow .15s;
  box-shadow: none;
}
.jt-auth-form-pane .form_row .form-control:focus {
  outline: none;
  border-color: var(--jt-accent);
  box-shadow: 0 0 0 3px var(--jt-accent-soft);
}
.jt-auth-form-pane .form_row select.form-control { cursor: pointer; }
.jt-auth-form-pane .form_row textarea.form-control { height: auto; padding: 10px 16px; }
.jt-auth-form-pane .form_row.has-error .form-control { border-color: var(--jt-danger-border, #e57373); }
.jt-auth-form-pane .form_row.has-error .control-label { color: var(--jt-danger, #c0392b); }
.jt-auth-form-pane .form__error-container:empty { display: none; }
.jt-auth-form-pane .form__container { width: 100%; }

/* "Revenir à la connexion" bouton dans le form : on a déjà le lien en topnav, on cache */
.jt-auth-form-pane .fos_user_registration_register .text-right .btn-link { display: none; }
/* La div text-right qui aligne le submit : on l'aligne plutôt full width */
.jt-auth-form-pane .fos_user_registration_register .text-right { text-align: left; margin-top: 8px; }

/* Submit button du form natif */
.jt-auth-form-pane .fos_user_registration_register input[type="submit"],
.jt-auth-form-pane .fos_user_registration_register button[type="submit"],
.jt-auth-form-pane .fos_user_registration_register .btn.bg-orange,
.jt-auth-form-pane .fos_user_registration_register .round__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  background: var(--jt-accent) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--jt-radius-sm) !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  margin-top: 6px;
  text-decoration: none;
}
.jt-auth-form-pane .fos_user_registration_register input[type="submit"]:hover,
.jt-auth-form-pane .fos_user_registration_register button[type="submit"]:hover,
.jt-auth-form-pane .fos_user_registration_register .btn.bg-orange:hover,
.jt-auth-form-pane .fos_user_registration_register .btn.bg-orange:focus,
.jt-auth-form-pane .fos_user_registration_register .round__btn:hover {
  background: var(--jt-accent-hover) !important;
  color: #fff !important;
}

/* Phone field with prefix */
.jt-auth-input--phone {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius-sm);
  overflow: hidden;
  transition: border-color .15s, box-shadow .15s;
}
.jt-auth-input--phone:focus-within {
  border-color: var(--jt-accent);
  box-shadow: 0 0 0 3px var(--jt-accent-soft);
}
.jt-auth-input-prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  background: var(--jt-surface-2);
  border-right: 1px solid var(--jt-border);
  color: var(--jt-text-2);
  font-size: 14px;
  font-weight: 500;
  flex-shrink: 0;
}
.jt-auth-input--phone .jt-auth-input-el {
  border: none;
  border-radius: 0;
}
.jt-auth-input--phone .jt-auth-input-el:focus {
  box-shadow: none;
}

/* ── Quick search dropdown ─────────────────────────────────────────────────── */
#jt-search-wrap {
  position: relative;
}

.jt-nav-search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.jt-search-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--jt-border);
  border-top-color: var(--jt-primary);
  border-radius: 50%;
  animation: jt-spin 0.6s linear infinite;
  flex-shrink: 0;
  margin-right: 10px;
}
@keyframes jt-spin { to { transform: rotate(360deg); } }

.jt-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: var(--jt-surface);
  border: 1px solid var(--jt-border);
  border-radius: var(--jt-radius);
  box-shadow: 0 8px 32px rgba(0,0,0,.14);
  z-index: 9990;
  max-height: 520px;
  overflow-y: auto;
  min-width: 480px;
}

.jt-sr-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--jt-text-3);
  font-size: 13px;
}

.jt-sr-section {
  border-bottom: 1px solid var(--jt-border);
  padding: 10px 0 6px;
}
.jt-sr-section:last-child {
  border-bottom: none;
}

.jt-sr-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--jt-text-3);
  padding: 0 16px 6px;
}

/* Features row */
.jt-sr-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 12px 6px;
}
.jt-sr-feature-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: var(--jt-radius-sm);
  border: 1px solid var(--jt-border);
  color: var(--jt-text-1);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  background: var(--jt-surface);
  transition: background .12s, border-color .12s;
}
.jt-sr-feature-item i {
  font-size: 14px;
  color: var(--jt-primary);
}
.jt-sr-feature-item:hover {
  background: var(--jt-surface-2, #f5f7f5);
  border-color: var(--jt-primary);
  color: var(--jt-text-1);
  text-decoration: none;
}

/* Result items */
.jt-sr-item {
  display: flex;
  flex-direction: column;
  padding: 8px 16px;
  text-decoration: none;
  color: var(--jt-text-1);
  transition: background .1s;
}
.jt-sr-item:hover {
  background: var(--jt-surface-2, #f5f7f5);
  text-decoration: none;
  color: var(--jt-text-1);
}
.jt-sr-item-main {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
}
.jt-sr-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--jt-primary-light, #e8f2ec);
  color: var(--jt-primary);
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
}
.jt-sr-icon {
  color: var(--jt-text-3);
  font-size: 14px;
  flex-shrink: 0;
}
.jt-sr-name {
  color: var(--jt-text-1);
}
.jt-sr-sub {
  font-size: 12px;
  color: var(--jt-text-3);
  margin-top: 4px;
  padding-left: 2px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
}
.jt-sr-sub i {
  font-size: 11px;
  margin-right: 4px;
  opacity: .7;
}
.jt-sr-sep {
  margin: 0 8px;
  opacity: .4;
}