/* ============================================================
   DELIVR — ULTRA PREMIUM DARK THEME
   Design: Linear × Vercel × Raycast aesthetic
   ============================================================ */


:root {
  /* ── NEW AGE PALETTE ── */
  --bg:    #05060A;
  --bg2:   #08090F;
  --card:  #0C0E17;
  --card2: #10121E;
  --card3: #141828;

  --border:  rgba(255,255,255,.055);
  --border2: rgba(255,255,255,.10);
  --border3: rgba(255,255,255,.16);

  --text:  #D8DFF0;
  --text2: #7B849A;
  --text3: #3D4460;
  --text1: #EEF1FF;

  /* Accent principal — electric indigo */
  --accent:      #5C7CFA;
  --accent2:     #7B9CFF;
  --accent-soft: rgba(92,124,250,.10);
  --accent-glow: rgba(92,124,250,.22);
  --accent-line: rgba(92,124,250,.35);

  /* Couleurs fonctionnelles */
  --purple:    #9F72FF;
  --purple-bg: rgba(159,114,255,.10);
  --green:     #12D98A;
  --green-bg:  rgba(18,217,138,.10);
  --red:       #FF4D6A;
  --red-bg:    rgba(255,77,106,.10);
  --orange:    #FFB03A;
  --orange-bg: rgba(255,176,58,.10);
  --cyan:      #22E8FF;
  --cyan-bg:   rgba(34,232,255,.10);
  --pink:      #F562C4;
  --pink-bg:   rgba(245,98,196,.10);

  /* UI tokens */
  --gray-bg:   rgba(255,255,255,.035);
  --radius:    14px;
  --radius-sm: 9px;
  --radius-lg: 20px;

  --shadow:    0 1px 0 rgba(255,255,255,.025), 0 4px 28px rgba(0,0,0,.55);
  --shadow-lg: 0 8px 60px rgba(0,0,0,.70), 0 1px 0 rgba(255,255,255,.04);
  --shadow-glow: 0 0 40px rgba(92,124,250,.12);
  --inset:     inset 0 1px 0 rgba(255,255,255,.055);
  --inset2:    inset 0 0 0 1px rgba(255,255,255,.055);

  /* Glassmorphism tokens */
  --glass:        rgba(255,255,255,.028);
  --glass-border: rgba(255,255,255,.08);
  --glass-blur:   blur(20px);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ambient background — noise + orbs */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 20% -10%, rgba(92,124,250,.07) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 110%, rgba(159,114,255,.05) 0%, transparent 55%),
    radial-gradient(ellipse 40% 30% at 50% 50%, rgba(18,217,138,.02) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(92,124,250,.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(92,124,250,.018) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  z-index: 0;
  opacity: .6;
}

/* ── SCROLLBARS ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.2); }

/* ── HEADER ── */
.header {
  background: rgba(5,6,10,.92);
  backdrop-filter: blur(28px) saturate(160%);
  -webkit-backdrop-filter: blur(28px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.055);
  box-shadow: 0 1px 0 rgba(255,255,255,.03), 0 4px 32px rgba(0,0,0,.5);
  padding: 0;
  height: 56px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  position: sticky;
  top: 0;
  z-index: 500;
  isolation: isolate;
  gap: 0;
  overflow: visible;
  will-change: transform;
}

/* ── LOGO ── */
.logo { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.logo-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  font-family: 'Inter', system-ui, sans-serif;
  position: relative;
  box-shadow: 0 0 20px rgba(224,62,62,.3);
}
.logo-text {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.3px;
  color: var(--text1);
}
.logo-text b { color: var(--accent); }
.logo-sub {
  font-size: 9px;
  color: var(--text3);
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-top: 1px;
}

/* ── NEW HEADER ZONES ── */
.hdr-z1{display:flex;align-items:center;gap:10px;padding:0 14px;flex-shrink:0;height:100%}
.hdr-z2{display:flex;align-items:center;gap:8px;flex:1;justify-content:center;height:100%;min-width:0;overflow:visible}
.hdr-z3{display:flex;align-items:center;gap:8px;padding:0 14px;flex-shrink:0;height:100%;border-left:1px solid var(--border)}
.hdr-sep-v{width:1px;height:24px;background:var(--border);flex-shrink:0}
.hdr-ctx{display:flex;align-items:center;gap:8px;white-space:nowrap}
/* Profile dropdown */
.hdr-profile-menu{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.3);min-width:200px;z-index:600;overflow:hidden}
.hdr-pm-btn{display:block;width:100%;text-align:left;padding:8px 14px;border:none;background:none;font-family:inherit;font-size:11px;color:var(--text2);cursor:pointer;transition:background .15s}
.hdr-pm-btn:hover{background:rgba(255,255,255,.05)}
body.light-mode .hdr-pm-btn:hover{background:rgba(0,0,0,.03)}
/* Hide old .hr container */
.hr{display:none!important}

/* ── NAV TABS ── */
.nav-tabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.04);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.nav-tab {
  padding: 6px 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: 'Inter', system-ui, sans-serif;
  transition: all .2s ease;
  white-space: nowrap;
}
.nav-tab.active {
  background: var(--card2);
  color: var(--text1);
  box-shadow: var(--inset), 0 2px 8px rgba(0,0,0,.3);
}
.nav-tab:hover:not(.active) { color: var(--text2); background: rgba(255,255,255,.03); }

/* ── HEADER RIGHT ── */
.hr { display: flex; align-items: center; gap: 5px; flex: 0 0 auto; flex-wrap: nowrap; padding: 0 18px 0 12px; border-left: 1px solid var(--border); height: 100%; }
.tb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text3);
  background: rgba(255,255,255,.04);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

.si {
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
}
.si.ok { color: var(--green); background: var(--green-bg); }
.si.no { color: var(--orange); background: var(--orange-bg); }

/* ── BUTTONS ── */
.hb {
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text2);
  font-family: 'Inter', system-ui, sans-serif;
  transition: all .18s ease;
  white-space: nowrap;
}
.hb:hover { border-color: var(--border2); color: var(--text1); background: rgba(255,255,255,.07); }
.hb.d { color: var(--red); border-color: rgba(245,68,90,.2); background: var(--red-bg); }
.hb.d:hover { background: rgba(245,68,90,.2); border-color: var(--red); }
.hb.p {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 16px var(--accent-glow);
}
.hb.p:hover { opacity: .85; box-shadow: 0 0 24px var(--accent-glow); }
.hb.g {
  background: var(--green);
  color: #06101c;
  border-color: var(--green);
  font-weight: 700;
  box-shadow: 0 0 16px rgba(15,202,122,.2);
}
.hb.g:hover { opacity: .85; }

/* ── MAIN ── */
.main { padding: 24px; position: relative; z-index: 1; overflow-x: hidden; box-sizing: border-box; max-width: calc(100vw - 220px); }
.vp { display: none; }
.vp.active { display: block; }

/* ── KPI GRID ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(165px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.kc {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s;
}
.kc::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--inset);
  pointer-events: none;
  border-radius: inherit;
}
.kc:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kc-l {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 6px;
}
.kc-v {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -1.5px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text1);
}
.kc-v small { font-size: 13px; color: var(--text3); font-weight: 400; font-family: 'Inter', system-ui, sans-serif; }
.kc-s { font-size: 10px; color: var(--text3); margin-top: 3px; }
.kc-who {
  font-size: 9px;
  font-weight: 700;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  letter-spacing: .3px;
}
.kc-who.aw { background: var(--accent-soft); color: var(--accent); }
.kc-who.fs { background: var(--purple-bg); color: var(--purple); }

/* ── SECTION TITLES ── */
.stit {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text2);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.dpulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  animation: pulse 2s infinite;
  box-shadow: 0 0 6px var(--red);
}
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 6px var(--red); } 50% { opacity: .3; box-shadow: none; } }

/* ── ALERTS ── */
.als { margin-bottom: 24px; }
.ag { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 8px; }
.ac {
  padding: 12px 14px;
  border-radius: 10px;
  border-left: 3px solid;
  font-size: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  transition: all .2s;
  backdrop-filter: blur(4px);
}
.ac.crit { background: var(--red-bg); border-color: var(--red); }
.ac.warn { background: var(--orange-bg); border-color: var(--orange); }
.ac.info { background: var(--accent-soft); border-color: var(--accent); }
.ac:hover { filter: brightness(1.15); }
.ac-i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.ac-c { flex: 1; }
.ac-l { font-weight: 700; font-size: 11px; margin-bottom: 2px; color: var(--text1); }
.ac-t { color: var(--text2); font-size: 11px; }
.ac-w { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; margin-left: 5px; }
.ac-w.aw { background: var(--accent-soft); color: var(--accent); }
.ac-w.fs { background: var(--purple-bg); color: var(--purple); }

/* ── WORK PLAN LIST ── */
.wpl { margin-bottom: 24px; }
.wpl-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.wpl-n { display: flex; gap: 5px; }
.wpl-g { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.wpl-c {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wpl-ch {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  letter-spacing: .3px;
  text-transform: uppercase;
}
.wpl-ch.send { background: var(--accent-soft); color: var(--accent); border-bottom: 1px solid rgba(79,121,255,.2); }
.wpl-ch.recv { background: var(--purple-bg); color: var(--purple); border-bottom: 1px solid rgba(155,111,255,.2); }
.wpl-ch .badge {
  font-size: 9px;
  background: rgba(255,255,255,.1);
  padding: 1px 7px;
  border-radius: 10px;
  font-weight: 800;
}
.wpl-l { padding: 8px; max-height: 360px; overflow-y: auto; }
.wpl-i {
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 3px;
  font-size: 11.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid transparent;
  transition: all .15s;
}
.wpl-i:hover { background: var(--card2); border-color: var(--border); }
.wpl-il { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wpl-ii { font-size: 14px; flex-shrink: 0; }
.wpl-if { min-width: 0; }
.wpl-in { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; color: var(--text); }
.wpl-is { font-size: 10px; color: var(--text3); }
.wpl-id { font-family: 'JetBrains Mono', monospace; font-size: 10px; flex-shrink: 0; padding: 2px 7px; border-radius: 5px; }
.wpl-id.over { background: var(--red-bg); color: var(--red); font-weight: 700; }
.wpl-id.soon { background: var(--orange-bg); color: var(--orange); font-weight: 700; }
.wpl-id.ok { background: var(--gray-bg); color: var(--text3); }
.wpl-e { padding: 20px; text-align: center; color: var(--text3); font-size: 12px; }

/* ── CALENDAR ── */
.wh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wn { display: flex; gap: 5px; }
.wb {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text2);
  transition: all .15s;
}
.wb:hover { background: var(--card2); color: var(--text1); border-color: var(--border2); }
.wg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.wd {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  min-height: 120px;
  box-shadow: var(--shadow);
  transition: all .2s;
}
.wd:hover { border-color: var(--border2); }
.wd.today {
  border-color: var(--accent);
  border-width: 1.5px;
  box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow);
}
.wd-l {
  font-size: 9px;
  font-weight: 700;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 2px;
}
.wd-d {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text1);
}
.wi {
  font-size: 10px;
  padding: 3px 7px;
  border-radius: 5px;
  margin-bottom: 3px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: filter .15s;
}
.wi:hover { filter: brightness(1.2); }
.wi.script { background: rgba(79,121,255,.2); color: #7fa3ff; }
.wi.sb { background: rgba(155,111,255,.2); color: #bb94ff; }
.wi.video { background: rgba(252,169,46,.2); color: #ffc96a; }
.wi.trad { background: rgba(15,202,122,.2); color: #3fd98b; }
.wi.sensi { background: rgba(245,68,90,.2); color: #ff8096; }

/* ── FILTER BAR ── */
.fb {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
  padding: 12px 16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.fg { display: flex; align-items: center; gap: 6px; }
.fl { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.fsel, .finp {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  padding: 5px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg2);
  color: var(--text);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.fsel:focus, .finp:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.finp { width: 180px; }
.frst {
  font-size: 11px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: none;
  padding: 5px 8px;
  font-family: inherit;
  transition: opacity .15s;
}
.frst:hover { opacity: .7; }
.ccnt {
  font-size: 10px;
  color: var(--text3);
  margin-left: auto;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}

/* ── TABLE ── */
.tw {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: auto;
  max-height: calc(100vh - 200px);
}
table { width: 100%; border-collapse: collapse; font-size: 11.5px; white-space: nowrap; }
thead { position: sticky; top: 0; z-index: 10; }

/* Group headers */
tr.gh th {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.ghid { background: var(--card); color: var(--text3); }
.ghp1 { background: rgba(79,121,255,.12); color: #7fa3ff; border-top: 2px solid var(--accent); }
.ghi1 { background: rgba(155,111,255,.12); color: #bb94ff; border-top: 2px solid var(--purple); }
.ghi2 { background: rgba(252,169,46,.12); color: #ffc96a; border-top: 2px solid var(--orange); }
.ghtr { background: rgba(15,202,122,.12); color: #3fd98b; border-top: 2px solid var(--green); }
.ghsp { background: rgba(245,68,90,.12); color: #ff8096; border-top: 2px solid var(--red); }
.gh-w { display: block; font-size: 8px; font-weight: 600; opacity: .6; margin-top: 1px; }

/* Column headers */
tr.ch th {
  background: var(--card2);
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  padding: 8px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}

/* Body rows */
tbody tr { border-bottom: 1px solid rgba(255,255,255,.03); transition: background .1s; }
tbody tr:hover { background: rgba(79,121,255,.04) !important; }
tbody td { padding: 5px 7px; color: var(--text); }
tr.r25 { background: rgba(255,255,255,.015); }

.ct { color: var(--text3); font-size: 10.5px; }
.cx {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 600;
  color: var(--accent);
  cursor: pointer;
  transition: opacity .15s;
}
.cx:hover { opacity: .8; text-decoration: underline; }

/* Status badges */
.st {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  min-width: 56px;
  letter-spacing: .2px;
}
.st-l { background: var(--green-bg); color: var(--green); }
.st-v { background: var(--green-bg); color: var(--green); }
.st-nl { background: var(--red-bg); color: var(--red); }
.st-nv { background: var(--red-bg); color: var(--red); }
.st-a { background: var(--orange-bg); color: var(--orange); }
.st-o { background: var(--green-bg); color: var(--green); }
.st-n { background: var(--red-bg); color: var(--red); }
.st-ni { background: var(--orange-bg); color: var(--orange); }
.st-np { background: var(--gray-bg); color: var(--text3); }
.st-e { color: var(--text3); }

.sd { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--text2); }
.sd.over { color: var(--red); font-weight: 700; }
.sd.soon { color: var(--orange); font-weight: 700; }

td.ed { cursor: pointer; position: relative; transition: background .1s; }
td.ed:hover { background: var(--accent-soft) !important; }

/* Column color zones */
td.zp { background: rgba(79,121,255,.02); }
td.zi { background: rgba(155,111,255,.02); }
td.zo { background: rgba(252,169,46,.02); }
td.zt { background: rgba(15,202,122,.02); }
td.zs { background: rgba(245,68,90,.02); }
tr:hover td.zp { background: rgba(79,121,255,.06) !important; }
tr:hover td.zi { background: rgba(155,111,255,.06) !important; }
tr:hover td.zo { background: rgba(252,169,46,.06) !important; }
tr:hover td.zt { background: rgba(15,202,122,.06) !important; }
tr:hover td.zs { background: rgba(245,68,90,.06) !important; }

td.sp1 { border-left: 2px solid rgba(79,121,255,.5) !important; }
td.si1 { border-left: 2px solid rgba(155,111,255,.5) !important; }
td.si2 { border-left: 2px solid rgba(252,169,46,.5) !important; }
td.str { border-left: 2px solid rgba(15,202,122,.5) !important; }
td.ssp { border-left: 2px solid rgba(245,68,90,.5) !important; }
td.sen { border-right: 2px solid rgba(245,68,90,.5) !important; }
th.sp1 { border-left: 2px solid rgba(79,121,255,.5) !important; }
th.si1 { border-left: 2px solid rgba(155,111,255,.5) !important; }
th.si2 { border-left: 2px solid rgba(252,169,46,.5) !important; }
th.str { border-left: 2px solid rgba(15,202,122,.5) !important; }
th.ssp { border-left: 2px solid rgba(245,68,90,.5) !important; }
th.sen { border-right: 2px solid rgba(245,68,90,.5) !important; }

/* Done row */
tr.rd { background: linear-gradient(90deg, rgba(15,202,122,.04), rgba(15,202,122,.08)) !important; }
tr.rd td { opacity: .8; }

/* Delivered badge */
.dc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--green);
  color: #06101c;
  font-size: 10px;
  font-weight: 800;
  margin-right: 4px;
  box-shadow: 0 0 8px rgba(15,202,122,.4);
}
.dl {
  font-size: 8px;
  font-weight: 800;
  color: var(--green);
  text-transform: uppercase;
  background: var(--green-bg);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* ── DROPDOWN MENU ── */
.ddo { position: fixed; inset: 0; z-index: 300; }
.ddm {
  position: fixed;
  z-index: 301;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 4px;
  min-width: 150px;
  max-height: 280px;
  overflow-y: auto;
}
.ddi {
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background .1s;
  color: var(--text);
}
.ddi:hover { background: var(--accent-soft); color: var(--text1); }
.ddi.act { background: var(--accent); color: #fff; }
.ddd { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }

/* ── DATE PICKER ── */
.dpo {
  position: fixed;
  z-index: 301;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
}
.dpo input[type=date] {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  padding: 8px 12px;
  border: 1.5px solid var(--accent);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
  color-scheme: dark;
}
.dpa { display: flex; gap: 6px; margin-top: 10px; }
.dpb {
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: all .15s;
}
.dpb.ok { background: var(--accent); color: #fff; }
.dpb.cl { background: var(--red-bg); color: var(--red); }
.dpb.ca { background: var(--gray-bg); color: var(--text2); }

/* ── FAMILY TAGS ── */
.fam-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
}
.fam-0 { background: rgba(199,30,74,.2); color: #ff7fa8; }
.fam-1 { background: rgba(63,81,181,.2); color: #8fa3ff; }
.fam-2 { background: rgba(0,137,123,.2); color: #4dd0c4; }
.fam-3 { background: rgba(255,255,255,.1); color: #ddd; }
.fam-4 { background: rgba(245,124,0,.2); color: #ffb74d; }
.fam-5 { background: rgba(103,58,183,.2); color: #ce93d8; }
.fam-6 { background: rgba(2,136,209,.2); color: #81d4fa; }
.fam-7 { background: rgba(245,167,0,.2); color: #ffe082; }
.fam-8 { background: rgba(27,94,32,.2); color: #66bb6a; }
.fam-9 { background: rgba(136,14,79,.2); color: #f48fb1; }
.fam-10 { background: rgba(0,96,100,.2); color: #80cbc4; }
.fam-11 { background: rgba(106,27,154,.2); color: #ce93d8; }

/* ── MODAL BACKGROUNDS ── */
.mbg, .efbg, .scr-bg, .rbg, .adm-bg, .cobg, .clbg, .ecbg, .scrbg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 400;
  align-items: center;
  justify-content: center;
}
.mbg.open, .efbg.open, .scr-bg.open, .rbg.open, .adm-bg.open, .cobg.open, .clbg.open, .ecbg.open, .scrbg.open {
  display: flex;
}

/* ── MODAL CONTENT ── */
.efmod, .cmod, .clm, .scr-m, .adm-m {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
  max-width: 700px;
  width: 94%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes mi { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.efh, .cmh, .efh, .adm-h {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.efh h3, .cmh h3, .adm-h h3 {
  font-size: 15px;
  font-weight: 700;
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--text1);
}
.efid { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--text3); margin-left: 8px; }

.cmc {
  background: none;
  border: none;
  color: var(--text3);
  font-size: 22px;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: all .15s;
  line-height: 1;
}
.cmc:hover { background: var(--card2); color: var(--text1); }

.efb, .cmb, .adm-b { padding: 16px 22px; overflow-y: auto; flex: 1; }
.efg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.efsep {
  grid-column: 1 / -1;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text3);
  padding-top: 14px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.eff { display: flex; flex-direction: column; gap: 4px; }
.efl { font-size: 10px; font-weight: 600; color: var(--text3); }
.efi, .efse {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
  color-scheme: dark;
}
.efi:focus, .efse:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.efa {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.efa-l { display: flex; gap: 8px; }
.efa-r { display: flex; gap: 8px; }

/* ── RESET BOX ── */
.rbox {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  animation: modalIn .22s ease;
}
.rbox h3 { font-size: 18px; font-weight: 700; margin-bottom: 10px; font-family: 'Inter', system-ui, sans-serif; }
.rbox p { color: var(--text2); font-size: 13px; margin-bottom: 20px; }
.ract { display: flex; gap: 10px; justify-content: center; }

/* ── LOGIN ── */
.lg-scr {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: radial-gradient(ellipse at 20% 50%, rgba(79,121,255,.15) 0%, transparent 60%),
              radial-gradient(ellipse at 80% 50%, rgba(155,111,255,.1) 0%, transparent 60%),
              var(--bg);
  align-items: center;
  justify-content: center;
}
.lg-card {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 20px;
  padding: 36px;
  max-width: 400px;
  width: 92%;
  box-shadow: var(--shadow-lg), 0 0 60px rgba(79,121,255,.08);
  animation: modalIn .4s cubic-bezier(.34,1.4,.64,1);
}
.lg-logo { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.lg-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 22px;
  background: var(--bg2);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.lg-tbtn {
  flex: 1;
  padding: 8px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  font-family: inherit;
  color: var(--text3);
  transition: all .2s;
}
.lg-tbtn.active { background: var(--card2); color: var(--accent); box-shadow: var(--inset); }
.lg-inp {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 10px;
  outline: none;
  box-sizing: border-box;
  background: var(--bg2);
  color: var(--text1);
  transition: border-color .15s, box-shadow .15s;
  color-scheme: dark;
}
.lg-inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.lg-inp::placeholder { color: var(--text3); }
.lg-err { color: var(--red); font-size: 12px; min-height: 18px; margin-bottom: 8px; }
.lg-btn {
  width: 100%;
  padding: 13px;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: .3px;
  transition: opacity .2s, box-shadow .2s;
}
.lg-btn:hover { opacity: .9; box-shadow: 0 0 24px rgba(224,62,62,.3); }
.lg-btn:disabled { opacity: .5; cursor: wait; }

/* ── USER INFO ── */
.cu-wrap { display: none; align-items: center; gap: 8px; }
.cu-name { font-size: 11px; font-weight: 600; color: var(--text); }
.cu-role {
  font-size: 8px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cu-role.super_admin { background: rgba(251,191,36,.15); color: #fbbf24; }
.cu-role.admin_awarino { background: var(--red-bg); color: var(--red); }
.cu-role.admin_flowstudio { background: var(--purple-bg); color: var(--purple); }
.cu-role.admin_technique { background: rgba(14,165,199,.15); color: var(--cyan); }
.cu-out {
  font-size: 10px;
  color: var(--text3);
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
  transition: color .15s;
}
.cu-out:hover { color: var(--red); }

/* ── TOAST ── */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  background: var(--card2);
  border: 1px solid var(--border2);
  color: var(--text1);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  display: none;
  animation: toastIn .3s ease;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ── PROGRESS BARS ── */
.pbt {
  width: 36px;
  height: 6px;
  background: var(--card2);
  border-radius: 3px;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.pbf { height: 100%; border-radius: 3px; }
.pbl { font-size: 10px; color: var(--text3); margin-left: 4px; font-family: 'JetBrains Mono', monospace; }

/* ── TEAM DASHBOARD ── */
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 16px; }
.eq-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--shadow);
  transition: transform .2s, box-shadow .2s;
}
.eq-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.eq-name { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: 'Inter', system-ui, sans-serif; }
.eq-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  color: var(--bg);
}
.eq-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.eq-stat {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
}
.eq-stat-v { font-size: 20px; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; }
.eq-stat-l { font-size: 8px; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.eq-bar { height: 5px; background: var(--bg2); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.eq-bar-fill { height: 100%; border-radius: 3px; }
.eq-det { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.eq-det-t { font-size: 9px; font-weight: 700; color: var(--text3); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .4px; }
.eq-det-row {
  font-size: 11px;
  padding: 4px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid rgba(255,255,255,.03);
  color: var(--text2);
}
.eq-det-row:last-child { border: none; }
.eq-badge { font-size: 9px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.eq-badge.ok { background: var(--green-bg); color: var(--green); }
.eq-badge.late { background: var(--red-bg); color: var(--red); }
.eq-badge.aw { background: var(--accent-soft); color: var(--accent); }
.eq-badge.fs { background: var(--purple-bg); color: var(--purple); }
.eq-sum { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 18px; }
.eq-sum-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-align: center;
  box-shadow: var(--shadow);
}
.eq-sum-v { font-size: 22px; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; }
.eq-sum-l { font-size: 9px; color: var(--text3); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin-top: 3px; }

/* ── LANGUAGE CARDS ── */
.lang-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 6px; }
.lang-card {
  background: var(--bg2);
  border-radius: 8px;
  padding: 7px 9px;
  text-align: center;
  border: 1px solid var(--border);
}
.lang-card .lc-l { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }
.lang-card .lc-v { font-size: 15px; font-weight: 700; margin-top: 2px; font-family: 'Inter', system-ui, sans-serif; }
.lang-card .lc-s { font-size: 9px; color: var(--text3); }

/* ── STICKY COLS ── */
#mT table th:nth-child(1),#mT table td:nth-child(1),
#lcT table th:nth-child(1),#lcT table td:nth-child(1) {
  position: sticky; left: 0; z-index: 3; background: var(--card); min-width: 36px;
}
#mT table th:nth-child(2),#mT table td:nth-child(2),
#lcT table th:nth-child(2),#lcT table td:nth-child(2) {
  position: sticky; left: 36px; z-index: 3; background: var(--card); min-width: 84px;
}
#mT table th:nth-child(3),#mT table td:nth-child(3),
#lcT table th:nth-child(3),#lcT table td:nth-child(3) {
  position: sticky; left: 120px; z-index: 3; background: var(--card); min-width: 80px;
}
#mT table th:nth-child(4),#mT table td:nth-child(4),
#lcT table th:nth-child(4),#lcT table td:nth-child(4) {
  position: sticky; left: 200px; z-index: 3; background: var(--card); min-width: 180px;
  border-right: 1px solid var(--border2); box-shadow: 4px 0 16px rgba(0,0,0,.3);
}
#mT thead th:nth-child(1),#mT thead th:nth-child(2),
#mT thead th:nth-child(3),#mT thead th:nth-child(4),
#lcT thead th:nth-child(1),#lcT thead th:nth-child(2),
#lcT thead th:nth-child(3),#lcT thead th:nth-child(4) { z-index: 12 !important; }
#mT tr.gh th:nth-child(1),#lcT tr.gh th:nth-child(1) { position: sticky; left: 0; z-index: 12; }
#mT tr:hover td:nth-child(1),#mT tr:hover td:nth-child(2),
#mT tr:hover td:nth-child(3),#mT tr:hover td:nth-child(4),
#lcT tr:hover td:nth-child(1),#lcT tr:hover td:nth-child(2),
#lcT tr:hover td:nth-child(3),#lcT tr:hover td:nth-child(4) { background: rgba(79,121,255,.04) !important; }
#mT tr.rd td:nth-child(1),#mT tr.rd td:nth-child(2),
#mT tr.rd td:nth-child(3),#mT tr.rd td:nth-child(4),
#lcT tr.rd td:nth-child(1),#lcT tr.rd td:nth-child(2),
#lcT tr.rd td:nth-child(3),#lcT tr.rd td:nth-child(4) { background: rgba(15,202,122,.06) !important; }
#mT tr.r25 td,#lcT tr.r25 td { background: rgba(255,255,255,.012); }
#mT tr.cf th,#lcT tr.cf th { background: var(--bg2) !important; }
#mT tr.ch th,#lcT tr.ch th { background: var(--card2) !important; }

/* ── ONBOARDING SECTION ── */

.onb-section { display: none; }
.onb-section.active { display: block; }

.onb-tabs {
  display: flex;
  gap: 3px;
  background: var(--bg2);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  border: 1px solid var(--border);
}
.onb-tab {
  padding: 6px 16px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: inherit;
  transition: all .18s;
}
.onb-tab.active { background: var(--card2); color: var(--red); box-shadow: var(--inset); }
.onb-tab:hover:not(.active) { color: var(--text2); }

.onb-tw {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: auto;
  max-height: calc(100vh - 260px);
}
.onb-tw table { width: 100%; border-collapse: collapse; font-size: 11px; white-space: nowrap; }
.onb-tw thead { position: sticky; top: 0; z-index: 10; }
.onb-tw tr.onb-gh th {
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border);
  text-align: center;
}
.onb-tw tr.onb-ch th {
  background: var(--card2);
  font-size: 10px;
  font-weight: 700;
  color: var(--text2);
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.onb-tw tbody tr { border-bottom: 1px solid rgba(255,255,255,.03); }
.onb-tw tbody tr:hover { background: rgba(79,121,255,.04); }
.onb-tw tbody td { padding: 5px 7px; font-size: 11px; }
.onb-tw td.onb-ed { cursor: pointer; position: relative; text-align: center; }
.onb-tw td.onb-ed:hover { background: var(--accent-soft) !important; }

.ghid2 { background: var(--card); color: var(--text3); }
.gh-onb-red { background: rgba(245,68,90,.12); color: #ff8096; border-top: 2px solid var(--red); }
.gh-onb-blue { background: rgba(79,121,255,.12); color: #7fa3ff; border-top: 2px solid var(--accent); }
.gh-onb-green { background: rgba(15,202,122,.12); color: #3fd98b; border-top: 2px solid var(--green); }
.gh-onb-orange { background: rgba(252,169,46,.12); color: #ffc96a; border-top: 2px solid var(--orange); }
.gh-onb-purple { background: rgba(155,111,255,.12); color: #bb94ff; border-top: 2px solid var(--purple); }
.gh-onb-cyan { background: rgba(34,212,245,.12); color: #80e9ff; border-top: 2px solid var(--cyan); }
.gh-onb-pink { background: rgba(245,68,90,.15); color: #ffaabb; border-top: 2px solid #d32f2f; }

.onb-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--border2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  transition: all .15s;
  user-select: none;
}
.onb-check.green { background: var(--green); border-color: var(--green); color: #06101c; box-shadow: 0 0 8px rgba(15,202,122,.3); }
.onb-check.red { background: var(--red); border-color: var(--red); color: #fff; }
.onb-check:hover { transform: scale(1.15); box-shadow: 0 0 12px rgba(255,255,255,.1); }

.onb-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text2);
  cursor: pointer;
  padding: 2px 5px;
  border-radius: 4px;
  transition: background .15s;
}
.onb-date:hover { background: var(--accent-soft); }
.onb-date.over { color: var(--red); font-weight: 700; }
.onb-date.soon { color: var(--orange); font-weight: 700; }

.onb-add-col {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  color: var(--accent);
  cursor: pointer;
  font-weight: 600;
  background: none;
  border: 1px dashed rgba(79,121,255,.4);
  border-radius: 6px;
  padding: 4px 10px;
  font-family: inherit;
  margin-left: 8px;
  transition: all .15s;
}
.onb-add-col:hover { background: var(--accent-soft); border-color: var(--accent); }

.onb-add-row { margin-top: 10px; display: flex; gap: 8px; align-items: center; }

.onb-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 20px; }
.onb-kpi {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
.onb-kpi-label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px; }
.onb-kpi-val { font-size: 26px; font-weight: 700; letter-spacing: -1.5px; font-family: 'Inter', system-ui, sans-serif; }
.onb-kpi-sub { font-size: 10px; color: var(--text3); margin-top: 3px; }

.onb-main-tabs {
  display: flex;
  gap: 3px;
  background: rgba(255,255,255,.04);
  padding: 4px;
  border-radius: 10px;
  margin-bottom: 4px;
  border: 1px solid var(--border);
}
.onb-main-tab {
  padding: 7px 18px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: inherit;
  transition: all .2s;
}
.onb-main-tab.active { background: var(--card2); color: var(--text1); box-shadow: var(--inset); }
.onb-main-tab:hover:not(.active) { color: var(--text2); }

/* Column modal */
.onb-col-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 460;
  align-items: center;
  justify-content: center;
}
.onb-col-modal.open { display: flex; }
.onb-col-box {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  padding: 26px 28px;
  max-width: 420px;
  width: 90%;
  box-shadow: var(--shadow-lg);
  animation: modalIn .22s ease;
}
.onb-col-box h3 { font-size: 15px; font-weight: 700; margin-bottom: 14px; font-family: 'Inter', system-ui, sans-serif; }
.onb-col-box label { font-size: 10px; font-weight: 700; color: var(--text3); text-transform: uppercase; display: block; margin-bottom: 4px; margin-top: 10px; }
.onb-col-box input, .onb-col-box select {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  box-sizing: border-box;
  color-scheme: dark;
}
.onb-col-box input:focus, .onb-col-box select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.onb-col-acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Onboarding sticky */
.onb-tw table th.onb-sticky, .onb-tw table td.onb-sticky {
  position: sticky; z-index: 3; background: var(--card);
}
.onb-tw table th.onb-sticky-0, .onb-tw table td.onb-sticky-0 { left: 0; min-width: 32px; }
.onb-tw table th.onb-sticky-1, .onb-tw table td.onb-sticky-1 { left: 32px; min-width: 36px; }
.onb-tw table th.onb-sticky-last { z-index: 12 !important; }
.onb-tw tbody tr:hover td.onb-sticky { background: rgba(79,121,255,.04) !important; }

/* Sort */
.onb-sort-th { cursor: pointer; user-select: none; position: relative; }
.onb-sort-th:hover { background: rgba(79,121,255,.06) !important; }
.onb-sort-ico { font-size: 8px; margin-left: 2px; opacity: .4; }
.onb-sort-th.asc .onb-sort-ico, .onb-sort-th.desc .onb-sort-ico { opacity: 1; color: var(--accent); }

/* Onboarding filter bar */
.onb-fb { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; align-items: center; }
.onb-fb .fg { display: flex; align-items: center; gap: 5px; }
.onb-fb .fl { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; }
.onb-fb .fsel, .onb-fb .finp {
  font-family: inherit;
  font-size: 11px;
  padding: 5px 9px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  color-scheme: dark;
}
.onb-fb .fsel:focus, .onb-fb .finp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.onb-fb .finp { width: 160px; }
.onb-fb .frst { font-size: 11px; color: var(--accent); cursor: pointer; font-weight: 600; background: none; border: none; padding: 5px 8px; font-family: inherit; }
.onb-fb .ccnt { font-size: 10px; color: var(--text3); margin-left: auto; font-weight: 500; font-family: 'JetBrains Mono', monospace; }

/* Fiche modal */
.onb-fiche-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 450;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 20px;
  overflow-y: auto;
}
.onb-fiche-bg.open { display: flex; }
.onb-fiche-m {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  max-width: 800px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: mi .25s ease;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.onb-fiche-h {
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.onb-fiche-h h3 { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; font-family: 'Inter', system-ui, sans-serif; }
.onb-fiche-b { padding: 16px 24px 20px; overflow-y: auto; flex: 1; }
.onb-fiche-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.onb-fiche-item { padding: 10px 12px; background: var(--bg2); border-radius: 8px; border: 1px solid var(--border); }
.onb-fiche-item .ofl { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 3px; }
.onb-fiche-item .ofv { font-size: 13px; font-weight: 600; color: var(--text1); }
.onb-fiche-section { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--text3); margin: 14px 0 6px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.onb-fiche-checks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.onb-fiche-chip { font-size: 11px; padding: 4px 10px; border-radius: 6px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.onb-fiche-chip.ok { background: var(--green-bg); color: var(--green); }
.onb-fiche-chip.ko { background: var(--red-bg); color: var(--red); }
.onb-fiche-chip.na { background: var(--gray-bg); color: var(--text3); }
.onb-brief-ta {
  width: 100%;
  min-height: 120px;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.6;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  color-scheme: dark;
}
.onb-brief-ta:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.onb-fiche-ft {
  padding: 14px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 8px;
  justify-content: space-between;
  flex-shrink: 0;
}

.onb-open-fiche {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--card);
  cursor: pointer;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  transition: all .15s;
}
.onb-open-fiche:hover { background: var(--accent-soft); border-color: var(--accent); transform: scale(1.1); }

.onb-check.disabled { opacity: .2; cursor: not-allowed; pointer-events: none; }

.onb-kpi-section { margin-bottom: 24px; }
.onb-kpi-section-title {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--text3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.onb-kpi-section-title .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* V3: Premium Dashboard */
.onb-dash-hero {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 24px;
}
.onb-hero-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: all .2s;
}
.onb-hero-card::before { content: ''; position: absolute; inset: 0; background: var(--inset); pointer-events: none; }
.onb-hero-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border2); }
.onb-hero-card .hc-accent { position: absolute; top: 0; left: 0; right: 0; height: 2px; }
.onb-hero-card .hc-label { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .6px; margin-bottom: 6px; }
.onb-hero-card .hc-val { font-size: 28px; font-weight: 800; letter-spacing: -1.5px; line-height: 1; font-family: 'Inter', system-ui, sans-serif; }
.onb-hero-card .hc-sub { font-size: 10px; color: var(--text3); margin-top: 6px; display: flex; align-items: center; gap: 4px; }
.onb-hero-card .hc-bar { height: 3px; background: var(--bg2); border-radius: 2px; margin-top: 10px; overflow: hidden; }
.onb-hero-card .hc-bar-fill { height: 100%; border-radius: 2px; transition: width .6s ease; }

.onb-dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.onb-dash-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.onb-dash-panel.full { grid-column: 1 / -1; }
.onb-dp-h {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.onb-dp-h h4 { font-size: 12px; font-weight: 700; display: flex; align-items: center; gap: 8px; font-family: 'Inter', system-ui, sans-serif; color: var(--text1); }
.onb-dp-h h4 .ico { font-size: 16px; }
.onb-dp-h .dp-badge { font-size: 10px; font-weight: 800; padding: 2px 9px; border-radius: 10px; }
.onb-dp-b { padding: 14px 18px; max-height: 360px; overflow-y: auto; }
.onb-dp-b::-webkit-scrollbar { width: 3px; }
.onb-dp-b::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.onb-rank-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.04); }
.onb-rank-item:last-child { border-bottom: none; }
.onb-rank-pos {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 800;
  flex-shrink: 0;
}
.onb-rank-pos.gold { background: rgba(251,191,36,.15); color: #fbbf24; }
.onb-rank-pos.silver { background: rgba(255,255,255,.08); color: #999; }
.onb-rank-pos.bronze { background: rgba(202,138,4,.15); color: #ca8a04; }
.onb-rank-pos.std { background: var(--gray-bg); color: var(--text3); }
.onb-rank-info { flex: 1; min-width: 0; }
.onb-rank-name { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text1); }
.onb-rank-meta { font-size: 10px; color: var(--text3); }
.onb-rank-val { font-size: 14px; font-weight: 800; flex-shrink: 0; font-family: 'Inter', system-ui, sans-serif; }
.onb-rank-bar { flex: 0 0 80px; height: 5px; background: var(--bg2); border-radius: 3px; overflow: hidden; }
.onb-rank-bar-fill { height: 100%; border-radius: 3px; }

.onb-geo-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.onb-geo-chip {
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: all .15s;
  border: 1px solid var(--border);
  background: var(--card);
}
.onb-geo-chip:hover { transform: scale(1.05); box-shadow: 0 4px 16px rgba(0,0,0,.3); border-color: var(--border2); }
.onb-geo-chip .gc-flag { font-size: 16px; }
.onb-geo-chip .gc-count { font-size: 13px; font-weight: 800; font-family: 'Inter', system-ui, sans-serif; }
.onb-geo-chip .gc-label { color: var(--text2); }

/* V3: Detail drawer */
.onb-drawer-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 480;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 20px;
  overflow-y: auto;
}
.onb-drawer-bg.open { display: flex; }
.onb-drawer {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  max-width: 700px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  animation: mi .25s ease;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.onb-drawer-h {
  padding: 16px 22px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}
.onb-drawer-h h3 { font-size: 15px; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; }
.onb-drawer-b { padding: 16px 22px; overflow-y: auto; flex: 1; }
.onb-drawer-list { list-style: none; padding: 0; margin: 0; }
.onb-drawer-list li {
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.onb-drawer-list li:last-child { border-bottom: none; }
.odl-client { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--text1); }
.odl-detail { font-size: 11px; color: var(--text2); flex-shrink: 0; text-align: right; line-height: 1.5; }

/* V4: Montant */
.onb-montant-wrap { display: flex; gap: 0; align-items: center; }
.onb-montant-cur {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px 0 0 4px;
  border: 1px solid var(--border);
  background: var(--bg2);
  color: var(--text2);
  cursor: pointer;
  min-width: 30px;
  text-align: center;
}
.onb-montant-val {
  font-size: 11px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 2px 5px;
  border-radius: 0 4px 4px 0;
  border: 1px solid var(--border);
  border-left: 0;
  background: var(--card);
}

/* V4: Pie */
.onb-pie-wrap { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; padding: 8px 0; }
.onb-pie-legend { display: flex; flex-direction: column; gap: 4px; }
.onb-pie-leg-item { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text2); }
.onb-pie-leg-dot { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }

/* V4: PDF */
.onb-pdf-zone {
  border: 1.5px dashed rgba(255,255,255,.15);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
  cursor: pointer;
  transition: all .2s;
  margin-top: 10px;
}
.onb-pdf-zone:hover { border-color: var(--accent); background: var(--accent-soft); }
.onb-pdf-list { margin-top: 8px; }
.onb-pdf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--bg2);
  border-radius: 6px;
  margin-bottom: 4px;
  font-size: 11px;
  border: 1px solid var(--border);
}
.onb-pdf-item .pdf-ico { color: var(--red); font-size: 16px; flex-shrink: 0; }
.onb-pdf-item .pdf-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onb-pdf-item .pdf-del { cursor: pointer; color: var(--red); font-size: 14px; font-weight: 700; padding: 0 4px; border-radius: 3px; transition: background .15s; }
.onb-pdf-item .pdf-del:hover { background: var(--red-bg); }

/* V4: Chef de projet */
.onb-cdp-tag {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--purple-bg);
  color: var(--purple);
  cursor: pointer;
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* V6: Row highlights */
.onb-tw tbody tr.onb-row-tacite { background: linear-gradient(90deg, rgba(79,121,255,.12), rgba(79,121,255,.22)) !important; }
.onb-tw tbody tr.onb-row-tacite td.onb-sticky { background: rgba(79,121,255,.16) !important; }
.onb-tw tbody tr.onb-row-3ans { background: linear-gradient(90deg, rgba(155,111,255,.12), rgba(155,111,255,.22)) !important; }
.onb-tw tbody tr.onb-row-3ans td.onb-sticky { background: rgba(155,111,255,.16) !important; }
.onb-tw tbody tr.onb-row-5ans { background: linear-gradient(90deg, rgba(5,150,105,.18), rgba(5,150,105,.30)) !important; }
.onb-tw tbody tr.onb-row-5ans td.onb-sticky { background: rgba(5,150,105,.22) !important; }
.onb-tw tbody tr.onb-row-done { background: linear-gradient(90deg, rgba(15,202,122,.16), rgba(15,202,122,.28)) !important; }
.onb-tw tbody tr.onb-row-done td.onb-sticky { background: rgba(15,202,122,.20) !important; }
.onb-tw tbody tr.onb-row-renewed { background: linear-gradient(90deg, rgba(155,111,255,.18), rgba(155,111,255,.32)) !important; }
.onb-tw tbody tr.onb-row-renewed td.onb-sticky { background: rgba(155,111,255,.24) !important; }

.onb-row-legend { display: flex; gap: 12px; margin-bottom: 10px; font-size: 10px; align-items: center; flex-wrap: wrap; }
.onb-row-legend-item { display: flex; align-items: center; gap: 4px; color: var(--text3); }
.onb-row-legend-swatch { width: 14px; height: 10px; border-radius: 3px; }

/* V6: ARR card */
.onb-arr-card {
  background: linear-gradient(135deg, rgba(79,121,255,.15), rgba(155,111,255,.1));
  border: 1px solid rgba(79,121,255,.2);
  border-radius: 12px;
  padding: 20px 24px;
  position: relative;
  overflow: hidden;
}
.onb-arr-card .arr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .7; margin-bottom: 4px; color: var(--text2); }
.onb-arr-card .arr-val { font-size: 28px; font-weight: 800; letter-spacing: -1px; font-family: 'Inter', system-ui, sans-serif; color: var(--text1); }
.onb-arr-card .arr-sub { font-size: 11px; opacity: .6; margin-top: 4px; color: var(--text2); }
.onb-arr-card::after { content: ''; position: absolute; top: -30px; right: -30px; width: 100px; height: 100px; border-radius: 50%; background: rgba(255,255,255,.04); }

/* V7: Client search */
.onb-client-search { position: relative; margin-bottom: 16px; }
.onb-client-search input {
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  padding: 10px 14px 10px 36px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--text1);
  outline: none;
  box-sizing: border-box;
  color-scheme: dark;
  transition: all .15s;
}
.onb-client-search input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.onb-client-search .cs-ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 15px; color: var(--text3); pointer-events: none; }
.onb-client-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--card2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  max-height: 320px;
  overflow-y: auto;
  z-index: 20;
  display: none;
  margin-top: 4px;
}
.onb-client-results.open { display: block; }
.onb-cr-item {
  padding: 10px 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .1s;
}
.onb-cr-item:last-child { border-bottom: none; }
.onb-cr-item:hover { background: var(--accent-soft); }
.onb-cr-name { font-weight: 700; font-size: 12px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text1); }
.onb-cr-meta { display: flex; gap: 6px; align-items: center; flex-shrink: 0; }
.onb-cr-tag { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }

/* ── ADMIN ── */
.adm-tabs { display: flex; gap: 3px; padding: 12px 18px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.adm-tab {
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: inherit;
  transition: all .18s;
}
.adm-tab.active { background: var(--accent-soft); color: var(--accent); }
.adm-tab:hover:not(.active) { color: var(--text2); }
.adm-i {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid transparent;
  transition: all .15s;
  margin-bottom: 4px;
}
.adm-i:hover { background: var(--card2); border-color: var(--border); }
.adm-ft { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ── SCRIPT MODAL ── */
.scr-bg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 400;
  align-items: center;
  justify-content: center;
}
.scr-bg.open { display: flex; }
.scr-m {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 14px;
  width: 600px;
  max-width: 94vw;
  box-shadow: var(--shadow-lg);
  animation: modalIn .22s ease;
}
.scr-h { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.scr-h h3 { font-size: 14px; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; }
.scr-b { padding: 14px 18px; }
.scr-b textarea {
  width: 100%;
  min-height: 260px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.7;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  resize: vertical;
  box-sizing: border-box;
  color-scheme: dark;
}
.scr-b textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.scr-f { padding: 12px 18px; border-top: 1px solid var(--border); display: flex; gap: 8px; justify-content: flex-end; }

/* ── CHECKLIST MODAL ── */
.clm-h { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }
.clm-h h3 { font-size: 15px; font-weight: 700; font-family: 'Inter', system-ui, sans-serif; }
.clm-b { padding: 12px 20px; overflow-y: auto; flex: 1; }
.clm-sec { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--text3); padding: 10px 0 5px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.clm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background .15s;
  cursor: pointer;
  color: var(--text);
  font-size: 13px;
}
.clm-row:hover { background: var(--card2); }
.clm-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }
.clm-prog { text-align: center; padding: 16px; font-size: 12px; color: var(--text3); }
.clm-ft { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
#clName {
  flex: 1;
  min-width: 140px;
  font-family: inherit;
  font-size: 13px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg2);
  color: var(--text1);
  outline: none;
  color-scheme: dark;
}
#clName:focus { border-color: var(--accent); }
.clm-ok {
  padding: 8px 18px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Column filter row */
tr.cf th { background: var(--bg2) !important; padding: 3px 4px !important; }
.cfs {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  width: 100%;
  max-width: 100px;
  padding: 3px 5px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg);
  color: var(--text);
  outline: none;
  color-scheme: dark;
}
.cfs:focus { border-color: var(--accent); }

/* CMS items etc. */
.cmss { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Pipeline/progress */
.pip { height: 7px; background: var(--bg2); border-radius: 4px; overflow: hidden; margin-top: 4px; }
.pip-s { font-size: 10px; color: var(--text3); margin-top: 2px; font-family: 'JetBrains Mono', monospace; }

/* Mobile banner */
.onb-mobile-banner {
  display: none;
  background: var(--orange-bg);
  border: 1px solid rgba(252,169,46,.2);
  color: var(--orange);
  font-size: 12px;
  font-weight: 600;
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 14px;
}

/* ── RESPONSIVE ── */
@media(max-width: 1200px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .main { padding: 16px; }
}
@media(max-width: 768px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .wg { grid-template-columns: repeat(3, 1fr); }
  .cmss { grid-template-columns: 1fr; }
  .wpl-g { grid-template-columns: 1fr; }
}

/* ── MOBILE NAV (UNIFIED) ── */
#mobNavUnified { display: none; }
@media(max-width: 768px) {
  #mobNavUnified { display: flex !important; flex-direction: column; position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(9,11,16,.97); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-top: 1px solid var(--border); box-shadow: 0 -4px 30px rgba(0,0,0,.5); padding-bottom: max(4px, env(safe-area-inset-bottom)); }
  body.light-mode #mobNavUnified { background: rgba(255,255,255,.97); border-top-color: rgba(0,0,0,.08); box-shadow: 0 -2px 20px rgba(0,0,0,.06); }
  .mob-sections { display: flex; align-items: center; padding: 5px 6px 2px; gap: 2px; border-bottom: 1px solid var(--border); }
  .mob-sec-btn { display: flex; align-items: center; gap: 3px; padding: 5px 9px; border: none; background: none; color: var(--text3); font-size: 10px; font-weight: 700; font-family: inherit; cursor: pointer; border-radius: 6px; transition: all .15s; white-space: nowrap; }
  .mob-sec-btn.active { background: var(--accent-soft); color: var(--accent); }
  .mob-sec-btn .mob-sec-ico { font-size: 12px; }
  .mob-sec-util { margin-left: auto; padding: 5px 6px; position: relative; }
  .mob-sec-util+.mob-sec-util { margin-left: 0; }
  .mob-notif-dot { position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
  body.light-mode .mob-sec-btn.active { background: rgba(92,124,250,.1); color: #4F6AE8; }
  body.section-partenaires .mob-sec-btn.active { background: rgba(245,162,58,.12)!important; color: #f5a23a!important; }
  body.section-partenaires .mob-sub-btn.active { color: #f5a23a; background: rgba(245,162,58,.1); }
  body.light-mode.section-partenaires .mob-sub-btn.active { color: #d97706; background: rgba(245,162,58,.12); }
  .mob-sub { display: flex; align-items: center; padding: 3px 6px; gap: 1px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mob-sub::-webkit-scrollbar { display: none; }
  .mob-sub-btn { flex-shrink: 0; display: flex; align-items: center; gap: 3px; padding: 7px 9px; border: none; background: none; color: var(--text3); font-size: 9.5px; font-weight: 600; font-family: inherit; cursor: pointer; border-radius: 6px; transition: all .15s; white-space: nowrap; }
  .mob-sub-btn.active { color: var(--text1); background: var(--card2); }
  body.light-mode .mob-sub-btn.active { background: rgba(0,0,0,.06); color: #1a1a2e; }

  body { padding-bottom: 82px; }
  #mT table th:nth-child(1),#mT table td:nth-child(1),#lcT table th:nth-child(1),#lcT table td:nth-child(1),
  #mT table th:nth-child(2),#mT table td:nth-child(2),#lcT table th:nth-child(2),#lcT table td:nth-child(2),
  #mT table th:nth-child(3),#mT table td:nth-child(3),#lcT table th:nth-child(3),#lcT table td:nth-child(3),
  #mT table th:nth-child(4),#mT table td:nth-child(4),#lcT table th:nth-child(4),#lcT table td:nth-child(4),
  #mT tr.gh th:nth-child(1),#lcT tr.gh th:nth-child(1) {
    position: static !important; left: auto !important; z-index: auto !important;
    border-right: none !important; box-shadow: none !important;
  }
  .nav-tabs { display: none !important; }
  .mn { padding: 10px; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .kk { padding: 10px 12px !important; border-radius: 10px !important; }
  .kk .kv { font-size: 20px !important; } .kk .kl { font-size: 8px !important; } .kk .ks { font-size: 8px !important; }
  .lang-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 4px !important; }
  .stit { font-size: 12px !important; margin-bottom: 8px !important; }
  .als { margin-bottom: 10px; }
  .ag { max-height: none !important; }
  .ac { padding: 8px 10px !important; margin-bottom: 4px !important; }
  .wpl-h { flex-direction: column; gap: 6px; align-items: flex-start !important; }
  .wpl-g { grid-template-columns: 1fr !important; }
  .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0 10px; }
  table { font-size: 10px !important; }
  .fb { flex-direction: column; gap: 6px; padding: 8px !important; }
  .fb select, .fb input[type="text"] { font-size: 11px !important; padding: 6px 8px !important; width: 100% !important; max-width: 100% !important; }
  .fb .hb { font-size: 10px !important; padding: 5px 10px !important; width: 100% !important; }
  #mT, #lcT { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -10px; padding: 0; }
  #mT table, #lcT table { min-width: 1600px; }
  .cobg, .clbg, .ecbg, .scrbg, .rbg, .admbg { align-items: flex-end !important; }
  .cmod, .clm, .efmod, .scr-m, .adm-m { max-width: 100vw !important; width: 100vw !important; border-radius: 20px 20px 0 0 !important; margin: 0 !important; max-height: 88vh !important; animation: mob-slide .3s ease !important; }
  @keyframes mob-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
  .efh, .adm-h { padding: 14px 16px !important; }
  .efh h3, .adm-h h3 { font-size: 14px !important; }
  .efb, .adm-b { padding: 10px 16px !important; max-height: 60vh !important; -webkit-overflow-scrolling: touch; }
  .efa, .adm-ft { padding: 10px 16px !important; }
  .efa { flex-direction: column-reverse !important; gap: 8px !important; }
  .efa .efa-l, .efa .efa-r { width: 100% !important; display: flex !important; }
  .efa .hb { flex: 1 !important; text-align: center !important; padding: 12px !important; font-size: 13px !important; border-radius: 8px !important; }
  .rbox { max-width: 100vw !important; width: 100vw !important; border-radius: 20px 20px 0 0 !important; margin: 0 !important; padding: 20px 16px !important; }
  .ract { flex-direction: column !important; }
  .ract .hb { width: 100% !important; text-align: center !important; padding: 12px !important; border-radius: 8px !important; }
  .adm-tabs { flex-wrap: wrap !important; gap: 4px !important; padding: 8px 12px !important; }
  .adm-tab { font-size: 11px !important; padding: 7px 12px !important; border-radius: 7px !important; }
  .wh { flex-direction: column; gap: 6px; align-items: flex-start !important; }
  .wn { align-self: flex-end; }
  .wg { grid-template-columns: 1fr !important; gap: 6px !important; }
  .wd { min-height: auto !important; padding: 8px !important; }
  .eq-sum { grid-template-columns: repeat(2, 1fr) !important; }
  .eq-grid { grid-template-columns: 1fr !important; }
  .onb-dash-hero { grid-template-columns: repeat(2, 1fr) !important; }
  .onb-dash-row { grid-template-columns: 1fr !important; }
  .onb-mobile-banner { display: block; }
  #eqPanel > div[style*="overflow"] { margin: 0 -10px; padding: 0 10px; overflow-x: auto; }
  #eqPanel table { min-width: 800px; }
}
@media(max-width: 380px) {
  .kpi-grid { grid-template-columns: 1fr 1fr !important; gap: 5px !important; }
  .mob-nav-btn { font-size: 8px; }
  .mob-ico { font-size: 16px; width: 32px; height: 24px; }
}

/* ── USER MGMT MODAL ── */
#userMgmtM .adm-m, #userMgmtM .adm-b { background: var(--card); }

/* ── select option dark ── */
select option { background: var(--card2); color: var(--text); }

/* ── Checklist filter tabs ── */
.cfb { display: flex; gap: 4px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--border); }
.cft {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: inherit;
  transition: all .15s;
}
.cft.active { background: var(--accent-soft); color: var(--accent); }
.cft:hover:not(.active) { color: var(--text2); }


/* ══════════════════════════════════════════════
   LIGHT MODE VARIABLES
   ══════════════════════════════════════════════ */
body.light-mode {
  --bg: #F4F5F9;
  --bg2: #ECEEF5;
  --card: #FFFFFF;
  --card2: #F7F8FC;
  --border: rgba(0,0,0,.08);
  --border2: rgba(0,0,0,.14);
  --text: #1A1D2E;
  --text2: #5A5E75;
  --text3: #9296AE;
  --text1: #0D0F1A;
  --accent: #3361FF;
  --accent-soft: rgba(51,97,255,.1);
  --accent-glow: rgba(51,97,255,.2);
  --purple: #7B4FFF;
  --purple-bg: rgba(123,79,255,.1);
  --green: #0EA060;
  --green-bg: rgba(14,160,96,.1);
  --red: #E03040;
  --red-bg: rgba(224,48,64,.1);
  --orange: #D97706;
  --orange-bg: rgba(217,119,6,.1);
  --cyan: #0891B2;
  --cyan-bg: rgba(8,145,178,.1);
  --gray-bg: rgba(0,0,0,.04);
  --shadow: 0 1px 0 rgba(255,255,255,.8), 0 2px 12px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 40px rgba(0,0,0,.12);
  --inset: inset 0 1px 0 rgba(255,255,255,.9);
}

body.light-mode::before { display: none; }

body.light-mode .header {
  background: rgba(255,255,255,.97);
  box-shadow: 0 1px 10px rgba(0,0,0,.06);
}
body.light-mode .nav-tabs {
  background: rgba(0,0,0,.04);
}
body.light-mode .nav-tab.active {
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}
body.light-mode .tb {
  background: rgba(0,0,0,.05);
  border-color: rgba(0,0,0,.09);
}
body.light-mode .hb {
  background: #fff;
  border-color: rgba(0,0,0,.1);
}
body.light-mode .hb:hover { background: #F4F5F9; }
body.light-mode .fsel, body.light-mode .finp,
body.light-mode .efi, body.light-mode .efse,
body.light-mode .onb-col-box input, body.light-mode .onb-col-box select,
body.light-mode .lg-inp, body.light-mode .onb-brief-ta,
body.light-mode .scr-b textarea, body.light-mode #clName,
body.light-mode .onb-client-search input, body.light-mode .dpo input[type=date] {
  background: #fff;
  color: var(--text);
  color-scheme: light;
}
body.light-mode .ddm, body.light-mode .dpo { background: #fff; }
body.light-mode .ddi { color: var(--text); }
body.light-mode select option { background: #fff; color: var(--text); }
body.light-mode tbody tr:hover { background: rgba(51,97,255,.03) !important; }
body.light-mode tr:hover td.zp { background: rgba(51,97,255,.04) !important; }
body.light-mode tr:hover td.zi { background: rgba(123,79,255,.04) !important; }
body.light-mode tr:hover td.zo { background: rgba(217,119,6,.04) !important; }
body.light-mode tr:hover td.zt { background: rgba(14,160,96,.04) !important; }
body.light-mode tr:hover td.zs { background: rgba(224,48,64,.04) !important; }
body.light-mode .wd.today { box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow); }
body.light-mode .wi.script { background: rgba(51,97,255,.15); color: #2045c9; }
body.light-mode .wi.sb { background: rgba(123,79,255,.15); color: #6535e0; }
body.light-mode .wi.video { background: rgba(217,119,6,.15); color: #92560a; }
body.light-mode .wi.trad { background: rgba(14,160,96,.15); color: #086b41; }
body.light-mode .wi.sensi { background: rgba(224,48,64,.15); color: #b31e2c; }
body.light-mode .ip-step.done { background: #d1fae5; color: #065f46; border-color: #6ee7b7; }
body.light-mode .ip-step.pend { background: #fef3c7; color: #92400e; border-color: #fcd34d; }
body.light-mode .onb-report-header h1 { color: var(--text1); }
body.light-mode .onb-report-header { border-bottom-color: var(--border2); }
body.light-mode .lg-scr { background: radial-gradient(ellipse at 20% 50%, rgba(51,97,255,.08) 0%, transparent 60%), radial-gradient(ellipse at 80% 50%, rgba(123,79,255,.06) 0%, transparent 60%), #F0F2FA; }
body.light-mode .lg-card { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: 0 20px 60px rgba(0,0,0,.12); }
body.light-mode .lg-inp { background: #F5F7FA; border: 1.5px solid #D0D5E0; color: #1a1a2e; }
body.light-mode .lg-inp:focus { border-color: #5C7CFA; box-shadow: 0 0 0 3px rgba(92,124,250,.15); background: #fff; }
body.light-mode .lg-inp::placeholder { color: #9CA3B4; }
body.light-mode .lg-label { color: #6B7280; }
body.light-mode .lg-tbtn { color: #9CA3B4; }
body.light-mode .lg-tbtn.active { background: rgba(92,124,250,.1); color: #4F6AE8; }
body.light-mode .lg-tabs { background: #F0F2F8; border-color: #E0E3EB; }
body.light-mode .lg-card-title { color: #6B7280; }
body.light-mode .lg-bg-image { opacity: .15; }

/* Login background image */
.lg-bg-image {
  position: absolute;
  inset: 0;
  background: url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?w=1400&q=80') center/cover no-repeat;
  opacity: .12;
  z-index: 0;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}
body.light-mode .onb-arr-card { background: linear-gradient(135deg, rgba(51,97,255,.08), rgba(123,79,255,.06)); border-color: rgba(51,97,255,.15); }

/* ── THEME TOGGLE BUTTON ── */
.theme-toggle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--card2);
  color: var(--text2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  transition: all .2s;
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--border2); color: var(--text1); background: var(--gray-bg); }

/* ══════════════════════════════════════════════
   MISSING: CONTENU EN PRODUCTION (inprog-grid)
   ══════════════════════════════════════════════ */
.inprog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 8px;
  margin-bottom: 20px;
}
.ip-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .2s;
  position: relative;
  overflow: hidden;
}
.ip-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--inset);
  pointer-events: none;
}
.ip-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border2);
}
.ip-name {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text1);
}
.ip-fam {
  font-size: 9px;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 8px;
}
.ip-steps { display: flex; gap: 3px; flex-wrap: wrap; }
.ip-step {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid transparent;
}
.ip-step.done { background: rgba(15,202,122,.15); color: var(--green); border-color: rgba(15,202,122,.3); }
.ip-step.pend { background: rgba(252,169,46,.15); color: var(--orange); border-color: rgba(252,169,46,.3); }
.ip-step.none { background: var(--gray-bg); color: var(--text3); border-color: var(--border); }
.ip-bar {
  height: 3px;
  background: var(--bg2);
  border-radius: 2px;
  margin-top: 10px;
  overflow: hidden;
}
.ip-bar-fill {
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--accent), var(--purple));
  transition: width .6s ease;
}

/* ══════════════════════════════════════════════
   MISSING: DONE LIST
   ══════════════════════════════════════════════ */
.done-list { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; margin-bottom: 20px; }
.done-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
}
.done-row:hover { background: rgba(15,202,122,.05); border-color: rgba(15,202,122,.2); }
.done-row .dr-icon { color: var(--green); font-size: 14px; flex-shrink: 0; }
.done-row .dr-name { font-weight: 700; font-size: 12px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text1); }
.done-row .dr-fam { font-size: 10px; color: var(--text3); flex-shrink: 0; }

/* ══════════════════════════════════════════════
   MISSING: CAPSULE DETAIL MODAL (cmod)
   ══════════════════════════════════════════════ */
.mbg {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  backdrop-filter: blur(8px);
  z-index: 400;
  align-items: flex-start;
  justify-content: center;
  padding: 30px 20px;
  overflow-y: auto;
}
.mbg.open { display: flex; }

.cmod {
  background: var(--card);
  border: 1px solid var(--border2);
  border-radius: 16px;
  max-width: 780px;
  width: 100%;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: mi .25s ease;
}
.cmh {
  padding: 22px 26px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
.cmt { font-size: 17px; font-weight: 700; line-height: 1.3; font-family: 'Inter', system-ui, sans-serif; color: var(--text1); }
.cmm { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.cmtg {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 5px;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.cmtg.rm { background: var(--gray-bg); color: var(--text2); }
.cmtg.fam { background: var(--accent-soft); color: var(--accent); }
.cmtg.them { background: var(--purple-bg); color: var(--purple); }

.cmb { padding: 20px 26px 26px; overflow-y: auto; max-height: 70vh; }

/* Pipeline progress stepper */
.cmp {
  display: flex;
  gap: 4px;
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--bg2);
  border-radius: 12px;
  border: 1px solid var(--border);
}
.cms { flex: 1; text-align: center; position: relative; }
.cmsd {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  margin: 0 auto 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  border: 2px solid var(--border2);
  background: var(--card);
  color: var(--text3);
  transition: all .2s;
}
.cms.done .cmsd { background: var(--green); border-color: var(--green); color: #06101c; box-shadow: 0 0 10px rgba(15,202,122,.3); }
.cms.active .cmsd { background: var(--orange); border-color: var(--orange); color: #fff; box-shadow: 0 0 0 4px var(--orange-bg); }
.cms.blocked .cmsd { background: var(--red); border-color: var(--red); color: #fff; }
.cmsl { font-size: 9px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .3px; }
.cmsw { font-size: 8px; font-weight: 700; margin-top: 2px; }
.cmsw.aw { color: var(--accent); }
.cmsw.fs { color: var(--purple); }
.cmcn {
  position: absolute;
  top: 14px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--border);
}
.cms.done .cmcn { background: var(--green); }

.cmss { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmsec {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.cmsec.full { grid-column: 1 / -1; }
.cmst {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text3);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cmdt { width: 8px; height: 8px; border-radius: 3px; }
.cmr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  border-bottom: 1px solid rgba(255,255,255,.04);
  font-size: 12px;
}
body.light-mode .cmr { border-bottom-color: var(--border); }
.cmr:last-child { border-bottom: none; }
.cmrl { color: var(--text2); font-weight: 500; font-size: 11px; }
.cmrv { font-weight: 600; color: var(--text1); font-size: 12px; }

/* ── STICKY COLUMNS: OPAQUE FIX ── */
/* Dark mode sticky backgrounds */
#mT table th:nth-child(1),#mT table td:nth-child(1),
#lcT table th:nth-child(1),#lcT table td:nth-child(1) { background: #111520 !important; }
#mT table th:nth-child(2),#mT table td:nth-child(2),
#lcT table th:nth-child(2),#lcT table td:nth-child(2) { background: #111520 !important; }
#mT table th:nth-child(3),#mT table td:nth-child(3),
#lcT table th:nth-child(3),#lcT table td:nth-child(3) { background: #111520 !important; }
#mT table th:nth-child(4),#mT table td:nth-child(4),
#lcT table th:nth-child(4),#lcT table td:nth-child(4) { background: #111520 !important; }

/* Sticky hover state */
#mT tr:hover td:nth-child(1),#mT tr:hover td:nth-child(2),
#mT tr:hover td:nth-child(3),#mT tr:hover td:nth-child(4),
#lcT tr:hover td:nth-child(1),#lcT tr:hover td:nth-child(2),
#lcT tr:hover td:nth-child(3),#lcT tr:hover td:nth-child(4) { background: #161B28 !important; }

#mT tr.rd td:nth-child(1),#mT tr.rd td:nth-child(2),
#mT tr.rd td:nth-child(3),#mT tr.rd td:nth-child(4),
#lcT tr.rd td:nth-child(1),#lcT tr.rd td:nth-child(2),
#lcT tr.rd td:nth-child(3),#lcT tr.rd td:nth-child(4) { background: #0f1c18 !important; }

#mT tr.r25 td:nth-child(1),#mT tr.r25 td:nth-child(2),
#mT tr.r25 td:nth-child(3),#mT tr.r25 td:nth-child(4),
#lcT tr.r25 td:nth-child(1),#lcT tr.r25 td:nth-child(2),
#lcT tr.r25 td:nth-child(3),#lcT tr.r25 td:nth-child(4) { background: #131825 !important; }

/* thead sticky background */
#mT tr.ch th:nth-child(1),#mT tr.ch th:nth-child(2),
#mT tr.ch th:nth-child(3),#mT tr.ch th:nth-child(4),
#lcT tr.ch th:nth-child(1),#lcT tr.ch th:nth-child(2),
#lcT tr.ch th:nth-child(3),#lcT tr.ch th:nth-child(4) { background: #161B28 !important; }

/* gh row sticky */
#mT tr.gh th:nth-child(1),#lcT tr.gh th:nth-child(1) { background: #111520 !important; }

/* Light mode sticky overrides */
body.light-mode #mT table th:nth-child(1),body.light-mode #mT table td:nth-child(1),
body.light-mode #lcT table th:nth-child(1),body.light-mode #lcT table td:nth-child(1) { background: #FFFFFF !important; }
body.light-mode #mT table th:nth-child(2),body.light-mode #mT table td:nth-child(2),
body.light-mode #lcT table th:nth-child(2),body.light-mode #lcT table td:nth-child(2) { background: #FFFFFF !important; }
body.light-mode #mT table th:nth-child(3),body.light-mode #mT table td:nth-child(3),
body.light-mode #lcT table th:nth-child(3),body.light-mode #lcT table td:nth-child(3) { background: #FFFFFF !important; }
body.light-mode #mT table th:nth-child(4),body.light-mode #mT table td:nth-child(4),
body.light-mode #lcT table th:nth-child(4),body.light-mode #lcT table td:nth-child(4) { background: #FFFFFF !important; }
body.light-mode #mT tr:hover td:nth-child(1),body.light-mode #mT tr:hover td:nth-child(2),
body.light-mode #mT tr:hover td:nth-child(3),body.light-mode #mT tr:hover td:nth-child(4),
body.light-mode #lcT tr:hover td:nth-child(1),body.light-mode #lcT tr:hover td:nth-child(2),
body.light-mode #lcT tr:hover td:nth-child(3),body.light-mode #lcT tr:hover td:nth-child(4) { background: #F7F8FC !important; }
body.light-mode #mT tr.rd td:nth-child(1),body.light-mode #mT tr.rd td:nth-child(2),
body.light-mode #mT tr.rd td:nth-child(3),body.light-mode #mT tr.rd td:nth-child(4),
body.light-mode #lcT tr.rd td:nth-child(1),body.light-mode #lcT tr.rd td:nth-child(2),
body.light-mode #lcT tr.rd td:nth-child(3),body.light-mode #lcT tr.rd td:nth-child(4) { background: #f0fdf9 !important; }
body.light-mode #mT tr.r25 td:nth-child(1),body.light-mode #mT tr.r25 td:nth-child(2),
body.light-mode #mT tr.r25 td:nth-child(3),body.light-mode #mT tr.r25 td:nth-child(4),
body.light-mode #lcT tr.r25 td:nth-child(1),body.light-mode #lcT tr.r25 td:nth-child(2),
body.light-mode #lcT tr.r25 td:nth-child(3),body.light-mode #lcT tr.r25 td:nth-child(4) { background: #FAFAFA !important; }
body.light-mode #mT tr.ch th:nth-child(1),body.light-mode #mT tr.ch th:nth-child(2),
body.light-mode #mT tr.ch th:nth-child(3),body.light-mode #mT tr.ch th:nth-child(4),
body.light-mode #lcT tr.ch th:nth-child(1),body.light-mode #lcT tr.ch th:nth-child(2),
body.light-mode #lcT tr.ch th:nth-child(3),body.light-mode #lcT tr.ch th:nth-child(4) { background: #F7F8FC !important; }
body.light-mode #mT tr.gh th:nth-child(1),body.light-mode #lcT tr.gh th:nth-child(1) { background: #FFFFFF !important; }

/* onb sticky light */
body.light-mode .onb-tw table th.onb-sticky,
body.light-mode .onb-tw table td.onb-sticky { background: #FFFFFF !important; }
body.light-mode .onb-tw tbody tr:hover td.onb-sticky { background: #F7F8FC !important; }

/* ── REPORT HEADER DARK ── */
.onb-report-header {
  display: none;
  text-align: center;
  padding: 20px 0 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 20px;
}
.onb-report-header h1 { font-size: 22px; font-weight: 800; color: var(--text1); margin: 0; font-family: 'Inter', system-ui, sans-serif; }
.onb-report-header .rpt-date { font-size: 12px; color: var(--text3); margin-top: 4px; }
.onb-report-header .rpt-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }

/* ── V8/V9 ADDITIONS ── */
.onb-tw tbody tr { cursor: pointer; }
.onb-tw tbody tr.onb-row-selected { background: rgba(79,121,255,.12) !important; box-shadow: inset 0 0 0 1px var(--accent); }
.onb-tw tbody tr.onb-row-selected.onb-row-tacite { background: rgba(79,121,255,.32) !important; }
.onb-tw tbody tr.onb-row-selected.onb-row-3ans { background: rgba(155,111,255,.32) !important; }
.onb-tw tbody tr.onb-row-selected.onb-row-5ans { background: rgba(5,150,105,.36) !important; }
.onb-dp-b table th, .onb-dp-b table td { border: none; }
.onb-dp-b table { border-collapse: collapse; }
.onb-hero-card .hc-val { font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: tabular-nums; }

/* ── MOBILE ADDITIONS ── */
@media(max-width: 768px) {
  .cmb { padding: 10px 16px !important; max-height: 55vh !important; }
  .cmh { padding: 14px 16px !important; }
  .cmt { font-size: 14px !important; }
  .cmss { grid-template-columns: 1fr !important; }
  .inprog-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .done-row { padding: 6px 10px !important; }
  .onb-tw table th.onb-sticky, .onb-tw table td.onb-sticky { position: static !important; }
}


/* ── ONBOARDING FONT — Corporate ── */
/* Replace Syne with Inter-style Syne for titles but use sharper weights */
#onboardingSection,
#onboardingSection .stit,
#onboardingSection .onb-kpi-val,
#onboardingSection .onb-hero-card .hc-val,
#onboardingSection .onb-dp-h h4,
#onboardingSection .onb-rank-val,
#onboardingSection .onb-arr-card .arr-val,
.onb-section .stit {
  font-family: 'Inter', system-ui, sans-serif !important;
  letter-spacing: -.5px;
}
#onboardingSection .onb-kpi-val,
#onboardingSection .onb-hero-card .hc-val,
#onboardingSection .onb-rank-val,
#onboardingSection .onb-arr-card .arr-val {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}
#onboardingSection .onb-kpi-label,
#onboardingSection .onb-kpi-section-title,
#onboardingSection .onb-dp-h h4,
#onboardingSection .onb-hero-card .hc-label {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: .4px !important;
  text-transform: uppercase !important;
}

/* ── TABLE FAMILY COLUMN — better contrast ── */
.fam-tag {
  font-weight: 800 !important;
  letter-spacing: .2px !important;
  font-size: 10.5px !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06);
}
/* Light mode fam tags sharper */
body.light-mode .fam-0 { background: #fce4ec; color: #ad1457 !important; border: 1px solid #f48fb1; }
body.light-mode .fam-1 { background: #e8eaf6; color: #283593 !important; border: 1px solid #9fa8da; }
body.light-mode .fam-2 { background: #e0f2f1; color: #00695c !important; border: 1px solid #80cbc4; }
body.light-mode .fam-3 { background: #eceff1; color: #37474f !important; border: 1px solid #b0bec5; }
body.light-mode .fam-4 { background: #fff3e0; color: #e65100 !important; border: 1px solid #ffb74d; }
body.light-mode .fam-5 { background: #ede7f6; color: #4527a0 !important; border: 1px solid #ce93d8; }
body.light-mode .fam-6 { background: #e1f5fe; color: #01579b !important; border: 1px solid #81d4fa; }
body.light-mode .fam-7 { background: #fff8e1; color: #f57f17 !important; border: 1px solid #ffe082; }
body.light-mode .fam-8 { background: #e8f5e9; color: #1b5e20 !important; border: 1px solid #a5d6a7; }
body.light-mode .fam-9 { background: #fce4ec; color: #880e4f !important; border: 1px solid #f48fb1; }
body.light-mode .fam-10 { background: #e0f7fa; color: #006064 !important; border: 1px solid #80deea; }
body.light-mode .fam-11 { background: #f3e5f5; color: #6a1b9a !important; border: 1px solid #ce93d8; }

/* ── SUIVI VALIDATIONS — eq-card fixes ── */
.eq-card {
  border-left: 3px solid transparent;
}
.eq-stat-v { color: var(--text1) !important; }
.eq-det-row { color: var(--text2); }
body.light-mode .eq-card { background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.05); }
body.light-mode .eq-stat { background: #F4F5F9; }
body.light-mode .eq-stat-v { color: #1A1D2E !important; }
body.light-mode .eq-sum-card { background: #fff; }
body.light-mode .eq-sum-v { color: #1A1D2E; }
body.light-mode .eq-det-row { color: #5A5E75; border-bottom-color: #eceef5; }
body.light-mode .tw table tr.ch th { background: #F7F8FC !important; color: #5A5E75 !important; }
body.light-mode tbody tr:hover { background: rgba(51,97,255,.025) !important; }

/* ── USER MGMT MODAL — premium redesign ── */
.um-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  margin-bottom: 8px;
  transition: all .15s;
}
.um-user:hover { border-color: var(--border2); }
.um-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 14px;
  color: #fff;
  flex-shrink: 0;
  font-family: 'Inter', system-ui, sans-serif;
  box-shadow: 0 0 12px rgba(0,0,0,.2);
}
.um-info { flex: 1; min-width: 0; }
.um-name { font-size: 13px; font-weight: 700; color: var(--text1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.um-email { font-size: 10px; color: var(--text3); margin-top: 1px; font-family: 'JetBrains Mono', monospace; }
.um-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.um-role-sel {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  padding: 5px 8px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--card);
  color: var(--text);
  outline: none;
  cursor: pointer;
  color-scheme: dark;
}
.um-role-sel:focus { border-color: var(--accent); }
body.light-mode .um-role-sel { color-scheme: light; }
.um-del {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 1px solid rgba(245,68,90,.2);
  background: var(--red-bg);
  color: var(--red);
  cursor: pointer;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.um-del:hover { background: var(--red); color: #fff; }
.um-add-form {
  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;
  background: var(--bg2);
  border: 1px dashed var(--border2);
}
.um-add-form input, .um-add-form select {
  display: block;
  width: 100%;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card);
  color: var(--text1);
  outline: none;
  margin-bottom: 8px;
  box-sizing: border-box;
  color-scheme: dark;
  transition: border-color .15s, box-shadow .15s;
}
.um-add-form input:focus, .um-add-form select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
body.light-mode .um-add-form input, body.light-mode .um-add-form select {
  background: #fff; color-scheme: light;
}
body.light-mode .um-user { background: #F7F8FC; }
body.light-mode .um-add-form { background: #F4F5F9; }

/* ── MOBILE ONBOARDING — bottom nav bar ── */
@media(max-width: 768px) {
  /* mobile header rules — see HEADER CLEAN block */
  .theme-toggle { display: flex !important; }
  .cu-wrap { display: flex !important; }
  .cu-name { display: none !important; }

  /* Mobile onboarding bottom nav */
  #mobNavOnb {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: rgba(9,11,16,.96);
    backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 30px rgba(0,0,0,.4);
  }
  body.light-mode #mobNavOnb {
    background: rgba(255,255,255,.96);
    border-top-color: rgba(0,0,0,.1);
    box-shadow: 0 -4px 20px rgba(0,0,0,.08);
  }
  #mobNavOnb.mob-hidden { display: none !important; }

  #mobNavTech {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 999;
    background: rgba(9,11,16,.95); backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    padding: 4px 0 max(4px, env(safe-area-inset-bottom));
    box-shadow: 0 -4px 30px rgba(0,0,0,.4);
    justify-content: space-around;
  }
  #mobNavTech.mob-hidden { display: none !important; }
  #mobNavTech:not(.mob-hidden) { display: flex !important; }
  #mobNavTech .mob-nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 2px; border: none; background: none; color: var(--text3); font-size: 9px; font-weight: 600; font-family: inherit; cursor: pointer; transition: color .2s; }
  #mobNavTech .mob-nav-btn.active { color: var(--cyan); }
  #mobNavTech .mob-nav-btn.active .mob-ico { background: rgba(14,165,199,.15); color: var(--cyan); }
  body.light-mode #mobNavTech { background: rgba(255,255,255,.96); border-top-color: rgba(0,0,0,.1); }
  body.light-mode #mobNavTech .mob-nav-btn.active { color: #0891b2; }


  /* Onboarding section responsive padding */
  #onboardingSection { padding-bottom: 70px; }
  #techSection { padding-bottom: 70px; }
  .onb-dash-hero { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .onb-dash-row { grid-template-columns: 1fr !important; gap: 10px !important; }
  .onb-hero-card { padding: 14px 16px !important; }
  .onb-hero-card .hc-val { font-size: 22px !important; }
  .onb-tw { max-height: calc(100vh - 200px) !important; }
  .onb-fiche-grid { grid-template-columns: 1fr !important; }
  .onb-col-box { padding: 20px 18px !important; }
  .onb-kpi-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px !important; }
  .onb-kpi-val { font-size: 20px !important; }
}

/* Light mode mobNavOnb  */
body.light-mode .mob-nav-btn { color: #9296AE; }
body.light-mode .mob-nav-btn.active { color: var(--accent); }
body.light-mode .mob-nav-btn.active .mob-ico { background: var(--accent-soft); color: var(--accent); }
body.light-mode #mobNav { background: rgba(255,255,255,.96); border-top-color: rgba(0,0,0,.1); }

/* ── RAPPORT BUTTON — max visibility both themes ── */
body.light-mode .hb.p { box-shadow: 0 2px 10px rgba(51,97,255,.25); }

/* ── TABLE HEADER — sticky thead visible ── */
thead tr.ch th {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}
/* gh row must be above ch */
thead tr.gh th {
  position: sticky !important;
  top: 0 !important;
  z-index: 11 !important;
}
body.light-mode thead tr.ch th { background: #F7F8FC !important; border-bottom-color: rgba(0,0,0,.1) !important; color: #5A5E75 !important; }
body.light-mode thead tr.gh th { background: inherit; }
body.light-mode .ghid { background: #F4F5F9 !important; color: #9296AE !important; }
body.light-mode .ghp1 { background: rgba(51,97,255,.08) !important; color: #2045c9 !important; }
body.light-mode .ghi1 { background: rgba(123,79,255,.08) !important; color: #6535e0 !important; }
body.light-mode .ghi2 { background: rgba(217,119,6,.08) !important; color: #92560a !important; }
body.light-mode .ghtr { background: rgba(14,160,96,.08) !important; color: #086b41 !important; }
body.light-mode .ghsp { background: rgba(224,48,64,.08) !important; color: #b31e2c !important; }

/* ── LIGHT MODE: Rapport button ── */
body.light-mode #exportPdfBtn {
  background: linear-gradient(135deg, #7B4FFF, #9B6FFF) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(123,79,255,.4) !important;
  font-weight: 700 !important;
}




/* ══════════════════════════════════════════════════════════════
   HEADER CLEAN — single authoritative block, no duplicates
   ══════════════════════════════════════════════════════════════ */

/* header rules defined in original block above */

/* ─ Left zone ─ */
.hdr-left {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 0 14px 0 20px;
  border-right: 1px solid var(--border);
  height: 100%;
}
.logo { display: flex !important; align-items: center !important; gap: 8px !important; }
.logo-icon {
  width: 28px !important; height: 28px !important;
  font-size: 12px !important; border-radius: 7px !important;
  flex-shrink: 0 !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
}
.logo-brand { line-height: 1.3; }
.logo-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 800;
  letter-spacing: -.3px; white-space: nowrap;
}
.logo-aw  { color: var(--text1); }
.logo-red { color: #e03e3e; }
.logo-sep { color: var(--text3); margin: 0 3px; font-weight: 300; }
.logo-delivr { color: var(--text3); font-weight: 500; font-size: 11px; }
.logo-sub {
  font-size: 7.5px; color: var(--text3);
  font-weight: 600; letter-spacing: .7px;
  text-transform: uppercase; margin-top: 1px;
}

/* App-switcher pill */
.app-switcher {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.app-sw-btn {
  display: flex; align-items: center; gap: 5px;
  padding: 5px 11px;
  border-radius: 8px; border: none;
  background: none; color: var(--text3);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: all .18s;
}
.app-sw-btn.active {
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.app-sw-btn:hover:not(.active) { color: var(--text2);background:rgba(255,255,255,.04) }
.app-sw-ico { font-size: 13px; line-height: 1; }
/* Section-specific active pill colors */
.app-sw-btn[data-sec="contenus"].active{background:linear-gradient(135deg,#5c7cfa,#4F6AE8)}
.app-sw-btn[data-sec="onboarding"].active{background:linear-gradient(135deg,#e03e3e,#c0392b)}
.app-sw-btn[data-sec="tech"].active{background:linear-gradient(135deg,#0fca7a,#0ea86a)}
.app-sw-btn[data-sec="procedures"].active{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.app-sw-btn[data-sec="partenaires"].active{background:linear-gradient(135deg,#f5a23a,#d97706)}

/* ══════════════════════════════════════════════════════════════
   PERFORMANCE MODULE — GAMING AESTHETIC
   ══════════════════════════════════════════════════════════════ */
.app-sw-btn[data-sec="performance"].active{background:linear-gradient(135deg,#ffd700,#ff8c00)!important}

/* Sub-tabs */
.perf-subtabs{display:flex;gap:2px;background:rgba(255,215,0,.06);padding:3px;border-radius:12px;border:1px solid rgba(255,215,0,.15);margin-bottom:16px;width:fit-content}
.perf-subtab{padding:7px 18px;border-radius:9px;font-size:12px;font-weight:700;cursor:pointer;border:none;background:none;color:var(--text3);font-family:inherit;transition:all .25s;display:flex;align-items:center;gap:6px;white-space:nowrap}
.perf-subtab:hover{color:var(--text2);background:rgba(255,215,0,.06)}
.perf-subtab.active{background:linear-gradient(135deg,rgba(255,215,0,.15),rgba(255,140,0,.1));color:#ffd700;box-shadow:0 2px 8px rgba(255,215,0,.15)}
body.light-mode .perf-subtab.active{background:linear-gradient(135deg,rgba(255,180,0,.12),rgba(255,120,0,.08));color:#d97706}
body.light-mode .perf-subtabs{background:rgba(255,180,0,.04);border-color:rgba(255,180,0,.12)}
.perf-tab{display:none}
.perf-tab.active{display:block}

/* ── PODIUM ── */
.perf-podium{display:flex;align-items:flex-end;justify-content:center;gap:12px;margin:20px 0 28px;perspective:800px}
.perf-pod{text-align:center;border-radius:16px;padding:18px 16px 14px;position:relative;cursor:pointer;transition:all .35s cubic-bezier(.34,1.56,.64,1);min-width:130px}
.perf-pod:hover{transform:translateY(-6px) scale(1.04)!important}
.perf-pod.gold{background:linear-gradient(160deg,rgba(255,215,0,.14),rgba(255,180,0,.06));border:1.5px solid rgba(255,215,0,.3);order:2;min-height:200px;box-shadow:0 0 40px rgba(255,215,0,.12)}
.perf-pod.silver{background:linear-gradient(160deg,rgba(192,192,192,.12),rgba(192,192,192,.04));border:1.5px solid rgba(192,192,192,.25);order:1;min-height:170px}
.perf-pod.bronze{background:linear-gradient(160deg,rgba(205,127,50,.12),rgba(205,127,50,.04));border:1.5px solid rgba(205,127,50,.25);order:3;min-height:150px}
.perf-pod-rank{font-size:28px;font-weight:900;margin-bottom:4px}
.perf-pod.gold .perf-pod-rank{color:#ffd700;text-shadow:0 0 20px rgba(255,215,0,.5)}
.perf-pod.silver .perf-pod-rank{color:#c0c0c0;text-shadow:0 0 15px rgba(192,192,192,.4)}
.perf-pod.bronze .perf-pod-rank{color:#cd7f32;text-shadow:0 0 15px rgba(205,127,50,.4)}
.perf-pod-avatar{width:52px;height:52px;border-radius:50%;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;color:#fff;position:relative}
.perf-pod.gold .perf-pod-avatar{background:linear-gradient(135deg,#ffd700,#ff8c00);box-shadow:0 0 24px rgba(255,215,0,.35)}
.perf-pod.silver .perf-pod-avatar{background:linear-gradient(135deg,#c0c0c0,#808080);box-shadow:0 0 20px rgba(192,192,192,.25)}
.perf-pod.bronze .perf-pod-avatar{background:linear-gradient(135deg,#cd7f32,#a0522d);box-shadow:0 0 20px rgba(205,127,50,.25)}
.perf-pod-avatar::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid transparent;animation:pod-glow 3s ease infinite}
.perf-pod.gold .perf-pod-avatar::after{border-color:rgba(255,215,0,.4)}
@keyframes pod-glow{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.05)}}
.perf-pod-name{font-size:12px;font-weight:700;color:var(--text1);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px;margin-left:auto;margin-right:auto}
.perf-pod-score{font-size:18px;font-weight:900;font-family:'JetBrains Mono',monospace}
.perf-pod.gold .perf-pod-score{color:#ffd700}
.perf-pod.silver .perf-pod-score{color:#c0c0c0}
.perf-pod.bronze .perf-pod-score{color:#cd7f32}
.perf-pod-level{font-size:9px;font-weight:700;padding:2px 8px;border-radius:4px;display:inline-block;margin-top:4px}
.perf-pod-streak{font-size:10px;margin-top:4px;color:var(--text3)}
.perf-pod-streak .fire{color:#ff6b35;animation:flame .8s ease infinite alternate}
@keyframes flame{from{transform:scale(1) rotate(-3deg)}to{transform:scale(1.15) rotate(3deg)}}

/* ── LEADERBOARD ── */
.perf-lb{margin-bottom:20px}
.perf-lb-filters{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.perf-lb-fbtn{padding:5px 14px;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;border:1px solid var(--border);background:none;color:var(--text3);font-family:inherit;transition:all .2s}
.perf-lb-fbtn.active{background:rgba(255,215,0,.1);border-color:rgba(255,215,0,.3);color:#ffd700}
.perf-lb-fbtn:hover{border-color:rgba(255,215,0,.2);color:var(--text2)}
.perf-lb-row{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--card);border:1px solid var(--border);border-radius:12px;margin-bottom:6px;cursor:pointer;transition:all .25s cubic-bezier(.34,1.56,.64,1);position:relative;overflow:hidden}
.perf-lb-row::before{content:'';position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.03) 50%,transparent 60%);background-size:200% 100%;opacity:0;transition:opacity .3s}
.perf-lb-row:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.2);border-color:rgba(255,215,0,.2)}
.perf-lb-row:hover::before{opacity:1;animation:shine .6s ease}
@keyframes shine{from{background-position:200% 0}to{background-position:-200% 0}}
.perf-lb-pos{width:28px;font-size:14px;font-weight:900;text-align:center;flex-shrink:0;font-family:'JetBrains Mono',monospace}
.perf-lb-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;flex-shrink:0}
.perf-lb-info{flex:1;min-width:0}
.perf-lb-name{font-size:12px;font-weight:700;color:var(--text1);display:flex;align-items:center;gap:6px}
.perf-lb-meta{font-size:9px;color:var(--text3);margin-top:1px;display:flex;gap:8px;align-items:center}
.perf-lb-score{font-size:16px;font-weight:900;font-family:'JetBrains Mono',monospace;color:#ffd700;flex-shrink:0}
.perf-lb-delta{font-size:10px;font-weight:800;padding:2px 6px;border-radius:4px;flex-shrink:0}
.perf-lb-delta.up{background:rgba(18,217,138,.1);color:var(--green)}
.perf-lb-delta.down{background:rgba(255,77,106,.1);color:var(--red)}
.perf-lb-delta.same{background:var(--gray-bg);color:var(--text3)}
.perf-lb-bar{display:flex;height:4px;border-radius:2px;overflow:hidden;gap:1px;width:80px;flex-shrink:0}
.perf-lb-bar span{height:100%;border-radius:2px;transition:width .6s ease}

/* ── LEVEL BADGES ── */
.perf-level{font-size:9px;font-weight:800;padding:2px 8px;border-radius:5px;display:inline-flex;align-items:center;gap:3px;letter-spacing:.3px;white-space:nowrap}
.perf-level.rookie{background:rgba(128,128,128,.15);color:#888}
.perf-level.confirmed{background:rgba(92,124,250,.12);color:var(--accent)}
.perf-level.senior{background:rgba(159,114,255,.12);color:var(--purple)}
.perf-level.expert{background:rgba(255,215,0,.12);color:#ffd700}
.perf-level.master{background:linear-gradient(135deg,rgba(0,200,255,.12),rgba(100,150,255,.12));color:#00c8ff;text-shadow:0 0 8px rgba(0,200,255,.3)}
.perf-level.legend{background:linear-gradient(135deg,rgba(255,0,128,.1),rgba(255,200,0,.1),rgba(0,200,255,.1));color:#fff;animation:rainbow-badge 4s linear infinite;background-size:300% 100%}
@keyframes rainbow-badge{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

/* ── TROPHIES ── */
.perf-trophies{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:16px 0}
.perf-trophy{position:relative;background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px 12px;text-align:center;transition:all .3s cubic-bezier(.34,1.56,.64,1);cursor:default;overflow:hidden}
.perf-trophy.unlocked{border-color:rgba(255,215,0,.2);cursor:pointer}
.perf-trophy.unlocked::after{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%);animation:trophy-shine 4s ease infinite}
@keyframes trophy-shine{0%{transform:translateX(-100%) rotate(45deg)}100%{transform:translateX(100%) rotate(45deg)}}
.perf-trophy.locked{opacity:.45;filter:grayscale(.7)}
.perf-trophy.locked:hover{opacity:.7}
.perf-trophy:hover{transform:translateY(-4px)}
.perf-trophy-ico{font-size:32px;margin-bottom:6px;display:block}
.perf-trophy.locked .perf-trophy-ico{filter:grayscale(1)}
.perf-trophy-name{font-size:10px;font-weight:800;color:var(--text1);margin-bottom:2px}
.perf-trophy.locked .perf-trophy-name{color:var(--text3)}
.perf-trophy-desc{font-size:8px;color:var(--text3);line-height:1.3}
.perf-trophy-date{font-size:8px;color:#ffd700;margin-top:4px;font-weight:700}
.perf-trophy-lock{position:absolute;top:8px;right:8px;font-size:10px;opacity:.5}
/* Tooltip */
.perf-tt{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%);background:var(--card2);border:1px solid var(--border2);border-radius:10px;padding:10px 14px;font-size:10px;color:var(--text);width:200px;text-align:left;box-shadow:0 8px 30px rgba(0,0,0,.4);z-index:100;pointer-events:none;opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-50%) translateY(4px)}
.perf-trophy:hover .perf-tt,.perf-level:hover .perf-tt,.perf-pod:hover .perf-tt{opacity:1;transform:translateX(-50%) translateY(0)}
.perf-tt::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--card2)}
.perf-tt-title{font-weight:800;color:var(--text1);margin-bottom:3px;font-size:11px}
.perf-tt-prog{height:4px;background:var(--bg2);border-radius:2px;margin-top:6px;overflow:hidden}
.perf-tt-prog-fill{height:100%;border-radius:2px;background:linear-gradient(90deg,#ffd700,#ff8c00);transition:width .5s}

/* ── FEED ── */
.perf-feed{max-height:400px;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.perf-feed-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:10px;animation:feed-in .4s ease;font-size:11px}
@keyframes feed-in{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
.perf-feed-ico{font-size:16px;flex-shrink:0}
.perf-feed-txt{flex:1;min-width:0;color:var(--text1);font-weight:600}
.perf-feed-txt b{color:#ffd700}
.perf-feed-time{font-size:9px;color:var(--text3);flex-shrink:0}

/* ── PROFILE MODAL ── */
.perf-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(8px);z-index:700;display:none;align-items:center;justify-content:center}
.perf-modal-bg.open{display:flex}
.perf-modal{background:var(--bg2);border:1px solid var(--border);border-radius:20px;width:90%;max-width:600px;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.5);animation:modal-pop .35s cubic-bezier(.34,1.56,.64,1)}
@keyframes modal-pop{from{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ── CELEBRATION ── */
.perf-celeb{position:fixed;inset:0;z-index:800;pointer-events:none;display:none}
.perf-celeb.active{display:block}
.perf-celeb-particle{position:absolute;width:8px;height:8px;border-radius:50%;animation:confetti 1.5s ease forwards}
@keyframes confetti{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}
.perf-celeb-toast{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);z-index:801;text-align:center;animation:celeb-pop .5s .2s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes celeb-pop{to{transform:translate(-50%,-50%) scale(1)}}
.perf-celeb-toast .big-ico{font-size:64px;display:block;margin-bottom:10px;animation:float 2s ease infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── GLOBAL PERF KPIs ── */
.perf-okr-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;transition:all .25s;position:relative;overflow:hidden}
.perf-okr-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.perf-okr-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.perf-okr-title{font-size:11px;font-weight:700;color:var(--text1);margin-bottom:4px}
.perf-okr-sub{font-size:9px;color:var(--text3);margin-bottom:8px}
.perf-okr-bar{height:6px;background:var(--bg2);border-radius:3px;overflow:hidden;margin-bottom:4px}
.perf-okr-bar-fill{height:100%;border-radius:3px;transition:width .8s cubic-bezier(.34,1.56,.64,1)}
.perf-okr-stats{display:flex;justify-content:space-between;font-size:10px}
.perf-okr-pct{font-weight:900;font-family:'JetBrains Mono',monospace}
.perf-okr-status{font-size:9px;font-weight:700;padding:2px 6px;border-radius:4px}
.perf-okr-status.ahead{background:rgba(18,217,138,.1);color:var(--green)}
.perf-okr-status.ontrack{background:rgba(92,124,250,.1);color:var(--accent)}
.perf-okr-status.behind{background:rgba(255,77,106,.1);color:var(--red)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .perf-podium{flex-wrap:wrap;gap:8px}
  .perf-pod{min-width:100px;min-height:auto!important}
  .perf-trophies{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}
  .perf-lb-bar{display:none}
}
body.light-mode .app-sw-btn:hover:not(.active){background:rgba(0,0,0,.04)}

/* ─ Center zone — all remaining space, horizontally scrollable ─ */
.hdr-center {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
}
.hdr-center::-webkit-scrollbar { display: none; }
.hdr-center > div { display: flex; align-items: center; width: 100%; justify-content: center; }

/* Nav-tabs strip inside center — override original rules */
.hdr-center .nav-tabs {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  width: auto !important;
}
.hdr-center .nav-tab {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  padding: 7px 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  color: var(--text3) !important;
  background: none !important;
  border: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all .15s !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.hdr-center .nav-tab .nt-ico {
  font-size: 13px; opacity: .45; flex-shrink: 0; transition: opacity .15s;
}
/* Contenus tabs active = accent blue */
#contenusNavWrap .nav-tab.active {
  background: rgba(79,121,255,.13) !important;
  color: var(--accent) !important;
  box-shadow: inset 0 0 0 1px rgba(79,121,255,.25) !important;
}
#contenusNavWrap .nav-tab.active .nt-ico { opacity: 1 !important; }
#contenusNavWrap .nav-tab:hover:not(.active) {
  background: rgba(255,255,255,.05) !important;
  color: var(--text2) !important;
}
body.light-mode #contenusNavWrap .nav-tab.active {
  background: rgba(51,97,255,.09) !important;
  color: #2045c9 !important;
  box-shadow: inset 0 0 0 1px rgba(51,97,255,.2) !important;
}
body.light-mode #contenusNavWrap .nav-tab:hover:not(.active) {
  background: rgba(0,0,0,.04) !important;
  color: var(--text2) !important;
}
/* Onboarding tabs active = red */
#onbNavWrap .nav-tab.active {
  background: rgba(224,62,62,.13) !important;
  color: #e03e3e !important;
  box-shadow: inset 0 0 0 1px rgba(224,62,62,.25) !important;
}
#onbNavWrap .nav-tab.active .nt-ico { opacity: 1 !important; }
#onbNavWrap .nav-tab:hover:not(.active) {
  background: rgba(255,255,255,.05) !important;
  color: var(--text2) !important;
}
body.light-mode #onbNavWrap .nav-tab.active {
  background: rgba(224,62,62,.08) !important;
  color: #c0392b !important;
  box-shadow: inset 0 0 0 1px rgba(224,62,62,.15) !important;
}
body.light-mode #onbNavWrap .nav-tab:hover:not(.active) {
  background: rgba(0,0,0,.04) !important;
  color: var(--text2) !important;
}

/* .hr defined in original block above */
.tb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px; color: var(--text2);
  background: var(--card2); border: 1px solid var(--border2);
  padding: 4px 9px; border-radius: 6px;
  white-space: nowrap; letter-spacing: .2px;
}

/* ─ Mobile nav bars (legacy — hidden, unified nav handles it) ─ */
.mob-nav { display: none !important; }

/* ── MOBILE HEADER REFONTE ── */
#mobActionDrawer {
  display: none; position: fixed; inset: 0; z-index: 998;
}
#mobActionDrawer.open { display: flex; }
#mobActionOverlay {
  position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px);
}
#mobActionPanel {
  position: absolute; top: 48px; right: 0; width: 260px; max-height: calc(100vh - 130px);
  background: var(--card); border: 1px solid var(--border2); border-radius: 0 0 0 16px;
  box-shadow: -8px 8px 40px rgba(0,0,0,.5); overflow-y: auto; padding: 8px;
  animation: mobDrawerIn .2s ease;
}
@keyframes mobDrawerIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: none; } }
.mob-act-group { padding: 4px 0; }
.mob-act-group-label {
  font-size: 8px; font-weight: 800; text-transform: uppercase; letter-spacing: .7px;
  color: var(--text3); padding: 6px 12px 4px; border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
}
.mob-act-btn {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
  border: none; background: none; color: var(--text); font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; border-radius: 8px; transition: background .12s;
  text-align: left;
}
.mob-act-btn:hover, .mob-act-btn:active { background: var(--accent-soft); }
.mob-act-ico { font-size: 16px; width: 28px; text-align: center; flex-shrink: 0; }
.mob-act-lbl { flex: 1; }
.mob-act-badge { font-size: 9px; font-weight: 700; padding: 1px 6px; border-radius: 4px; }
body.light-mode #mobActionPanel { background: #fff; border-color: rgba(0,0,0,.1); box-shadow: -4px 4px 24px rgba(0,0,0,.1); }
body.light-mode .mob-act-btn:hover { background: rgba(92,124,250,.06); }

@media(max-width: 768px) {
  /* ── HEADER: Logo + Hamburger only ── */
  .header {
    height: 48px !important; min-height: 48px !important; max-height: 48px !important;
    display: flex !important; flex-wrap: nowrap !important; align-items: center !important;
    padding: 0 !important; position: sticky !important; top: 0 !important; z-index: 500 !important;
    overflow: hidden !important; width: 100% !important; box-sizing: border-box !important;
  }
  /* Logo: compact */
  .hdr-z1 {
    flex: 1 1 0 !important; min-width: 0 !important; height: 48px !important;
    padding: 0 0 0 12px !important; border: none !important; overflow: hidden !important;
  }
  .logo { gap: 6px !important; }
  .logo-icon { width: 26px !important; height: 26px !important; font-size: 11px !important; border-radius: 6px !important; flex-shrink: 0 !important; }
  .logo-brand { overflow: hidden !important; }
  .logo-name { font-size: 12px !important; }
  .logo-sep, .logo-delivr, .logo-sub { display: none !important; }
  /* Hide ALL desktop elements */
  .hdr-center, .hr, .app-switcher, .hr-sep, .cu-wrap, .cu-info, .cu-out,
  .hb-notif, .theme-toggle, .app-sw-lbl, .hdr-z2, .hdr-z3, .hdr-sep-v,
  .mob-only-nav, #mainSectionTabs { display: none !important; }
  /* Hamburger */
  .mob-toolbar {
    display: flex !important; align-items: center; height: 48px; padding: 0 10px 0 0; flex-shrink: 0 !important;
  }
  .mob-tb-btn {
    width: 36px; height: 36px; border-radius: 10px; border: none;
    background: linear-gradient(135deg,#e03e3e,#ff6b6b); color: #fff;
    cursor: pointer; font-size: 15px; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(224,62,62,.3); -webkit-tap-highlight-color: transparent;
    transition: transform .1s;
  }
  .mob-tb-btn:active { transform: scale(.9); }
  body.light-mode .mob-tb-btn { box-shadow: 0 2px 8px rgba(224,62,62,.2); }

  /* Content */
  body { overflow-x: hidden !important; max-width: 100vw !important; padding-bottom: 82px !important; }
  #onboardingSection { padding-bottom: 82px !important; }
  .main { padding: 12px !important; margin-left: 0 !important; max-width: 100vw !important; }
  .sidebar { display: none !important; }
}

/* Desktop: hide mobile toolbar */
.mob-toolbar { display: none !important; }
@media(max-width: 768px) { .mob-toolbar { display: flex !important; } }

@media(max-width: 400px) {
  .mob-sub-btn { font-size: 8.5px; padding: 6px 6px; }
  .mob-sec-btn { font-size: 9px; padding: 4px 6px; }
  .mob-tb-btn { width: 32px; height: 32px; font-size: 13px; }
  .header { height: 44px !important; min-height: 44px !important; max-height: 44px !important; }
  .hdr-z1 { height: 44px !important; padding: 0 0 0 10px !important; }
  .mob-toolbar { height: 44px; }
  .logo-icon { width: 22px !important; height: 22px !important; font-size: 10px !important; }
  .logo-name { font-size: 11px !important; }
}

/* ── PROCEDURES MODULE CSS ── */
#procDetailM { align-items:center; justify-content:center; }
#procEditM { align-items:center; justify-content:center; }
.toast.show { display:block !important; opacity:1 !important; transform:none !important; }
#proceduresSection { padding-top: 4px; }
body.section-procedures .hb-notif { display: none !important; }
body.section-procedures #notifBtn { display: none !important; }
/* Notif tabs */
.notif-tab { font-family:inherit; font-size:11px; font-weight:700; padding:4px 10px; border:none; border-radius:6px; cursor:pointer; background:transparent; color:var(--text3); transition:all .15s; }
.notif-tab.active { background:var(--accent); color:#fff; }
.notif-tab:hover:not(.active) { background:var(--gray-bg); }
/* Task items */
.task-item { display:flex; align-items:flex-start; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border); transition:background .1s; }
.task-item:hover { background:var(--gray-bg); }
.task-check { width:18px; height:18px; border-radius:50%; border:2px solid var(--border); cursor:pointer; flex-shrink:0; margin-top:2px; transition:all .15s; display:flex; align-items:center; justify-content:center; font-size:10px; }
.task-check:hover { border-color:var(--accent); }
.task-check.done { background:var(--green); border-color:var(--green); color:#fff; }
.task-check.in-prog { background:var(--orange); border-color:var(--orange); color:#fff; }
.task-info { flex:1; min-width:0; }
.task-title { font-size:12px; font-weight:600; color:var(--text1); margin-bottom:2px; }
.task-title.done { text-decoration:line-through; opacity:.5; }
.task-desc { font-size:10px; color:var(--text3); margin-bottom:4px; }
.task-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.task-tag { font-size:8px; font-weight:700; padding:2px 6px; border-radius:4px; }
/* New task form */
.task-form { padding:14px; background:var(--card2); border-bottom:1px solid var(--border); }
.task-form input, .task-form textarea, .task-form select { width:100%; border:1px solid var(--border); background:var(--bg); color:var(--text1); border-radius:6px; padding:7px 10px; font-size:11px; font-family:inherit; box-sizing:border-box; margin-bottom:6px; }
.task-form textarea { resize:vertical; min-height:40px; }
.task-form select { cursor:pointer; }
.task-form input:focus, .task-form textarea:focus { outline:none; border-color:var(--accent); }
/* Assign button on alerts */
.notif-assign-btn { flex-shrink:0; background:none; border:1px solid var(--border); border-radius:6px; padding:4px 8px; font-size:11px; cursor:pointer; color:var(--text3); font-family:inherit; transition:all .15s; align-self:center; }
.notif-assign-btn:hover { border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.notif-item { display:flex; align-items:flex-start; }
/* Flow pipeline */
.proc-flow { display:flex; align-items:flex-start; gap:0; overflow-x:auto; padding:20px 4px 16px; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.proc-flow::-webkit-scrollbar { height:4px; }
.proc-flow::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px; }
/* ── PROC FLOW — rectangles détaillés ── */
.proc-flow {
  display: flex;
  align-items: stretch;
  overflow-x: auto;
  padding: 4px 2px 12px;
  gap: 0;
  -webkit-overflow-scrolling: touch;
}
.proc-flow::-webkit-scrollbar { height: 4px; }
.proc-flow::-webkit-scrollbar-track { background: transparent; }
.proc-flow::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 4px; }

.proc-step {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
}

/* Flèche connecteur */
.proc-step-connector {
  display: flex;
  align-items: center;
  padding: 0 2px;
  flex-shrink: 0;
}
.proc-step-connector svg { opacity: .35; }
body.light-mode .proc-step-connector svg { opacity: .25; }

/* Carte rectangulaire */
.proc-step-card {
  width: 168px;
  border-radius: 10px;
  border: 1.5px solid var(--border, #222);
  background: var(--card, #0C0E17);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s, transform .18s;
  position: relative;
}
.proc-step-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

/* Barre colorée en haut */
.proc-step-topbar {
  height: 4px;
  width: 100%;
  flex-shrink: 0;
}

/* Contenu */
.proc-step-body {
  padding: 10px 11px 9px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

/* Numéro + titre */
.proc-step-head {
  display: flex;
  align-items: flex-start;
  gap: 7px;
}
.proc-step-num {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
  margin-top: 1px;
}
.proc-step-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text1, #fff);
  line-height: 1.35;
}

/* Responsable */
.proc-step-resp {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  color: var(--text3, #888);
}
.proc-step-resp-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Actions */
.proc-step-actions {
  font-size: 10px;
  color: var(--text2, #aaa);
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  border-left: 2px solid rgba(255,255,255,.08);
  padding-left: 6px;
}
body.light-mode .proc-step-actions { border-left-color: rgba(0,0,0,.08); }

/* Intervenants */
.proc-step-ivs {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}
.proc-step-iv {
  font-size: 9px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.06);
  color: var(--text3, #888);
}
body.light-mode .proc-step-iv { background: rgba(0,0,0,.06); }

/* Footer signature */
.proc-step-footer {
  padding: 6px 11px;
  border-top: 1px solid var(--border, #222);
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 9.5px;
  font-weight: 700;
  flex-shrink: 0;
}
.proc-step-footer.signed { color: #0fca7a; }
.proc-step-footer.unsigned { color: var(--text3, #888); }

/* Light mode */
body.light-mode .proc-step-card {
  background: #fff;
  border-color: rgba(0,0,0,.1);
}
body.light-mode .proc-step-title { color: #1a1d2e; }
.proc-step-card.signed .proc-step-resp { background:rgba(15,202,122,.08); color:#0fca7a; }
.proc-step-arrow { flex-shrink:0; width:32px; display:flex; align-items:center; justify-content:center; color:var(--border); }
.proc-step-arrow svg { width:20px; height:20px; }
/* Procedure detail full-page */
.proc-detail-page { position:fixed; inset:0; z-index:600; background:var(--bg); overflow-y:auto; animation:procFadeIn .25s ease; }
@keyframes procFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.proc-detail-header { display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); z-index:2; }
.proc-detail-body { max-width:1000px; margin:0 auto; padding:24px; }
body.light-mode .proc-detail-page { background:#fafbff; }
/* Edit step cards — drag handle */
.pe-step-card { position:relative; background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-bottom:10px; border-left:3px solid var(--accent); transition:border-color .2s; }
.pe-step-card:hover { border-left-color:var(--green); }
.pe-step-header { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.pe-step-badge { width:24px; height:24px; border-radius:50%; background:linear-gradient(135deg,#4F79FF,#6C8FFF); color:#fff; font-size:10px; font-weight:800; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.pe-step-del { position:absolute; top:8px; right:8px; background:none; border:none; color:var(--text3); cursor:pointer; font-size:18px; padding:2px 6px; border-radius:4px; transition:color .15s; }
.pe-step-del:hover { color:var(--red); }
.pe-field { margin-bottom:8px; }
.pe-label { font-size:9px; font-weight:700; color:var(--text3); text-transform:uppercase; letter-spacing:.04em; margin-bottom:3px; display:block; }
.pe-input { width:100%; border:1px solid var(--border); background:var(--bg); color:var(--text1); border-radius:8px; padding:8px 12px; font-size:12px; font-family:inherit; box-sizing:border-box; transition:border-color .15s; }
.pe-input:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(79,121,255,.1); }
textarea.pe-input, .pe-textarea { resize:vertical; min-height:48px; }
select.pe-input { cursor:pointer; appearance:auto; }
.pe-drag-handle { cursor:grab; color:var(--text3); font-size:14px; padding:0 4px; user-select:none; }
.pe-drag-handle:active { cursor:grabbing; }
.pe-step-card.dragging { opacity:.5; border-style:dashed; }
.pe-step-card.drag-over { border-top:2px solid var(--accent); }

/* ══════════════════════════════════════════════════════
   SIDEBAR DESKTOP — position fixed, main margin-left
   ══════════════════════════════════════════════════════ */

/* Masquer hdr-center sur desktop */
.mob-only-nav { display: none !important; }

/* Sidebar fixe à gauche sous le header */
.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 56px;
  width: 220px;
  height: calc(100vh - 56px);
  background: rgba(5,6,10,.75);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  border-right: 1px solid rgba(255,255,255,.055);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 400;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
  padding: 16px 0 20px;
}
.sidebar::-webkit-scrollbar { width: 3px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,.08); border-radius: 2px; }
body.light-mode .sidebar {
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(24px);
  border-right-color: rgba(0,0,0,.08);
  box-shadow: 2px 0 20px rgba(0,0,0,.06);
}

/* Main décalé de la largeur sidebar */
.main {
  margin-left: 220px !important;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* Performance active — hide global sidebar, full-width main */
body.perf-active .sidebar { display: none !important; }
body.perf-active .main { margin-left: 0 !important; max-width: 100vw !important; }

/* Groupe label */
.sb-group-label {
  font-size: 9px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  padding: 8px 16px 6px !important;
  opacity: .7;
}

/* Section label */
.sb-section-label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 14px 10px;
}
.sb-section-ico { font-size: 14px; opacity: .6; }
.sb-section-txt {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--text3);
}

/* Liens nav */
.sb-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}
.sb-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: none;
  color: var(--text3);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: all .18s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.sb-link:hover {
  background: rgba(255,255,255,.055);
  color: var(--text2);
  transform: translateX(2px);
}
.sb-link.active {
  background: rgba(92,124,250,.12);
  color: var(--accent2);
  font-weight: 700;
  border: 1px solid rgba(92,124,250,.18);
}
.sb-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
  box-shadow: 0 0 10px var(--accent);
}
#sbNavOnboarding .sb-link.active {
  background: rgba(255,77,106,.10);
  color: #ff6b84;
  border-color: rgba(255,77,106,.18);
}
#sbNavOnboarding .sb-link.active::before { background: #ff4d6a; box-shadow: 0 0 10px rgba(255,77,106,.5); }
#sbNavOnboarding .sb-link:hover:not(.active) { background: rgba(255,77,106,.04); }
body.light-mode .sb-link:hover { background: rgba(0,0,0,.04); color: var(--text2); }
body.light-mode .sb-link.active { background: rgba(92,124,250,.09); color: #3361ff; border-color: rgba(92,124,250,.15); }
body.light-mode #sbNavOnboarding .sb-link.active { background: rgba(224,62,62,.07); color: #c0392b; border-color: rgba(224,62,62,.15); }
/* Tech GREEN (first block) */
#sbNavTech .sb-link.active { background: rgba(15,202,122,.10); color: #0fca7a; border-color: rgba(15,202,122,.18); }
#sbNavTech .sb-link.active::before { background: #0fca7a; box-shadow: 0 0 10px rgba(15,202,122,.5); }
#sbNavTech .sb-link:hover:not(.active) { background: rgba(15,202,122,.04); }
body.light-mode #sbNavTech .sb-link.active { background: rgba(15,202,122,.07); color: #059669; border-color: rgba(15,202,122,.15); }
/* Procedures VIOLET (first block) */
#sbNavProcedures .sb-link.active { background: rgba(139,92,246,.10); color: #a78bfa; border-color: rgba(139,92,246,.18); }
#sbNavProcedures .sb-link.active::before { background: #8b5cf6; box-shadow: 0 0 10px rgba(139,92,246,.5); }
#sbNavProcedures .sb-link:hover:not(.active) { background: rgba(139,92,246,.04); }
body.light-mode #sbNavProcedures .sb-link.active { background: rgba(139,92,246,.07); color: #7c3aed; border-color: rgba(139,92,246,.15); }

.sb-ico { width: 16px; height: 16px; opacity: .45; flex-shrink: 0; transition: opacity .18s, color .18s; }
.sb-link.active .sb-ico { opacity: 1; }
.sb-link:hover .sb-ico { opacity: .7; }
.sb-lbl { font-size: 12.5px; }

/* Section cachée */
.sb-nav--hidden { display: none !important; }

/* Footer */
.sb-footer {
  margin-top: auto;
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.04);
}
.sb-ver {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--text3);
  opacity: .35;
}

/* ── FILTER BAR — horizontal compacte ── */
.fb {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  gap: 10px 12px !important;
  padding: 12px 18px !important;
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  margin-bottom: 16px !important;
}
body.light-mode .fb { background: #fff !important; box-shadow: 0 1px 4px rgba(0,0,0,.04) !important; }

.fg {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  flex-shrink: 0 !important;
}
.fl {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
  letter-spacing: .6px !important;
}
.finp {
  height: 32px !important;
  font-size: 12px !important;
  padding: 0 10px !important;
  border-radius: 7px !important;
  width: 155px !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  color: var(--text1) !important;
  outline: none !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  transition: border-color .15s, box-shadow .15s !important;
  box-sizing: border-box !important;
}
.finp:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-soft) !important; }
body.light-mode .finp { background: #f7f8fc !important; color: #1a1d2e !important; }

.fsel {
  height: 32px !important;
  font-size: 11.5px !important;
  padding: 0 8px !important;
  border-radius: 7px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  color: var(--text1) !important;
  outline: none !important;
  cursor: pointer !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  transition: border-color .15s !important;
  color-scheme: dark;
  min-width: 110px;
  box-sizing: border-box !important;
}
.fsel:focus { border-color: var(--accent) !important; }
body.light-mode .fsel { background: #f7f8fc !important; color: #1a1d2e !important; color-scheme: light; }

.frst {
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  border: 1px solid var(--border) !important;
  background: var(--bg2) !important;
  color: var(--text3) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all .15s !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  align-self: flex-end !important;
}
.frst:hover { border-color: var(--accent) !important; color: var(--accent) !important; background: var(--accent-soft) !important; }

.ccnt {
  margin-left: auto !important;
  align-self: flex-end !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--text3) !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  padding: 0 9px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
}

/* ── MOBILE : masquer sidebar, remettre nav dans header ── */
@media(max-width: 768px) {
  .sidebar { display: none !important; }
  .main { margin-left: 0 !important; }
  .mob-only-nav { display: none !important; }
  .fb {
    flex-direction: column !important;
    padding: 8px !important;
    gap: 6px !important;
  }
  .fg { flex-direction: row !important; align-items: center !important; }
  .finp, .fsel { width: 100% !important; height: 36px !important; }
  .frst { width: 100% !important; height: 36px !important; }
}


/* ── 1. TITRES SECTIONS — plus lisibles en dark mode ── */
.stit {
  color: var(--text1) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  font-size: 11px !important;
  letter-spacing: .7px !important;
  text-transform: uppercase !important;
}
body.light-mode .stit { color: #2a2d3e !important; }

/* ── 2. BOUTON DÉCONNEXION — visible ── */
.cu-out {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  background: var(--bg2) !important;
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  font-family: inherit !important;
  transition: all .15s !important;
  white-space: nowrap !important;
}
.cu-out:hover {
  background: var(--red-bg) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}
body.light-mode .cu-out {
  background: #f4f5f9 !important;
  border-color: rgba(0,0,0,.12) !important;
  color: #3a3d52 !important;
}
body.light-mode .cu-out:hover {
  background: rgba(245,68,90,.08) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}

/* ── 3. PODIUM CLIENTS ── */
.podium-wrap {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  justify-content: center;
  margin: 8px 0 16px;
  cursor: pointer;
}
.podium-place {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 80px;
  flex: 1;
  max-width: 120px;
}
.podium-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  flex-shrink: 0;
}
.podium-place--1 .podium-avatar { width: 52px; height: 52px; font-size: 18px; }
.podium-name {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text1);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  text-align: center;
}
.podium-bar {
  width: 100%;
  border-radius: 6px 6px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px;
  font-weight: 900;
  color: rgba(255,255,255,.9);
}
.podium-place--1 .podium-bar { height: 70px; }
.podium-place--2 .podium-bar { height: 52px; }
.podium-place--3 .podium-bar { height: 40px; }
.podium-hint {
  text-align: center;
  font-size: 9.5px;
  color: var(--text3);
  margin-top: 4px;
  letter-spacing: .3px;
}

/* Modale classement complet */
.ranking-modal-bg {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  align-items: center;
  justify-content: center;
}
.ranking-modal-bg.open { display: flex; }
.ranking-modal {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  width: 420px;
  max-width: 95vw;
  max-height: 80vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  animation: modal-in .2s cubic-bezier(.34,1.56,.64,1);
}
body.light-mode .ranking-modal { background: #fff; box-shadow: 0 20px 40px rgba(0,0,0,.15); }
.ranking-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.ranking-modal-head h3 { font-size: 14px; font-weight: 800; color: var(--text1); margin: 0; }
.ranking-modal-close {
  width: 28px; height: 28px; border-radius: 7px;
  border: 1px solid var(--border); background: var(--bg2);
  color: var(--text3); font-size: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.ranking-modal-close:hover { background: var(--red-bg); color: var(--red); border-color: var(--red); }
.ranking-modal-body { overflow-y: auto; padding: 12px 16px; flex: 1; }
.ranking-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s;
}
.ranking-row:hover { background: rgba(255,255,255,.04); }
body.light-mode .ranking-row:hover { background: rgba(0,0,0,.04); }
.ranking-rank {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 800;
  flex-shrink: 0;
}
.ranking-rank--1 { background: #FFD700; color: #7a5800; }
.ranking-rank--2 { background: #C0C0C0; color: #555; }
.ranking-rank--3 { background: #CD7F32; color: #fff; }
.ranking-rank--n { background: var(--bg2); color: var(--text3); border: 1px solid var(--border); }
.ranking-name { flex: 1; font-size: 12.5px; font-weight: 600; color: var(--text1); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking-tags { display: flex; gap: 4px; flex-shrink: 0; }
.ranking-amount {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px; font-weight: 700;
  color: var(--text1); flex-shrink: 0;
}

/* ── 4. DROPDOWN CLIENT (combobox) ── */
.client-combo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text1);
  cursor: pointer;
}
.client-combo-ico { opacity: .4; font-size: 10px; }


/* ══════════════════════════════════════════════════
   SECTION TITLES — redesign complet
   ══════════════════════════════════════════════════ */

.stit {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
  margin-top: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  position: relative !important;
}

/* Trait gauche coloré */
.stit::before {
  content: '' !important;
  display: block !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: var(--accent) !important;
  flex-shrink: 0 !important;
}

/* Ligne séparatrice après le texte */
.stit::after {
  content: '' !important;
  flex: 1 !important;
  height: 1px !important;
  background: var(--border) !important;
  min-width: 20px !important;
}

/* Variants couleur selon la section */
.stit.stit--green::before  { background: var(--green) !important; }
.stit.stit--orange::before { background: var(--orange) !important; }
.stit.stit--red::before    { background: var(--red) !important; }
.stit.stit--purple::before { background: var(--purple) !important; }

/* Badge count intégré */
.stit-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--bg2);
  border: 1px solid var(--border);
  color: var(--text3);
  letter-spacing: 0;
  flex-shrink: 0;
}

/* Light mode */
body.light-mode .stit { color: #8a8fa8 !important; }
body.light-mode .stit::after { background: rgba(0,0,0,.08) !important; }
body.light-mode .stit-badge { background: #f0f1f7; border-color: rgba(0,0,0,.1); color: #6b6f86; }

/* margin-top override quand utilisé après contenu */
.stit[style*='margin-top:16px'],
.stit[style*='margin-top: 16px'] {
  margin-top: 24px !important;
}


/* ── KPI CARD LABELS — plus lisibles en dark mode ── */
.kc-l {
  color: #8B90A8 !important;   /* gris-bleu clair, lisible sur fond dark */
  font-size: 9px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .8px !important;
  margin-bottom: 6px !important;
}
body.light-mode .kc-l { color: #6B7080 !important; }

/* Titre de section KPI (ex: "Contenu SENSIPRO — 74 capsules") */
.kpi-sec-title {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  color: #CDD3F0 !important;   /* blanc-gris doux, non agressif */
  letter-spacing: -.2px !important;
  padding: 4px 0 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.kpi-sec-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important;
  height: 14px !important;
  border-radius: 2px !important;
  background: var(--accent) !important;
  flex-shrink: 0 !important;
}
body.light-mode .kpi-sec-title {
  color: #2a2d3e !important;
}


/* ══════════════════════════════════════════════════════════════
   SIDEBAR — redesign premium
   ══════════════════════════════════════════════════════════════ */

.sidebar {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 56px;
  width: 220px;
  height: calc(100vh - 56px);
  background: var(--bg);
  border-right: 1px solid var(--border);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 400;
  scrollbar-width: none;
  padding: 0 0 16px;
}
.sidebar::-webkit-scrollbar { display: none; }
body.light-mode .sidebar {
  background: #fafbff;
  border-right-color: rgba(0,0,0,.07);
}

/* Main décalé */
.main { margin-left: 220px !important; }

/* ─ Brand zone ─ */
.sb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 18px 16px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
}
.sb-logo-mark {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: linear-gradient(135deg, #e03e3e, #ff6b6b);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(224,62,62,.35);
}
.sb-logo-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sb-logo-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: var(--text1);
  letter-spacing: -.2px;
  line-height: 1;
}
.sb-logo-sub {
  font-size: 9px;
  font-weight: 600;
  color: var(--text3);
  letter-spacing: .5px;
  text-transform: uppercase;
  line-height: 1;
}
body.light-mode .sb-logo-name { color: #1a1d2e; }
body.light-mode .sb-logo-sub  { color: #9296ae; }

/* ─ Group label ─ */
.sb-group-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text3);
  padding: 14px 18px 6px;
  opacity: .6;
}
body.light-mode .sb-group-label { color: #9296ae; opacity: 1; }

/* ─ Nav links ─ */
.sb-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
}

.sb-link {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 11px;
  border-radius: 9px;
  border: none;
  background: none;
  color: var(--text3);
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  width: 100%;
  transition: background .14s, color .14s;
  white-space: nowrap;
  overflow: hidden;
  letter-spacing: -.1px;
  position: relative;
}

.sb-link:hover {
  background: rgba(255,255,255,.05);
  color: var(--text2);
}
body.light-mode .sb-link:hover {
  background: rgba(0,0,0,.05);
  color: #3a3d52;
}

/* Active — contenus */
.sb-link.active {
  background: rgba(79,121,255,.1);
  color: var(--text1);
  font-weight: 700;
}
.sb-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 18px;
  border-radius: 0 2px 2px 0;
  background: var(--accent);
}
body.light-mode .sb-link.active {
  background: rgba(51,97,255,.07);
  color: #2045c9;
}
body.light-mode .sb-link.active::before { background: #3361ff; }

/* Active — onboarding (rouge) */
#sbNavOnboarding .sb-link.active {
  background: rgba(224,62,62,.08);
  color: #f06060;
}
#sbNavOnboarding .sb-link.active::before { background: #e03e3e; }
#sbNavOnboarding .sb-link:hover:not(.active) { background: rgba(224,62,62,.04); }
body.light-mode #sbNavOnboarding .sb-link.active {
  background: rgba(224,62,62,.06);
  color: #c0392b;
}
body.light-mode #sbNavOnboarding .sb-link.active::before { background: #c0392b; }

/* SVG icon */
.sb-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text3);
  transition: color .14s;
  opacity: .7;
}
.sb-link.active .sb-ico {
  color: var(--accent);
  opacity: 1;
}
#sbNavOnboarding .sb-link.active .sb-ico { color: #e03e3e; }
body.light-mode .sb-link.active .sb-ico { color: #3361ff; }
body.light-mode #sbNavOnboarding .sb-link.active .sb-ico { color: #c0392b; }

/* Tech = GREEN */
#sbNavTech .sb-link.active {
  background: rgba(15,202,122,.08);
  color: #0fca7a;
}
#sbNavTech .sb-link.active::before { background: #0fca7a; }
#sbNavTech .sb-link:hover:not(.active) { background: rgba(15,202,122,.04); }
#sbNavTech .sb-link.active .sb-ico { color: #0fca7a; }
body.light-mode #sbNavTech .sb-link.active { background: rgba(15,202,122,.06); color: #059669; }
body.light-mode #sbNavTech .sb-link.active::before { background: #059669; }
body.light-mode #sbNavTech .sb-link.active .sb-ico { color: #059669; }

/* Procedures = VIOLET */
#sbNavProcedures .sb-link.active {
  background: rgba(139,92,246,.08);
  color: #a78bfa;
}
#sbNavProcedures .sb-link.active::before { background: #8b5cf6; }
#sbNavProcedures .sb-link:hover:not(.active) { background: rgba(139,92,246,.04); }
#sbNavProcedures .sb-link.active .sb-ico { color: #8b5cf6; }
body.light-mode #sbNavProcedures .sb-link.active { background: rgba(139,92,246,.06); color: #7c3aed; }
body.light-mode #sbNavProcedures .sb-link.active::before { background: #7c3aed; }
body.light-mode #sbNavProcedures .sb-link.active .sb-ico { color: #7c3aed; }

/* App-switcher section-specific active colors */



.sb-lbl {
  font-size: 13px;
  line-height: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Section cachée */
.sb-nav--hidden { display: none !important; }

/* ─ Footer ─ */
.sb-footer {
  margin-top: auto;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
}
.sb-ver {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 500;
  color: var(--text3);
  opacity: .4;
  letter-spacing: .3px;
}

/* ─ Mobile ─ */
@media(max-width: 768px) {
  .sidebar { display: none !important; }
  .main { margin-left: 0 !important; }
  .mob-only-nav { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   HEADER — reorganisation logique
   ══════════════════════════════════════════════════════════════ */

/* Séparateur vertical */
.hr-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 2px;
}
body.light-mode .hr-sep { background: rgba(0,0,0,.1); }

/* Icône-only buttons */
.hb.hb-icon {
  padding: 0 !important;
  width: 30px !important;
  height: 30px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  background: none !important;
  border: 1px solid transparent !important;
  color: var(--text3) !important;
  border-radius: 7px !important;
}
.hb.hb-icon:hover {
  background: rgba(255,255,255,.06) !important;
  border-color: var(--border) !important;
  color: var(--text2) !important;
}
.hb.hb-reset { opacity: .5; }
.hb.hb-reset:hover { opacity: 1; color: var(--red) !important; border-color: var(--red) !important; background: var(--red-bg) !important; }
body.light-mode .hb.hb-icon:hover { background: rgba(0,0,0,.05) !important; color: #3a3d52 !important; }

/* Avatar profil */
.cu-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.cu-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--purple));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}
.cu-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
}
.cu-name {
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: var(--text1) !important;
  letter-spacing: -.1px;
}
.cu-role {
  font-size: 9px !important;
  color: var(--text3) !important;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: .4px;
}
body.light-mode .cu-name { color: #1a1d2e !important; }

/* App switcher dans le hr — masqué par défaut, JS l'affiche si onboarding dispo */
#mainSectionTabs.app-switcher {
  margin-right: 0;
}
/* ── Role-based tab enforcement (CSS failsafe) ── */
body.role-admin_technique #contenusMainTabBtn,
body.role-admin_technique #onbMainTabBtn,
body.role-admin_technique #partMainTabBtn{display:none!important}
body.role-admin_flowstudio #onbMainTabBtn,
body.role-admin_flowstudio #techMainTabBtn,
body.role-admin_flowstudio #procMainTabBtn,
body.role-admin_flowstudio #partMainTabBtn{display:none!important}
body.role-channel_manager #contenusMainTabBtn,
body.role-channel_manager #onbMainTabBtn,
body.role-channel_manager #techMainTabBtn,
body.role-channel_manager #procMainTabBtn,
body.role-channel_manager #perfMainTabBtn{display:none!important}
body.role-partenaire #contenusMainTabBtn,
body.role-partenaire #onbMainTabBtn,
body.role-partenaire #techMainTabBtn,
body.role-partenaire #procMainTabBtn,
body.role-partenaire #perfMainTabBtn{display:none!important}
body.role-admin_contenu #onbMainTabBtn,
body.role-admin_contenu #techMainTabBtn,
body.role-admin_contenu #partMainTabBtn{display:none!important}
body.role-administration #contenusMainTabBtn,
body.role-administration #partMainTabBtn,
body.role-administration #demosMainTabBtn{display:none!important}


/* ── Profil utilisateur ancré à droite du header ── */
.hr { justify-content: flex-start; }
.cu-wrap { margin-left: auto !important; }


/* ── Garantir que .hr est flex et que le profil va à droite ── */
.hr {
  display: flex !important;
  align-items: center !important;
  flex: 1 1 0 !important;        /* prend tout l'espace disponible */
  min-width: 0 !important;
  gap: 5px !important;
  padding: 0 18px 0 12px !important;
  height: 100% !important;
  overflow: visible !important;
}
.cu-wrap { margin-left: auto !important; flex-shrink: 0 !important; }


/* ══════════════════════════════════════════════════════════════
   LOGIN SCREEN — premium redesign
   ══════════════════════════════════════════════════════════════ */

.lg-scr {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #06080F;
  overflow: hidden;
}
.lg-scr.active-screen { display: flex; }

/* Canvas particles */
.lg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Aurora animated blobs */
.lg-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.lg-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .5;
  animation: blobFloat 12s ease-in-out infinite;
}
.lg-blob--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(79,121,255,.4), transparent 70%);
  top: -200px; left: -150px;
  animation-duration: 14s;
}
.lg-blob--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(155,111,255,.35), transparent 70%);
  bottom: -150px; right: -100px;
  animation-duration: 18s;
  animation-delay: -6s;
}
.lg-blob--3 {
  width: 350px; height: 350px;
  background: radial-gradient(circle, rgba(224,62,62,.25), transparent 70%);
  top: 40%; left: 35%;
  animation-duration: 10s;
  animation-delay: -3s;
}
.lg-blob--4 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(15,202,122,.2), transparent 70%);
  top: 10%; right: 20%;
  animation-duration: 16s;
  animation-delay: -9s;
}
@keyframes blobFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(30px, -40px) scale(1.05); }
  66%       { transform: translate(-20px, 30px) scale(.95); }
}

/* Subtle grid overlay */
.lg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, transparent 30%, black 100%);
}

/* Layout split */
.lg-left {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px;
  position: relative;
  z-index: 1;
}
.lg-right {
  width: 440px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  position: relative;
  z-index: 1;
}
@media(max-width: 768px) {
  .lg-scr { flex-direction: column; }
  .lg-left { display: none; }
  .lg-right { width: 100%; padding: 24px; }
}

/* Left panel content */
.lg-left-inner { max-width: 460px; }
.lg-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 56px;
}
.lg-brand-mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #e03e3e, #ff6b6b);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px; font-weight: 900;
  color: #fff;
  box-shadow: 0 4px 20px rgba(224,62,62,.4);
}
.lg-brand-name {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 18px; font-weight: 900;
  color: #F0F4FF;
  letter-spacing: -.3px;
}
.lg-brand-sub {
  font-size: 10px; font-weight: 600;
  color: #4D5568;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.lg-headline {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(36px, 4vw, 52px);
  font-weight: 900;
  color: #F0F4FF;
  line-height: 1.1;
  letter-spacing: -1.5px;
  margin-bottom: 20px;
}
.lg-headline-accent {
  background: linear-gradient(135deg, #4F79FF, #9B6FFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.lg-tagline {
  font-size: 15px;
  color: #5A6070;
  line-height: 1.7;
  margin-bottom: 48px;
  font-weight: 400;
}
.lg-stats {
  display: flex;
  align-items: center;
  gap: 24px;
}
.lg-stat-val {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 26px;
  font-weight: 900;
  color: #F0F4FF;
  letter-spacing: -1px;
  line-height: 1;
}
.lg-stat-lbl {
  font-size: 10px;
  font-weight: 600;
  color: #4D5568;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin-top: 4px;
}
.lg-stat-sep {
  width: 1px; height: 36px;
  background: rgba(255,255,255,.08);
}

/* Form card — glassmorphism */
.lg-card {
  width: 100%;
  max-width: 380px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: rgba(17, 21, 32, 0.7);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  padding: 36px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.04),
    0 32px 80px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.07);
  animation: cardIn .5s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

/* Card logo */
.lg-card-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}
.lg-card-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #e03e3e, #ff6b6b);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 900;
  color: #fff;
  box-shadow: 0 3px 12px rgba(224,62,62,.35);
  flex-shrink: 0;
}
.lg-card-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 700;
  color: #8892A4;
  letter-spacing: .2px;
}

/* Tabs */
.lg-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: rgba(255,255,255,.04);
  padding: 4px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.06);
}
.lg-tbtn {
  flex: 1;
  padding: 9px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  font-family: 'Inter', system-ui, sans-serif;
  color: #4D5568;
  transition: all .18s;
  letter-spacing: -.1px;
}
.lg-tbtn.active {
  background: rgba(79,121,255,.15);
  color: #7BA4FF;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

/* Field */
.lg-field {
  margin-bottom: 14px;
}
.lg-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: #5A6070;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}
.lg-inp {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  font-size: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  outline: none;
  box-sizing: border-box;
  background: rgba(255,255,255,.04);
  color: #F0F4FF;
  transition: border-color .15s, box-shadow .15s, background .15s;
  color-scheme: dark;
}
.lg-inp:focus {
  border-color: rgba(79,121,255,.5);
  box-shadow: 0 0 0 3px rgba(79,121,255,.12);
  background: rgba(79,121,255,.05);
}
.lg-inp::placeholder { color: rgba(255,255,255,.18); }

/* Error */
.lg-err { color: #F5445A; font-size: 12px; min-height: 18px; margin-bottom: 10px; }

/* Submit button */
.lg-btn {
  width: 100%;
  padding: 13px 18px;
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  letter-spacing: -.1px;
  background: linear-gradient(135deg, #e03e3e 0%, #c0392b 100%);
  box-shadow: 0 4px 20px rgba(224,62,62,.35), inset 0 1px 0 rgba(255,255,255,.15);
  transition: all .2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 4px;
}
.lg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 32px rgba(224,62,62,.45), inset 0 1px 0 rgba(255,255,255,.15);
}
.lg-btn:active { transform: translateY(0); }
.lg-btn:disabled { opacity: .5; cursor: wait; transform: none; }


/* ── Checklist modal — validateur ── */
.clm-validator { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.clm-validator-lbl { font-size:14px; flex-shrink:0; }
.clm-name-inp {
  flex:1; height:30px; padding:0 10px;
  border:1px solid var(--border); border-radius:7px;
  background:var(--bg2); color:var(--text1);
  font-size:12px; font-family:'Inter',inherit; outline:none;
  transition:border-color .15s;
}
.clm-name-inp:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
body.light-mode .clm-name-inp { background:#fff; color:#1a1d2e; border-color:rgba(0,0,0,.12); }


/* ══ NOTIFICATIONS ══════════════════════════════════════════ */

/* Bouton cloche */
.hb-notif {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: none;
  color: var(--text3);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
}
.hb-notif:hover { background: rgba(255,255,255,.06); color: var(--text2); border-color: var(--border2); }
.hb-notif.has-alerts { color: var(--orange); border-color: rgba(252,169,46,.3); background: rgba(252,169,46,.07); }
.hb-notif.has-overdue { color: var(--red); border-color: rgba(245,68,90,.3); background: rgba(245,68,90,.07); }
body.light-mode .hb-notif:hover { background: rgba(0,0,0,.05); }

/* Badge */
.notif-badge {
  position: absolute;
  top: -5px; right: -5px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  font-family: 'Inter', system-ui, sans-serif;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--bg);
  line-height: 1;
}

/* Overlay */
.notif-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 1999;
}
.notif-overlay.open { display: block; }

/* Panel */
.notif-panel {
  position: fixed;
  top: 56px; right: 0;
  width: 380px;
  height: calc(100vh - 56px);
  background: var(--card);
  border-left: 1px solid var(--border2);
  box-shadow: -8px 0 48px rgba(0,0,0,.4);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.4,0,.2,1);
}
.notif-panel.open { transform: translateX(0); }
body.light-mode .notif-panel { background: #fff; box-shadow: -4px 0 32px rgba(0,0,0,.08); }

/* Head */
.notif-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notif-head-left { display: flex; align-items: center; gap: 12px; }
.notif-head-ico {
  width: 34px; height: 34px; border-radius: 9px;
  background: rgba(252,169,46,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.notif-head-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 800;
  color: var(--text1); letter-spacing: -.2px;
}
.notif-head-sub { font-size: 10px; color: var(--text3); margin-top: 2px; }
.notif-close {
  width: 26px; height: 26px; border-radius: 6px;
  border: none; background: rgba(255,255,255,.05);
  color: var(--text3); cursor: pointer; font-size: 11px;
  transition: all .14s;
}
.notif-close:hover { background: var(--red-bg); color: var(--red); }

/* Filters */
.notif-filters {
  display: flex; gap: 4px; padding: 10px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0; flex-wrap: wrap;
}
.nf-btn {
  padding: 4px 10px; border-radius: 6px;
  border: 1px solid var(--border);
  background: none; color: var(--text3);
  font-size: 10px; font-weight: 700;
  cursor: pointer; font-family: inherit;
  transition: all .13s; white-space: nowrap;
  display: flex; align-items: center; gap: 5px;
}
.nf-btn:hover { background: rgba(255,255,255,.05); color: var(--text2); }
.nf-btn.active { background: rgba(79,121,255,.12); color: var(--accent); border-color: rgba(79,121,255,.3); }
.nf-btn.overdue.active { background: var(--red-bg); color: var(--red); border-color: rgba(245,68,90,.3); }
.nf-btn.today.active  { background: rgba(252,169,46,.12); color: var(--orange); border-color: rgba(252,169,46,.3); }
.nf-btn.week.active   { background: rgba(79,121,255,.1); color: var(--accent); border-color: rgba(79,121,255,.3); }
.nf-btn-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; padding: 0 4px; border-radius: 4px;
  background: rgba(255,255,255,.08);
}

/* Body scrollable */
.notif-body {
  overflow-y: auto; flex: 1;
  scrollbar-width: thin; scrollbar-color: var(--border) transparent;
  padding-bottom: 12px;
}

/* Group header */
.notif-group-hd {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px 8px;
  font-size: 9px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .8px;
  color: var(--text3);
  position: sticky; top: 0;
  background: var(--card); z-index: 1;
  border-bottom: 1px solid var(--border);
}
.notif-group-dot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
}
body.light-mode .notif-group-hd { background: #fff; }

/* Item */
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(255,255,255,.03);
  cursor: default;
  transition: background .12s;
}
.notif-item:hover { background: rgba(255,255,255,.025); }
.notif-item--overdue { border-left: 3px solid var(--red); padding-left: 15px; }
.notif-item--today   { border-left: 3px solid var(--orange); padding-left: 15px; }
.notif-item--week    { border-left: 3px solid var(--accent); padding-left: 15px; }
.notif-item--future  { border-left: 3px solid var(--border2); padding-left: 15px; }

.notif-ico {
  width: 30px; height: 30px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; flex-shrink: 0; margin-top: 1px;
}
.notif-ico--overdue { background: var(--red-bg); }
.notif-ico--today   { background: rgba(252,169,46,.12); }
.notif-ico--week    { background: var(--accent-soft); }
.notif-ico--future  { background: rgba(255,255,255,.05); }

.notif-content { flex: 1; min-width: 0; }
.notif-title {
  font-size: 12px; font-weight: 700; color: var(--text1);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.notif-desc {
  font-size: 10.5px; color: var(--text3); margin-top: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.notif-meta { display: flex; align-items: center; gap: 6px; margin-top: 5px; flex-wrap: wrap; }
.notif-tag {
  font-size: 9px; font-weight: 700; padding: 1px 6px;
  border-radius: 4px; text-transform: uppercase; letter-spacing: .3px;
}
.notif-tag--overdue { background: var(--red-bg); color: var(--red); }
.notif-tag--today   { background: rgba(252,169,46,.12); color: var(--orange); }
.notif-tag--week    { background: var(--accent-soft); color: var(--accent); }
.notif-tag--future  { background: rgba(255,255,255,.06); color: var(--text3); }
.notif-date {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px; color: var(--text3);
}

.notif-empty {
  text-align: center; padding: 48px 24px;
  color: var(--text3); font-size: 12px; line-height: 1.7;
}

@media(max-width: 768px) {
  .notif-panel { width: 100%; }
}



/* ══ NOTIFS INLINE BUTTONS ══════════════════════════════════ */
.cn-notif-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 10px; border-radius: 7px;
  border: 1px solid var(--border);
  background: none; color: var(--text3);
  font-size: 11px; font-weight: 700; font-family: inherit;
  cursor: pointer; transition: all .14s; white-space: nowrap; flex-shrink: 0;
}
.cn-notif-btn:hover { background: rgba(255,255,255,.05); color: var(--text2); }
.cn-notif-btn.cn-has {
  color: var(--orange);
  border-color: rgba(252,169,46,.35);
  background: rgba(252,169,46,.06);
}
.cn-notif-btn.cn-on {
  color: var(--accent);
  border-color: rgba(79,121,255,.4);
  background: rgba(79,121,255,.1);
  box-shadow: 0 0 0 1px rgba(79,121,255,.2);
}
.cn-notif-btn.cn-on:hover { background: rgba(79,121,255,.15); }
.cn-notif-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--red); color: #fff;
  font-size: 8px; font-weight: 800; line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
body.light-mode .cn-notif-btn:hover { background: rgba(0,0,0,.04); }
body.light-mode .cn-notif-btn.cn-has { background: rgba(252,169,46,.08); }
body.light-mode .cn-notif-btn.cn-on  { background: rgba(79,121,255,.08); }


/* ══ TRAÇABILITÉ MODAL ══════════════════════════════════════ */
#traceModal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.72); backdrop-filter: blur(10px);
  z-index: 600; align-items: center; justify-content: center;
}
#traceModal .trc-panel {
  background: var(--card); border: 1px solid var(--border2);
  border-radius: 18px; box-shadow: 0 32px 80px rgba(0,0,0,.5);
  width: 92vw; max-width: 860px; max-height: 88vh;
  display: flex; flex-direction: column; overflow: hidden;
  animation: modalIn .22s cubic-bezier(.34,1.56,.64,1);
}
/* En-tête */
.trc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px 16px; border-bottom: 1px solid var(--border);
  flex-shrink: 0; gap: 12px;
}
.trc-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.trc-title-ico {
  width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--purple) 100%);
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.trc-title-text h3 {
  font-size: 15px; font-weight: 800; color: var(--text);
  font-family: 'Inter', system-ui, sans-serif; letter-spacing: -.3px; margin: 0;
}
.trc-title-text p {
  font-size: 10px; color: var(--text3); margin: 2px 0 0;
}
.trc-close {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  color: var(--text3); width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; font-size: 15px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: all .14s;
}
.trc-close:hover { background: rgba(255,255,255,.07); color: var(--text); }
/* Stats */
.trc-stats {
  display: flex; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.trc-stat {
  flex: 1; padding: 12px 16px; text-align: center;
  border-right: 1px solid var(--border);
}
.trc-stat:last-child { border-right: none; }
.trc-stat-val {
  font-size: 22px; font-weight: 900; color: var(--text); line-height: 1;
  font-family: 'JetBrains Mono', monospace;
}
.trc-stat-lbl {
  font-size: 9px; font-weight: 700; color: var(--text3); margin-top: 3px;
  text-transform: uppercase; letter-spacing: .6px;
}
/* Filtres */
.trc-filters {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 16px; border-bottom: 1px solid var(--border); flex-shrink: 0;
}
.trc-filter-grp { display: flex; gap: 4px; flex-shrink: 0; }
.trc-fbtn {
  background: none; border: 1px solid var(--border); color: var(--text3);
  padding: 5px 11px; border-radius: 7px; font-size: 10px; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: all .14s; white-space: nowrap;
}
.trc-fbtn:hover { background: rgba(255,255,255,.05); color: var(--text2); }
.trc-fbtn.active { background: rgba(79,121,255,.14); color: var(--accent); border-color: rgba(79,121,255,.45); }
.trc-search, .trc-date {
  background: var(--card2); border: 1px solid var(--border); color: var(--text);
  padding: 6px 11px; border-radius: 8px; font-size: 11px;
  font-family: inherit; outline: none; transition: border-color .14s;
}
.trc-search { flex: 1; min-width: 130px; }
.trc-search:focus, .trc-date:focus { border-color: var(--accent); }
/* Corps */
.trc-body { flex: 1; overflow-y: auto; padding: 6px 14px 16px; min-height: 0; }
/* Séparateur jour */
.trc-day {
  display: flex; align-items: center; gap: 8px;
  font-size: 9.5px; font-weight: 800; color: var(--text3);
  text-transform: uppercase; letter-spacing: .7px;
  margin: 14px 0 5px; padding-bottom: 6px; border-bottom: 1px solid var(--border);
}
.trc-day-n {
  margin-left: auto; background: rgba(255,255,255,.06); color: var(--text3);
  font-size: 9px; font-weight: 700; padding: 1px 7px; border-radius: 10px;
  font-family: 'JetBrains Mono', monospace;
}
/* Ligne */
.trc-row {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 10px; border-radius: 9px; margin-bottom: 2px;
  transition: background .12s;
}
.trc-row:hover { background: rgba(255,255,255,.03); }
.trc-row--auth  { background: rgba(79,121,255,.05); }
.trc-row--danger{ background: rgba(245,68,90,.05); }
/* Avatar */
.trc-av {
  width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
}
/* Partie gauche : user */
.trc-left { flex: 0 0 180px; min-width: 0; }
.trc-uname {
  font-size: 12px; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.trc-urole {
  display: inline-block; font-size: 8px; font-weight: 800;
  padding: 1px 5px; border-radius: 4px; border: 1px solid;
  text-transform: uppercase; letter-spacing: .4px; margin-top: 2px;
}
.trc-uemail {
  font-size: 9.5px; color: var(--text3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Partie droite : action */
.trc-act { flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 8px; }
.trc-act-ico { font-size: 15px; flex-shrink: 0; line-height: 1.3; }
.trc-act-body { min-width: 0; }
.trc-act-lbl { font-size: 11px; font-weight: 700; }
.trc-act-sub {
  font-size: 9.5px; color: var(--text3); margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px;
}
.trc-diff {
  display: flex; align-items: center; gap: 5px; margin-top: 3px;
  font-size: 9px; font-family: 'JetBrains Mono', monospace;
}
.trc-old { color: var(--red); text-decoration: line-through; opacity: .75; }
.trc-arr { color: var(--text3); }
.trc-new { color: var(--green); }
/* Heure */
.trc-time {
  flex-shrink: 0; font-size: 10px; color: var(--text3);
  font-family: 'JetBrains Mono', monospace; white-space: nowrap;
}
/* Light mode */
body.light-mode .trc-panel { background: #fff; }
body.light-mode .trc-day-n { background: rgba(0,0,0,.06); }
body.light-mode .trc-row:hover { background: rgba(0,0,0,.03); }
body.light-mode .trc-search,
body.light-mode .trc-date { background: #f3f4f8; }



/* ═══ CLIENT CONSOLIDATED VIEW ═══ */
.cl-view{max-width:780px;width:100%}
.cl-view-header{padding:24px 28px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px}
.cl-av-big{width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;color:#fff;flex-shrink:0}
.cl-hinfo h3{font-size:18px;font-weight:800;margin-bottom:4px}
.cl-hinfo .cl-tags{display:flex;gap:6px;flex-wrap:wrap}
.cl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:20px 28px;border-bottom:1px solid var(--border)}
.cl-kpi{text-align:center;padding:10px}.cl-kpi .kv{font-size:22px;font-weight:800}.cl-kpi .kl{font-size:10px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:.3px;margin-top:2px}
.cl-deals{padding:20px 28px}.cl-deals-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--text)}
.cl-deal{background:var(--bg2);border:1px solid var(--border);border-radius:10px;padding:14px 18px;margin-bottom:8px;cursor:pointer;transition:all .15s}
.cl-deal:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(51,97,255,.08)}
.cl-deal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cl-deal-type{font-size:10px;font-weight:700;padding:2px 8px;border-radius:4px}
.cl-deal-amount{font-size:14px;font-weight:800}
.cl-deal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:6px}
.cl-deal-field{font-size:11px}.cl-deal-field .lbl{color:var(--text3);font-weight:600;font-size:9px;text-transform:uppercase}.cl-deal-field .val{font-weight:600;margin-top:1px}
.cl-deal-progress{display:flex;gap:3px;margin-top:8px}.cl-deal-dot{width:8px;height:8px;border-radius:50%}
@media(max-width:768px){.cl-kpis{grid-template-columns:repeat(2,1fr)!important}}

/* ═══ HIDE MOBILE NAVS ON DESKTOP ═══ */
#mobNavTech { display: none; }

/* ═══ SUPPORT MODULE ═══ */
.sup-kpi{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:20px}
.sup-k{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.sup-k .kv{font-size:26px;font-weight:700;letter-spacing:-1px}.sup-k .kl{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}.sup-k .ks{font-size:10px;color:var(--text3);margin-top:2px}
.tk-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;cursor:pointer;transition:all .2s;display:flex;align-items:flex-start;gap:12px;margin-bottom:6px}
.tk-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(51,97,255,.08)}
.tk-pri{width:4px;border-radius:2px;min-height:40px;flex-shrink:0}
.tk-pri.bloquante{background:#e03e3e}.tk-pri.semi_bloquante{background:#e8910c}.tk-pri.amelioration{background:#3361ff}
.tk-body{flex:1;min-width:0}
.tk-title{font-size:13px;font-weight:700;margin-bottom:3px;display:flex;align-items:center;gap:8px}
.tk-id{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text3);background:var(--gray-bg);padding:1px 6px;border-radius:3px;flex-shrink:0}
.tk-meta{font-size:11px;color:var(--text2);display:flex;gap:12px;flex-wrap:wrap;margin-top:4px}
.tk-stat{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase}
.tk-stat.nouveau{background:rgba(79,121,255,.12);color:var(--accent)}.tk-stat.en_cours{background:rgba(252,169,46,.12);color:var(--orange)}.tk-stat.attente_client{background:rgba(155,111,255,.12);color:var(--purple)}.tk-stat.resolu{background:rgba(15,202,122,.12);color:var(--green)}.tk-stat.cloture{background:var(--gray-bg);color:var(--text3)}
.tk-cat{font-size:10px;font-weight:600;padding:2px 6px;border-radius:3px;background:var(--gray-bg);color:var(--text2)}
.tk-assign{font-size:10px;color:var(--accent);font-weight:600}
.tk-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.tk-date{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace}
.tk-msgs{margin-top:16px}.tk-msg{padding:12px 16px;border-radius:10px;margin-bottom:8px;font-size:12.5px;line-height:1.6}
.tk-msg.own{background:var(--accent-soft);border:1px solid rgba(79,121,255,.15)}.tk-msg.other{background:var(--gray-bg);border:1px solid var(--border)}
.tk-msg-h{display:flex;justify-content:space-between;margin-bottom:4px;font-size:11px}.tk-msg-a{font-weight:700}.tk-msg-d{color:var(--text3);font-family:'JetBrains Mono',monospace}
.tk-reply{display:flex;gap:8px;margin-top:12px}.tk-reply textarea{flex:1;font-family:inherit;font-size:12.5px;padding:10px 14px;border:1.5px solid var(--border);border-radius:8px;resize:vertical;min-height:60px;outline:none;background:var(--bg2);color:var(--text)}.tk-reply textarea:focus{border-color:var(--accent)}
.tk-stars{display:flex;gap:2px;margin-top:8px}.tk-star{font-size:20px;cursor:pointer;transition:transform .15s;opacity:.3}.tk-star.active{opacity:1}.tk-star:hover{transform:scale(1.2)}
.kb-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 18px;cursor:pointer;transition:all .2s}
.kb-card:hover{border-color:var(--accent);box-shadow:0 2px 12px rgba(51,97,255,.08)}
.kb-cat{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);margin-bottom:4px}
.kb-title{font-size:14px;font-weight:700;margin-bottom:6px}
.kb-preview{font-size:12px;color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.kb-tags{display:flex;gap:4px;margin-top:8px;flex-wrap:wrap}
.kb-tag{font-size:9px;padding:2px 6px;border-radius:3px;background:var(--gray-bg);color:var(--text3);font-weight:600}


/* ═══ TICKET WORKFLOW ═══ */
.tk-workflow{margin-top:16px;padding:16px;background:var(--bg2);border-radius:12px;border:1px solid var(--border)}
.tk-wf-title{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;display:flex;align-items:center;gap:6px;color:var(--text)}
.tk-wf-steps{display:flex;gap:0;position:relative;margin-bottom:16px}
.tk-wf-step{flex:1;text-align:center;position:relative}
.tk-wf-dot{width:24px;height:24px;border-radius:50%;margin:0 auto 4px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;border:2px solid var(--border);background:var(--card);color:var(--text3);transition:all .3s}
.tk-wf-step.done .tk-wf-dot{background:var(--green);border-color:var(--green);color:#fff}
.tk-wf-step.active .tk-wf-dot{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 0 0 4px var(--orange-bg)}
.tk-wf-step.skip .tk-wf-dot{background:var(--gray-bg);border-color:var(--border);color:var(--text3)}
.tk-wf-lbl{font-size:8px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.tk-wf-line{position:absolute;top:12px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--border)}
.tk-wf-step.done .tk-wf-line{background:var(--green)}
.tk-wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tk-wf-field{display:flex;flex-direction:column;gap:3px}
.tk-wf-field label{font-size:9.5px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px}
.tk-wf-field input,.tk-wf-field select,.tk-wf-field textarea{font-family:inherit;font-size:11.5px;padding:6px 10px;border:1px solid var(--border);border-radius:6px;background:var(--card);color:var(--text);outline:none}
.tk-wf-field input:focus,.tk-wf-field select:focus,.tk-wf-field textarea:focus{border-color:var(--accent)}
.tk-wf-field.full{grid-column:1/-1}
.tk-wf-check{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--card);border:1px solid var(--border);border-radius:8px;cursor:pointer;transition:all .15s}
.tk-wf-check:hover{border-color:var(--accent)}
.tk-wf-check.checked{background:var(--green-bg);border-color:var(--green)}
.tk-wf-check .dot{width:18px;height:18px;border-radius:50%;border:2px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:10px;flex-shrink:0;transition:all .15s}
.tk-wf-check.checked .dot{background:var(--green);border-color:var(--green);color:#fff}
.tk-wf-check .clbl{font-size:11.5px;font-weight:600}
.tk-wf-check .cdate{font-size:9px;color:var(--text3);font-family:'JetBrains Mono',monospace;margin-left:auto}
.tk-timeline{margin-top:12px;padding-left:16px;border-left:2px solid var(--border)}
.tk-tl-item{position:relative;padding:6px 0 6px 16px;font-size:11px;color:var(--text2)}
.tk-tl-item::before{content:'';position:absolute;left:-21px;top:10px;width:8px;height:8px;border-radius:50%;background:var(--accent);border:2px solid var(--card)}
.tk-tl-item.green::before{background:var(--green)}
.tk-tl-item.orange::before{background:var(--orange)}
.tk-tl-item.red::before{background:var(--red)}
.tk-tl-date{font-size:9px;color:var(--text3);font-family:'JetBrains Mono',monospace}
.tk-sla-bar{margin-top:12px;padding:10px 14px;border-radius:8px;display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600}
.tk-sla-bar.ok{background:var(--green-bg);color:var(--green)}
.tk-sla-bar.warn{background:var(--orange-bg);color:var(--orange)}
.tk-sla-bar.over{background:var(--red-bg);color:var(--red)}



/* ═══ TICKET TABLE ═══ */
.tk-table{width:100%;border-collapse:collapse;font-size:11.5px}
.tk-table thead th{background:var(--bg2);padding:8px 10px;text-align:left;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:2}
.tk-table tbody tr{border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.tk-table tbody tr:hover{background:rgba(51,97,255,.03)}
.tk-table tbody tr.tk-row-green{background:rgba(18,163,94,.04)}
.tk-table tbody tr.tk-row-green:hover{background:rgba(18,163,94,.08)}
.tk-table td{padding:6px 10px;vertical-align:middle}
.tk-table .tk-col-title{font-weight:700;color:var(--text);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-table .tk-col-title:hover{color:var(--accent)}
.tk-prog-dots{display:flex;gap:3px;align-items:center}
.tk-prog-dots span{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--border);background:var(--card)}
.tk-prog-dots span.done{background:var(--green);border-color:var(--green)}
.tk-prog-dots span.active{background:var(--orange);border-color:var(--orange)}

/* ═══ ROADMAP KPIS ═══ */
.rm-kpis{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:20px}
.rm-kpi{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 16px;box-shadow:var(--shadow)}
.rm-kpi .kl{font-size:10px;font-weight:600;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.rm-kpi .kv{font-size:22px;font-weight:700;letter-spacing:-1px}
.rm-kpi .ks{font-size:10px;color:var(--text3);margin-top:2px}
.rm-kpi .bar{width:100%;height:4px;background:var(--gray-bg);border-radius:2px;margin-top:6px;overflow:hidden}
.rm-kpi .bar-fill{height:100%;border-radius:2px;transition:width .5s}
.rm-tl{position:relative;padding:20px 0 20px 0}
.rm-tl-line{position:absolute;top:38px;left:40px;right:40px;height:3px;background:var(--border);border-radius:2px}
.rm-tl-items{display:flex;justify-content:space-between;position:relative;z-index:1;flex-wrap:wrap;gap:8px}
.rm-tl-item{display:flex;flex-direction:column;align-items:center;min-width:90px;flex:1}
.rm-tl-dot{width:18px;height:18px;border-radius:50%;border:3px solid var(--border);background:var(--card);margin-bottom:6px;position:relative;z-index:2;transition:all .3s}
.rm-tl-item.done .rm-tl-dot{background:var(--green);border-color:var(--green)}
.rm-tl-item.active .rm-tl-dot{background:var(--orange);border-color:var(--orange);box-shadow:0 0 0 4px var(--orange-bg)}
.rm-tl-item.future .rm-tl-dot{background:var(--card);border-color:var(--border)}
.rm-tl-label{font-size:10px;font-weight:700;text-align:center;color:var(--text)}
.rm-tl-date{font-size:9px;color:var(--text3);font-family:'JetBrains Mono',monospace;text-align:center;margin-top:2px}
.rm-tl-cnt{font-size:9px;font-weight:700;color:var(--accent);text-align:center;margin-top:2px}
.rm-by-mod{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-bottom:20px}
.rm-mod-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px}
.rm-mod-name{font-size:12px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:6px}
.rm-mod-bar{display:flex;gap:2px;margin-top:4px}.rm-mod-seg{height:6px;border-radius:2px;flex:1}
@media(max-width:768px){.rm-kpis{grid-template-columns:repeat(2,1fr)!important}}

/* ═══ ROADMAP TECHNO ═══ */
.rm-board{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:20px;min-height:300px}
.rm-col{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);display:flex;flex-direction:column;min-height:200px}
.rm-col-h{padding:10px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.rm-col-t{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.5px;display:flex;align-items:center;gap:6px}
.rm-col-cnt{font-size:9px;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--gray-bg);color:var(--text3)}
.rm-col-b{padding:8px;flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.rm-feat{background:var(--bg2);border:1px solid var(--border);border-radius:8px;padding:10px 12px;cursor:pointer;transition:all .15s}
.rm-feat:hover{border-color:var(--accent);box-shadow:0 2px 8px rgba(51,97,255,.08)}
.rm-feat-t{font-size:12px;font-weight:700;margin-bottom:4px;color:var(--text1)}
.rm-feat-desc{font-size:10.5px;color:var(--text2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-bottom:6px}
.rm-feat-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.rm-feat-pri{font-size:9px;font-weight:700;padding:1px 6px;border-radius:3px}
.rm-feat-pri.p0{background:rgba(245,68,90,.15);color:var(--red)}.rm-feat-pri.p1{background:rgba(252,169,46,.15);color:var(--orange)}.rm-feat-pri.p2{background:rgba(79,121,255,.15);color:var(--accent)}.rm-feat-pri.p3{background:var(--gray-bg);color:var(--text3)}
.rm-feat-mod{font-size:9px;font-weight:600;padding:1px 6px;border-radius:3px;background:rgba(155,111,255,.12);color:var(--purple)}
.rm-feat-date{font-size:9px;color:var(--text3);font-family:'JetBrains Mono',monospace}
.rm-feat-linked{font-size:9px;color:var(--accent);font-weight:600}
.rm-changelog{margin-top:20px}.rm-cl-item{display:flex;gap:12px;padding:10px 14px;border-left:2px solid var(--green);margin-bottom:6px;background:var(--card);border-radius:0 8px 8px 0}
.rm-cl-date{font-size:10px;color:var(--text3);font-family:'JetBrains Mono',monospace;flex-shrink:0;min-width:70px}
.rm-cl-body{flex:1}.rm-cl-title{font-size:12px;font-weight:700}.rm-cl-desc{font-size:10.5px;color:var(--text2);margin-top:2px}


/* Drag & Drop */
.rm-feat[draggable="true"]{cursor:grab}.rm-feat[draggable="true"]:active{cursor:grabbing}
.rm-feat.dragging{opacity:.4;transform:scale(.97)}
.rm-col-b.drag-over{background:var(--accent-soft);border:2px dashed var(--accent);border-radius:8px}



/* Dep checkbox labels */
#nf_deps_wrap label:has(input:checked),
[id^="feat_deps_wrap"] label:has(input:checked){border-color:var(--accent)!important;background:var(--accent-soft)!important}

/* ═══ GANTT CHART ═══ */
.gantt-wrap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:auto;margin-bottom:20px;box-shadow:var(--shadow)}
.gantt-table{width:100%;border-collapse:collapse;font-size:11px}
.gantt-table th{background:var(--bg2);padding:6px 10px;text-align:left;font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.3px;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:2}
.gantt-table td{padding:4px 8px;border-bottom:1px solid var(--border);vertical-align:middle}
.gantt-table tr:hover{background:rgba(51,97,255,.03)}
.gantt-name{font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;color:var(--accent)}
.gantt-name:hover{text-decoration:underline}
.gantt-bar-cell{position:relative;height:20px;min-width:300px}
.gantt-bar{position:absolute;height:14px;top:3px;border-radius:4px;min-width:6px;transition:all .3s}
.gantt-bar.idee{background:var(--gray-bg);border:1px solid var(--border)}
.gantt-bar.spec{background:rgba(79,121,255,.2);border:1px solid var(--accent)}
.gantt-bar.dev{background:rgba(252,169,46,.25);border:1px solid var(--orange)}
.gantt-bar.qa{background:rgba(155,111,255,.2);border:1px solid var(--purple)}
.gantt-bar.deployed{background:rgba(18,163,94,.2);border:1px solid var(--green)}
.gantt-dep{position:absolute;height:0;border-top:1.5px dashed var(--red);top:10px;z-index:1;pointer-events:none}
.gantt-dep::after{content:'▶';position:absolute;right:-6px;top:-7px;font-size:8px;color:var(--red)}
.gantt-months{display:flex;border-bottom:1px solid var(--border)}
.gantt-month{flex:1;text-align:center;font-size:9px;font-weight:700;color:var(--text3);padding:4px 0;border-right:1px solid var(--border)}
.gantt-today{position:absolute;top:0;bottom:0;width:2px;background:var(--red);z-index:3}

/* ═══ COMMAND PALETTE ═══ */
.cmd-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(8px);z-index:9500;align-items:flex-start;justify-content:center;padding-top:15vh}
.cmd-bg.open{display:flex}
.cmd-box{background:var(--card);border:1px solid var(--border2);border-radius:16px;width:560px;max-width:94vw;box-shadow:0 24px 80px rgba(0,0,0,.4);overflow:hidden;animation:modalIn .2s ease}
.cmd-input{width:100%;padding:16px 20px;border:none;background:none;font-size:16px;font-family:'Inter',inherit;color:var(--text1);outline:none}
.cmd-input::placeholder{color:var(--text3)}
.cmd-sep{height:1px;background:var(--border)}
.cmd-results{max-height:340px;overflow-y:auto;padding:8px}
.cmd-item{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:10px;cursor:pointer;transition:background .1s}
.cmd-item:hover,.cmd-item.active{background:var(--accent-soft)}
.cmd-ico{font-size:16px;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:8px;background:var(--gray-bg);flex-shrink:0}
.cmd-info{flex:1;min-width:0}.cmd-name{font-size:13px;font-weight:600;color:var(--text1)}.cmd-desc{font-size:10.5px;color:var(--text3)}
.cmd-badge{font-size:9px;font-weight:700;padding:2px 7px;border-radius:4px;flex-shrink:0}
.cmd-hint{padding:10px 16px;font-size:10px;color:var(--text3);border-top:1px solid var(--border);display:flex;gap:12px}
.cmd-key{font-family:'JetBrains Mono',monospace;font-size:9px;background:var(--gray-bg);padding:2px 5px;border-radius:3px;border:1px solid var(--border)}

@media(max-width:768px){
  .sup-kpi{grid-template-columns:repeat(2,1fr)!important;gap:6px!important}
  .rm-board{grid-template-columns:1fr!important;gap:8px!important}
  .rm-col{min-height:auto!important}
  .cmd-box{width:100vw!important;max-width:100vw!important;border-radius:0!important;margin-top:0!important}
}

/* ═══════════════════════════════════════════════════════════
   UX PREMIUM — micro-interactions, animations, polish global
   ═══════════════════════════════════════════════════════════ */

/* ── Keyframes globaux ── */
@keyframes ux-fade-up   { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes ux-fade-in   { from { opacity:0; } to { opacity:1; } }
@keyframes ux-scale-in  { from { opacity:0; transform:scale(.92); } to { opacity:1; transform:scale(1); } }
@keyframes ux-slide-r   { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes ux-check-pop { 0%{transform:scale(1)} 40%{transform:scale(1.35)} 70%{transform:scale(.9)} 100%{transform:scale(1)} }
@keyframes ux-shimmer   { 0%{background-position:-400px 0} 100%{background-position:400px 0} }
@keyframes ux-ripple    { from{transform:scale(0);opacity:.4} to{transform:scale(4);opacity:0} }
@keyframes ux-glow-pulse{ 0%,100%{box-shadow:0 0 0 0 currentColor} 50%{box-shadow:0 0 0 6px transparent} }
@keyframes ux-bar-grow  { from{width:0} to{width:var(--bar-w,100%)} }
@keyframes ux-count-in  { from{opacity:0;transform:translateY(8px) scale(.85)} to{opacity:1;transform:none} }
@keyframes ux-border-glow { 0%,100%{border-color:var(--border)} 50%{border-color:var(--accent)} }
@keyframes ux-toast-out { 0%{opacity:1;transform:translateY(0)} 100%{opacity:0;transform:translateY(12px)} }
@keyframes ux-spinner    { to{transform:rotate(360deg)} }

/* ── Stagger d'entrée pour les vues ── */
.vp.active { animation: ux-fade-in .3s ease both; }

.kpi-grid .kc:nth-child(1) { animation: ux-fade-up .35s .04s ease both; }
.kpi-grid .kc:nth-child(2) { animation: ux-fade-up .35s .08s ease both; }
.kpi-grid .kc:nth-child(3) { animation: ux-fade-up .35s .12s ease both; }
.kpi-grid .kc:nth-child(4) { animation: ux-fade-up .35s .16s ease both; }
.kpi-grid .kc:nth-child(5) { animation: ux-fade-up .35s .20s ease both; }
.kpi-grid .kc:nth-child(6) { animation: ux-fade-up .35s .24s ease both; }

/* ── KPI cards — hover beam effect ── */
.kc {
  transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, border-color .22s ease !important;
  overflow: hidden;
}
.kc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.04) 50%, transparent 60%);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity .3s, background-position .5s;
}
.kc:hover::after { opacity: 1; background-position: -100% 0; }
.kc:hover { transform: translateY(-3px) !important; border-color: var(--border2) !important; }
.kc:active { transform: translateY(-1px) !important; transition-duration: .08s !important; }

/* ── KPI valeurs — animation au chargement ── */
.kc-v { animation: ux-count-in .4s .1s cubic-bezier(.34,1.2,.64,1) both; }

/* ── Boutons — feedback tactile amélioré ── */
.hb {
  position: relative;
  overflow: hidden;
  transition: all .18s cubic-bezier(.34,1.2,.64,1) !important;
}
.hb::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  transition: inset .4s ease, opacity .4s ease;
  opacity: 0;
}
.hb:active::after { inset: -100%; opacity: 1; transition: none; }
.hb:active { transform: scale(.96) !important; }
.hb.p:active { box-shadow: 0 0 8px var(--accent-glow) !important; }
.hb.g:active { box-shadow: 0 0 8px rgba(15,202,122,.3) !important; }

/* ── Nav tabs — sliding indicator ── */
.nav-tab {
  position: relative;
  transition: color .2s, background .2s !important;
}
.nav-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: ux-fade-in .2s ease;
}

/* ── Onb main tabs — indicateur ── */
.onb-main-tab { position: relative; transition: color .2s, background .2s !important; }
.onb-main-tab.active::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  animation: ux-fade-in .2s ease;
}

/* ── Onb tabs (sensipro/secday etc.) ── */
.onb-tab { position: relative; transition: color .2s, background .2s !important; }

/* ── Table rows — hover plus fluide et visible ── */
tbody tr {
  transition: background .12s ease !important;
}
tbody tr:hover {
  background: rgba(79,121,255,.06) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}
.onb-tw tbody tr:hover {
  background: rgba(79,121,255,.06) !important;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* ── Cellules éditables — feedback fort ── */
td.ed, .onb-tw td.onb-ed {
  transition: background .12s ease !important;
}
td.ed:hover, .onb-tw td.onb-ed:hover {
  background: var(--accent-soft) !important;
  box-shadow: inset 0 0 0 1px rgba(79,121,255,.3);
}

/* ── Checkboxes onboarding — pop animation ── */
.onb-check {
  transition: transform .15s cubic-bezier(.34,1.56,.64,1), background .15s, box-shadow .15s, border-color .15s !important;
}
.onb-check:hover {
  transform: scale(1.18) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-soft), 0 0 10px rgba(79,121,255,.2) !important;
}
.onb-check.green:hover { box-shadow: 0 0 0 3px rgba(15,202,122,.2), 0 0 12px rgba(15,202,122,.25) !important; }
.onb-check.ux-just-checked { animation: ux-check-pop .35s cubic-bezier(.34,1.56,.64,1) !important; }

/* ── Hero cards dashboard ── */
.onb-hero-card {
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease, border-color .22s ease !important;
  overflow: hidden;
}
.onb-hero-card::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.04), transparent);
  transform: skewX(-20deg);
  transition: left .5s ease;
  pointer-events: none;
}
.onb-hero-card:hover { transform: translateY(-4px) scale(1.01) !important; border-color: var(--border2) !important; }
.onb-hero-card:hover::after { left: 130%; }
.onb-hero-card:active { transform: translateY(-1px) scale(.99) !important; transition-duration: .08s !important; }

/* Valeurs des hero cards — animation staggerée ── */
.onb-hero-card .hc-val { animation: ux-count-in .45s .08s cubic-bezier(.34,1.2,.64,1) both; }

/* ── Barres de progression — animation au render ── */
.onb-hero-card .hc-bar-fill,
.onb-rank-bar-fill,
.eq-bar-fill,
.pbf,
.ip-bar-fill {
  animation: ux-bar-grow .7s .2s cubic-bezier(.4,0,.2,1) both;
}

/* ── Panels dashboard ── */
.onb-dash-panel {
  transition: box-shadow .2s ease, border-color .2s ease !important;
}
.onb-dash-panel:hover {
  border-color: var(--border2) !important;
  box-shadow: var(--shadow-lg) !important;
}

/* ── ARR card — shimmer ── */
.onb-arr-card {
  position: relative;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease !important;
}
.onb-arr-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 48px rgba(79,121,255,.15) !important;
}
.onb-arr-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.03) 50%, transparent 70%);
  background-size: 400px 100%;
  background-position: -400px 0;
  animation: ux-shimmer 3s 1s ease-in-out infinite;
  pointer-events: none;
}

/* ── Drawer — slide-up amélioré ── */
.onb-drawer {
  animation: ux-fade-up .28s cubic-bezier(.34,1.3,.64,1) !important;
}
.onb-drawer-list li {
  animation: ux-slide-r .22s ease both;
  transition: background .12s ease !important;
}
.onb-drawer-list li:nth-child(1){animation-delay:.04s}
.onb-drawer-list li:nth-child(2){animation-delay:.07s}
.onb-drawer-list li:nth-child(3){animation-delay:.10s}
.onb-drawer-list li:nth-child(4){animation-delay:.13s}
.onb-drawer-list li:nth-child(5){animation-delay:.16s}
.onb-drawer-list li:nth-child(6){animation-delay:.19s}
.onb-drawer-list li:hover {
  background: var(--accent-soft) !important;
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
  margin-left: -8px;
  margin-right: -8px;
}

/* ── Fiche modal — animation ── */
.onb-fiche-m {
  animation: ux-scale-in .28s cubic-bezier(.34,1.3,.64,1) !important;
}
.onb-fiche-item {
  transition: background .15s, border-color .15s, transform .15s !important;
}
.onb-fiche-item:hover {
  background: var(--card) !important;
  border-color: var(--border2) !important;
  transform: translateX(3px);
}

/* ── Modals — animation scale in ── */
.efmod, .cmod, .clm, .scr-m, .adm-m, .rbox {
  animation: ux-scale-in .25s cubic-bezier(.34,1.3,.64,1) !important;
}

/* ── Command palette items ── */
.cmd-item {
  transition: background .1s, transform .12s ease !important;
}
.cmd-item:hover, .cmd-item.active {
  background: var(--accent-soft) !important;
  transform: translateX(4px);
}

/* ── Work plan items ── */
.wpl-i {
  transition: background .12s, border-color .12s, transform .15s ease !important;
}
.wpl-i:hover {
  background: var(--card2) !important;
  border-color: var(--border2) !important;
  transform: translateX(4px);
}

/* ── Alertes — hover glow ── */
.ac {
  transition: filter .2s, transform .2s ease !important;
}
.ac:hover {
  filter: brightness(1.12) !important;
  transform: translateX(4px);
}
.ac.crit:hover { box-shadow: inset 3px 0 0 var(--red), 2px 0 12px rgba(245,68,90,.1); }
.ac.warn:hover { box-shadow: inset 3px 0 0 var(--orange), 2px 0 12px rgba(252,169,46,.1); }
.ac.info:hover { box-shadow: inset 3px 0 0 var(--accent), 2px 0 12px rgba(79,121,255,.1); }

/* ── Geo chips ── */
.onb-geo-chip {
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s !important;
}
.onb-geo-chip:hover {
  transform: scale(1.07) translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.35) !important;
  border-color: var(--border2) !important;
}

/* ── Eq cards ── */
.eq-card {
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s ease !important;
}
.eq-card:hover { transform: translateY(-4px) !important; }

/* ── Calendar days ── */
.wd {
  transition: border-color .18s, box-shadow .18s, transform .18s ease !important;
}
.wd:hover {
  border-color: var(--accent) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.3) !important;
}
.wi {
  transition: filter .15s, transform .12s ease !important;
}
.wi:hover { filter: brightness(1.25) !important; transform: translateX(2px); }

/* ── Client search results ── */
.onb-cr-item {
  transition: background .12s, transform .12s ease !important;
}
.onb-cr-item:hover {
  background: var(--accent-soft) !important;
  transform: translateX(4px);
}

/* ── Dropdown items ── */
.ddi {
  transition: background .1s, transform .12s ease !important;
}
.ddi:hover { transform: translateX(3px); }

/* ── Rank items ── */
.onb-rank-item {
  transition: background .12s, border-radius .12s, padding .12s !important;
}
.onb-rank-item:hover {
  background: var(--accent-soft);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

/* ── Fiche chips ── */
.onb-fiche-chip {
  transition: transform .15s cubic-bezier(.34,1.4,.64,1), box-shadow .15s !important;
}
.onb-fiche-chip:hover { transform: scale(1.06); }
.onb-fiche-chip.ok:hover { box-shadow: 0 0 8px rgba(15,202,122,.3); }
.onb-fiche-chip.ko:hover { box-shadow: 0 0 8px rgba(245,68,90,.3); }

/* ── Toast — animation de sortie ── */
#toast.hiding { animation: ux-toast-out .3s ease forwards !important; }

/* ── Focus global — style cohérent ── */
button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px !important;
}
input:focus, select:focus, textarea:focus {
  transition: border-color .15s, box-shadow .15s !important;
}

/* ── Inputs — microinteraction de validation ── */
.efi, .efse, .finp, .fsel, .onb-col-box input, .onb-col-box select,
.onb-brief-ta, .scr-b textarea, #clName, .onb-client-search input {
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease !important;
}

/* ── Section titles — apparition ── */
.stit, .onb-kpi-section-title, .onb-section-title {
  animation: ux-fade-in .4s .05s ease both;
}

/* ── Scrollbars — plus visibles ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.12);
  border-radius: 4px;
  transition: background .2s;
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.25); }

/* ── ip-card (contenus en prod) ── */
.ip-card {
  transition: transform .22s cubic-bezier(.34,1.4,.64,1), box-shadow .22s, border-color .22s !important;
}
.ip-card:hover {
  transform: translateY(-4px) !important;
  border-color: var(--border2) !important;
}

/* ── Done rows ── */
.done-row {
  transition: background .15s, border-color .15s, transform .15s ease !important;
}
.done-row:hover {
  background: rgba(15,202,122,.06) !important;
  border-color: rgba(15,202,122,.25) !important;
  transform: translateX(4px);
}

/* ── Réduction motion pour accessibilité ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: .01ms !important;
    transition-duration: .01ms !important;
  }
}


/* ── Save indicator — transition couleur ── */
#saveI {
  transition: color .3s ease, background .3s ease, box-shadow .3s ease !important;
  cursor: default;
}
#saveI.ok  { animation: none; }

/* ── Logo — hover subtil ── */
.logo { cursor: default; }
.logo:hover .logo-icon { transform: rotate(-5deg) scale(1.05); box-shadow: 0 0 28px rgba(224,62,62,.45); transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
.logo-icon { transition: transform .25s ease, box-shadow .25s ease; }

/* ── Theme toggle — rotation ── */
.theme-toggle {
  transition: all .22s cubic-bezier(.34,1.4,.64,1) !important;
}
.theme-toggle:hover {
  transform: rotate(18deg) scale(1.1) !important;
  border-color: var(--border2) !important;
}
.theme-toggle:active { transform: rotate(360deg) scale(.95) !important; transition-duration: .35s !important; }

/* ── Header right buttons zone ── */
.hr .hb { transition: transform .18s cubic-bezier(.34,1.4,.64,1), background .18s, border-color .18s, color .18s !important; }
.hr .hb:hover { transform: translateY(-1px) !important; }
.hr .hb:active { transform: translateY(1px) scale(.97) !important; }

/* ── Onb fiche header accent ── */
.onb-fiche-h {
  background: linear-gradient(90deg, var(--bg2), transparent);
  border-radius: 16px 16px 0 0;
}

/* ── Panels inner scroll — meilleur look ── */
.onb-dp-b, .onb-drawer-b, .efb, .cmb, .adm-b, .onb-fiche-b {
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.12) transparent;
}

/* ── Row done — gradient animé ── */
.onb-tw tbody tr.onb-row-done {
  background: linear-gradient(90deg, rgba(15,202,122,.16), rgba(15,202,122,.28), rgba(15,202,122,.16)) !important;
  background-size: 200% 100% !important;
}

/* ── Fact planning cells ── */
.fact-cal-cell {
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s ease !important;
}
.fact-cal-cell:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important;
}

/* ── Montant wrap ── */
.onb-montant-cur, .onb-montant-val {
  transition: background .15s, color .15s !important;
}
.onb-montant-cur:hover { background: var(--accent-soft) !important; color: var(--accent) !important; }

/* ── CDP tag ── */
.onb-cdp-tag {
  transition: transform .18s cubic-bezier(.34,1.4,.64,1), box-shadow .18s ease !important;
}
.onb-cdp-tag:hover { transform: scale(1.08) !important; box-shadow: 0 2px 10px rgba(155,111,255,.3) !important; }

/* ── Open fiche btn ── */
.onb-open-fiche {
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .15s, border-color .15s !important;
}
.onb-open-fiche:hover { transform: scale(1.15) !important; }

/* ── Date cells ── */
.onb-date {
  transition: background .15s, color .15s, border-radius .15s !important;
}
.onb-date:hover { background: var(--accent-soft) !important; border-radius: 5px !important; }
.onb-date.over:hover { background: var(--red-bg) !important; }
.onb-date.soon:hover { background: var(--orange-bg) !important; }

/* ── Admin items ── */
.adm-i {
  transition: background .12s, border-color .12s, transform .15s ease !important;
}
.adm-i:hover { transform: translateX(4px) !important; }

/* ── Onb row highlight click ── */
@keyframes ux-row-flash { 0%{background:rgba(79,121,255,.15)} 100%{background:transparent} }
.onb-tw tbody tr.ux-row-flash { animation: ux-row-flash .5s ease; }

/* ── Command palette — backdrop plus doux ── */
.cmd-bg { animation: ux-fade-in .15s ease; }
.cmd-box { animation: ux-scale-in .2s cubic-bezier(.34,1.3,.64,1) !important; }

/* ── Pie donut SVG — hover ── */
.onb-pie-leg-item {
  transition: transform .15s ease, color .15s !important;
  cursor: pointer;
}
.onb-pie-leg-item:hover { transform: translateX(4px); color: var(--text1) !important; }

/* ── Section body toggle ── */
.onb-section-body {
  transition: opacity .25s ease;
}

/* ── Fact pct modal ── */
#factPctPanel {
  animation: ux-scale-in .22s cubic-bezier(.34,1.3,.64,1) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   NEW AGE PREMIUM DESIGN OVERHAUL — Total visual redesign
   ═══════════════════════════════════════════════════════════════════ */

/* ── New keyframes ── */
@keyframes na-orb-float { 0%,100%{transform:translateY(0) scale(1)} 50%{transform:translateY(-18px) scale(1.03)} }
@keyframes na-glow-in   { from{opacity:0;filter:blur(12px)} to{opacity:1;filter:blur(0)} }
@keyframes na-line-in   { from{width:0;opacity:0} to{width:100%;opacity:1} }
@keyframes na-gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes na-scan { 0%{transform:translateY(-100%)} 100%{transform:translateY(400%)} }

/* ── FONT imports additionnels ── */
/* DM Sans déjà chargé — on enrichit avec tailles */

/* ── GLOBAL body ── */
body { background: var(--bg) !important; }

/* ── HEADER — nouvelle identité ── */
.header {
  height: 58px !important;
  z-index: 500 !important;
}

/* Logo redesign */
.logo-icon {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #ff4d6a, #ff7b8a) !important;
  box-shadow: 0 0 20px rgba(255,77,106,.35), inset 0 1px 0 rgba(255,255,255,.2) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  letter-spacing: -.5px !important;
}
.logo-name {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 800 !important;
  letter-spacing: -.4px !important;
  color: var(--text1) !important;
}
.logo-aw  { color: var(--text1); }
.logo-red { color: #ff6b84; }
.logo-sep { color: var(--text3); margin: 0 3px; }
.logo-delivr { color: var(--accent2); font-weight: 700; }
.logo-sub {
  font-size: 8.5px !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  font-weight: 600 !important;
  margin-top: 1px !important;
}

/* App switcher buttons — colored pill design */
.app-sw-btn {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 6px 14px !important;
  border-radius: 8px !important;
  border: none !important;
  background: none !important;
  color: var(--text3) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all .2s cubic-bezier(.4,0,.2,1) !important;
  white-space: nowrap !important;
  letter-spacing: .1px !important;
}
.app-sw-btn:hover:not(.active) {
  background: rgba(255,255,255,.055) !important;
  color: var(--text2) !important;
}
.app-sw-btn.active {
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.18) !important;
  border: none !important;
}
.app-sw-btn[data-sec="contenus"].active{background:linear-gradient(135deg,#5c7cfa,#4F6AE8)!important}
.app-sw-btn[data-sec="onboarding"].active{background:linear-gradient(135deg,#e03e3e,#c0392b)!important}
.app-sw-btn[data-sec="tech"].active{background:linear-gradient(135deg,#0fca7a,#0ea86a)!important}
.app-sw-btn[data-sec="procedures"].active{background:linear-gradient(135deg,#8b5cf6,#7c3aed)!important}
.app-sw-btn[data-sec="partenaires"].active{background:linear-gradient(135deg,#f5a23a,#d97706)!important}
body.light-mode .app-sw-btn:hover:not(.active){background:rgba(0,0,0,.04)!important}
.app-sw-ico { font-size: 13px !important; }
.app-sw-lbl { font-size: 11.5px !important; }

/* Date badge redesign */
.tb {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 9.5px !important;
  color: var(--text3) !important;
  background: rgba(255,255,255,.03) !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  letter-spacing: .3px !important;
}

/* Save indicator — minimal pill */
#saveI.si {
  font-size: 9.5px !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-weight: 700 !important;
  letter-spacing: .3px !important;
}
#saveI.ok {
  background: rgba(18,217,138,.08) !important;
  color: var(--green) !important;
  border: 1px solid rgba(18,217,138,.2) !important;
}
#saveI.no {
  background: rgba(255,176,58,.08) !important;
  color: var(--orange) !important;
  border: 1px solid rgba(255,176,58,.2) !important;
}

/* Header buttons redesign */
.hb {
  border-radius: 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .1px !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(255,255,255,.045) !important;
  color: var(--text2) !important;
}
.hb:hover {
  background: rgba(255,255,255,.075) !important;
  border-color: rgba(255,255,255,.11) !important;
  color: var(--text1) !important;
}
.hb.p {
  background: var(--accent) !important;
  border-color: rgba(92,124,250,.4) !important;
  box-shadow: 0 0 20px rgba(92,124,250,.25), inset 0 1px 0 rgba(255,255,255,.15) !important;
  color: #fff !important;
}
.hb.p:hover {
  background: var(--accent2) !important;
  box-shadow: 0 0 28px rgba(92,124,250,.35) !important;
}
.hb.g {
  background: rgba(18,217,138,.12) !important;
  border-color: rgba(18,217,138,.25) !important;
  color: var(--green) !important;
  box-shadow: 0 0 16px rgba(18,217,138,.1) !important;
}
.hb.g:hover {
  background: rgba(18,217,138,.18) !important;
  box-shadow: 0 0 24px rgba(18,217,138,.2) !important;
}
.hb.d {
  background: rgba(255,77,106,.08) !important;
  border-color: rgba(255,77,106,.18) !important;
  color: var(--red) !important;
}

/* Notif button */
.hb-notif {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--text2) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  transition: all .18s ease !important;
}
.hb-notif:hover { background: rgba(255,255,255,.07) !important; color: var(--text1) !important; border-color: rgba(255,255,255,.1) !important; }

/* Theme toggle */
.theme-toggle {
  width: 34px !important;
  height: 34px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  background: rgba(255,255,255,.04) !important;
  font-size: 14px !important;
}
.theme-toggle:hover { background: rgba(255,255,255,.07) !important; border-color: rgba(255,255,255,.1) !important; }

/* User avatar */
.cu-avatar {
  width: 30px !important;
  height: 30px !important;
  border-radius: 50% !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  border: 1.5px solid rgba(255,255,255,.1) !important;
}
.cu-name { font-size: 12px !important; font-weight: 700 !important; color: var(--text1) !important; }
.cu-role { font-size: 9px !important; letter-spacing: .4px !important; }
.cu-out {
  font-size: 10px !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  background: rgba(255,77,106,.08) !important;
  border: 1px solid rgba(255,77,106,.15) !important;
  color: var(--red) !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: all .15s !important;
}
.cu-out:hover { background: rgba(255,77,106,.15) !important; }

/* ── KPI CARDS — premium glass design ── */
.kc {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
  padding: 18px 20px !important;
  position: relative !important;
  overflow: hidden !important;
}
.kc::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.03) 0%, transparent 60%) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
.kc-l {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  color: var(--text3) !important;
  text-transform: uppercase !important;
  letter-spacing: .9px !important;
  margin-bottom: 8px !important;
}
.kc-v {
  font-size: 28px !important;
  font-weight: 800 !important;
  letter-spacing: -2px !important;
  line-height: 1 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.kc-s {
  font-size: 10px !important;
  color: var(--text3) !important;
  margin-top: 6px !important;
  letter-spacing: .1px !important;
}

/* ── TABLE — redesign ── */
.tw {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
  overflow: auto !important;
}
table { font-size: 11.5px !important; }
tr.ch th {
  background: rgba(255,255,255,.02) !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  color: var(--text3) !important;
  letter-spacing: .4px !important;
  padding: 9px 8px !important;
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
}
tbody tr { border-bottom: 1px solid rgba(255,255,255,.025) !important; }
tbody tr:hover { background: rgba(92,124,250,.05) !important; box-shadow: inset 3px 0 0 rgba(92,124,250,.4) !important; }

/* ── FILTER BAR ── */
.fb {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 12px !important;
}

/* ── ALERTS ── */
.ac {
  border-radius: 12px !important;
  border-left-width: 3px !important;
}
.ac.crit { background: rgba(255,77,106,.07) !important; border-color: var(--red) !important; }
.ac.warn { background: rgba(255,176,58,.07) !important; border-color: var(--orange) !important; }
.ac.info { background: rgba(92,124,250,.07) !important; border-color: var(--accent) !important; }

/* ── NAV TABS (header) ── */
.nav-tabs {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 12px !important;
  padding: 3px !important;
  gap: 2px !important;
}
.nav-tab {
  border-radius: 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: var(--text3) !important;
  padding: 6px 14px !important;
  letter-spacing: .1px !important;
}
.nav-tab.active {
  background: rgba(92,124,250,.14) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(92,124,250,.18) !important;
  box-shadow: 0 0 16px rgba(92,124,250,.1), inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* ── ONB TABS ── */
.onb-main-tabs {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 12px !important;
}
.onb-main-tab {
  border-radius: 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: .1px !important;
}
.onb-main-tab.active {
  background: rgba(92,124,250,.13) !important;
  color: var(--accent2) !important;
  border: 1px solid rgba(92,124,250,.18) !important;
  box-shadow: 0 0 14px rgba(92,124,250,.1) !important;
}
.onb-tabs {
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 12px !important;
}
.onb-tab {
  border-radius: 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.onb-tab.active {
  background: rgba(255,77,106,.1) !important;
  color: #ff6b84 !important;
  border: 1px solid rgba(255,77,106,.18) !important;
}

/* ── HERO CARDS (onboarding dashboard) ── */
.onb-hero-card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
}
.onb-hero-card::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(145deg, rgba(255,255,255,.03) 0%, transparent 70%) !important;
  pointer-events: none !important;
  border-radius: inherit !important;
}
.onb-hero-card .hc-label {
  font-size: 8.5px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
  margin-bottom: 8px !important;
}
.onb-hero-card .hc-val {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  line-height: 1 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.onb-hero-card .hc-sub {
  font-size: 10px !important;
  color: var(--text3) !important;
  margin-top: 8px !important;
  letter-spacing: .15px !important;
}
.onb-hero-card .hc-accent { height: 2px !important; border-radius: 2px !important; }

/* ── ARR CARD ── */
.onb-arr-card {
  background: linear-gradient(135deg, rgba(92,124,250,.10), rgba(159,114,255,.07)) !important;
  border: 1px solid rgba(92,124,250,.16) !important;
  border-radius: 16px !important;
}
.arr-val {
  font-size: 30px !important;
  font-weight: 800 !important;
  letter-spacing: -1.5px !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}

/* ── PANELS ── */
.onb-dash-panel {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
}
.onb-dp-h {
  border-bottom: 1px solid rgba(255,255,255,.045) !important;
  padding: 16px 20px !important;
}
.onb-dp-h h4 {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  color: var(--text1) !important;
}

/* ── DRAWER / MODALS — premium glass ── */
.onb-drawer {
  background: rgba(12,14,23,.95) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) !important;
}
.onb-drawer-h {
  background: rgba(255,255,255,.02) !important;
  border-bottom: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 20px 20px 0 0 !important;
  padding: 18px 24px !important;
}
.onb-drawer-h h3 { font-size: 14px !important; color: var(--text1) !important; }
.onb-fiche-m {
  background: rgba(12,14,23,.96) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.65) !important;
}
.efmod, .cmod, .clm, .scr-m, .adm-m {
  background: rgba(12,14,23,.96) !important;
  backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 20px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.65) !important;
}
.mbg, .efbg, .scr-bg, .rbg, .adm-bg, .cobg, .clbg, .ecbg, .scrbg, .onb-fiche-bg, .onb-drawer-bg {
  background: rgba(0,0,0,.75) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── CHECKBOXES ── */
.onb-check {
  width: 22px !important;
  height: 22px !important;
  border-radius: 7px !important;
  border: 1.5px solid rgba(255,255,255,.12) !important;
  font-size: 11px !important;
}
.onb-check.green {
  background: rgba(18,217,138,.15) !important;
  border-color: var(--green) !important;
  color: var(--green) !important;
  box-shadow: 0 0 12px rgba(18,217,138,.2) !important;
}
.onb-check.red {
  background: rgba(255,77,106,.15) !important;
  border-color: var(--red) !important;
  color: var(--red) !important;
}

/* ── INPUTS ── */
.efi, .efse, .finp, .fsel,
.onb-col-box input, .onb-col-box select,
.onb-brief-ta, .scr-b textarea, #clName,
.onb-client-search input, .cfs {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 9px !important;
  color: var(--text1) !important;
  font-family: 'Inter', system-ui, sans-serif !important;
}
.efi:focus, .efse:focus, .finp:focus,
.onb-col-box input:focus, .onb-col-box select:focus,
.onb-brief-ta:focus, .scr-b textarea:focus, #clName:focus,
.onb-client-search input:focus {
  border-color: rgba(92,124,250,.4) !important;
  box-shadow: 0 0 0 3px rgba(92,124,250,.09) !important;
  background: rgba(92,124,250,.04) !important;
}
.fsel:focus { border-color: rgba(92,124,250,.4) !important; box-shadow: 0 0 0 3px rgba(92,124,250,.09) !important; }

/* ── DROPDOWN MENU ── */
.ddm {
  background: rgba(12,14,23,.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 56px rgba(0,0,0,.55) !important;
}
.ddi {
  border-radius: 9px !important;
  font-size: 12px !important;
}
.ddi:hover { background: rgba(92,124,250,.1) !important; }
.ddi.act { background: var(--accent) !important; color: #fff !important; }

/* ── TOAST ── */
#tst {
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  border-radius: 12px !important;
  padding: 12px 20px !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  letter-spacing: .15px !important;
}

/* ── COMMAND PALETTE ── */
.cmd-box {
  background: rgba(10,12,20,.97) !important;
  backdrop-filter: blur(28px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.04) !important;
}
.cmd-input {
  font-size: 15px !important;
  padding: 18px 22px !important;
  color: var(--text1) !important;
}
.cmd-item { border-radius: 12px !important; }
.cmd-item:hover, .cmd-item.active {
  background: rgba(92,124,250,.1) !important;
}
.cmd-ico { border-radius: 10px !important; background: rgba(255,255,255,.05) !important; }

/* ── WORK PLAN ── */
.wpl-c {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
}
.wpl-ch.send { background: rgba(92,124,250,.08) !important; border-bottom: 1px solid rgba(92,124,250,.15) !important; }
.wpl-ch.recv { background: rgba(159,114,255,.08) !important; border-bottom: 1px solid rgba(159,114,255,.15) !important; }

/* ── CALENDAR DAYS ── */
.wd {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 14px !important;
}
.wd.today {
  border-color: rgba(92,124,250,.5) !important;
  box-shadow: 0 0 0 3px rgba(92,124,250,.1), 0 0 24px rgba(92,124,250,.1) !important;
}

/* ── ONBOARDING TABLE ── */
.onb-tw {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
}
.onb-tw tr.onb-ch th {
  background: rgba(255,255,255,.018) !important;
  color: var(--text3) !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
  font-size: 9.5px !important;
  letter-spacing: .5px !important;
}
.onb-tw tbody tr:hover { background: rgba(92,124,250,.05) !important; }

/* ── FICHE ITEMS ── */
.onb-fiche-item {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-radius: 10px !important;
}
.onb-fiche-item .ofl { color: var(--text3) !important; font-size: 8.5px !important; letter-spacing: .6px !important; }
.onb-fiche-item .ofv { color: var(--text1) !important; font-size: 13px !important; }

/* ── EQ CARDS (team) ── */
.eq-card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.058) !important;
  border-radius: 16px !important;
}
.eq-name { font-family: 'Inter', system-ui, sans-serif !important; font-size: 14px !important; }

/* ── SECTION TITLES ── */
.stit {
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: .9px !important;
  text-transform: uppercase !important;
  color: var(--text3) !important;
}
.efsep {
  font-size: 9.5px !important;
  letter-spacing: .8px !important;
  border-bottom: 1px solid rgba(255,255,255,.04) !important;
}

/* ── MOBILE NAV redesign ── */
#mobNav, #mobNavOnb, #mobNavTech {
  background: rgba(5,6,10,.92) !important;
  backdrop-filter: blur(28px) !important;
  border-top: 1px solid rgba(255,255,255,.055) !important;
  box-shadow: 0 -4px 40px rgba(0,0,0,.5) !important;
}

/* ── STATUS BADGES ── */
.st {
  border-radius: 7px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  padding: 2px 9px !important;
  letter-spacing: .2px !important;
}
.st-l, .st-v, .st-o { background: rgba(18,217,138,.1) !important; color: var(--green) !important; }
.st-nl, .st-nv, .st-n { background: rgba(255,77,106,.1) !important; color: var(--red) !important; }
.st-a, .st-ni { background: rgba(255,176,58,.1) !important; color: var(--orange) !important; }
.st-np { background: rgba(255,255,255,.05) !important; color: var(--text3) !important; }

/* ── PROGRESS BARS ── */
.pbt { background: rgba(255,255,255,.04) !important; border-radius: 4px !important; height: 5px !important; }
.onb-rank-bar { background: rgba(255,255,255,.04) !important; }
.hc-bar { background: rgba(255,255,255,.04) !important; height: 3px !important; border-radius: 2px !important; margin-top: 12px !important; }
.eq-bar { background: rgba(255,255,255,.04) !important; height: 5px !important; }
.ip-bar { background: rgba(255,255,255,.04) !important; }

/* ── GEO CHIPS ── */
.onb-geo-chip {
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.065) !important;
  border-radius: 12px !important;
}

/* ── PIE LEGEND ── */
.onb-pie-leg-dot { border-radius: 4px !important; }
.onb-pie-leg-item { font-size: 11.5px !important; color: var(--text2) !important; }

/* ── RANK ITEMS ── */
.onb-rank-name { font-weight: 700 !important; font-size: 12.5px !important; color: var(--text1) !important; }
.onb-rank-val { font-family: 'Inter', system-ui, sans-serif !important; font-size: 14px !important; font-weight: 800 !important; }

/* ── SEPARATOR HR ── */
.hr-sep {
  width: 1px !important;
  height: 22px !important;
  background: rgba(255,255,255,.07) !important;
  margin: 0 6px !important;
  border: none !important;
  flex-shrink: 0 !important;
  align-self: center !important;
}

/* ── IP CARDS (contenus en prod) ── */
.ip-card {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 14px !important;
}
.ip-bar-fill { background: linear-gradient(90deg, var(--accent), var(--purple)) !important; }

/* ── DONE ROWS ── */
.done-row {
  background: var(--card) !important;
  border: 1px solid rgba(255,255,255,.05) !important;
  border-radius: 12px !important;
}
.done-row:hover { background: rgba(18,217,138,.04) !important; border-color: rgba(18,217,138,.18) !important; }

/* ── CDP TAG ── */
.onb-cdp-tag {
  background: rgba(159,114,255,.1) !important;
  color: var(--purple) !important;
  border: 1px solid rgba(159,114,255,.18) !important;
  border-radius: 6px !important;
}

/* ── NOTIF BADGE ── */
.notif-badge {
  background: var(--red) !important;
  box-shadow: 0 0 8px rgba(255,77,106,.4) !important;
}

/* ── MONTANT ── */
.onb-montant-cur {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  color: var(--text2) !important;
  border-radius: 5px 0 0 5px !important;
  font-size: 9.5px !important;
}
.onb-montant-val {
  background: rgba(255,255,255,.025) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  border-left: 0 !important;
  color: var(--text1) !important;
  font-size: 11px !important;
  border-radius: 0 5px 5px 0 !important;
}

/* ── FACT % PANEL ── */
#factPctPanel {
  background: rgba(12,14,23,.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 56px rgba(0,0,0,.5) !important;
}

/* ── ADDSUPPORT DATE PICKER ── */
.dpo {
  background: rgba(12,14,23,.98) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 14px !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5) !important;
}
.dpb.ok { background: var(--accent) !important; color: #fff !important; border: none !important; }
.dpb.cl { background: rgba(255,77,106,.12) !important; color: var(--red) !important; border: none !important; }
.dpb.ca { background: rgba(255,255,255,.05) !important; color: var(--text2) !important; border: none !important; }

/* ── ADMIN MODAL TABS ── */
.adm-tab {
  border-radius: 9px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}
.adm-tab.active {
  background: rgba(92,124,250,.1) !important;
  color: var(--accent2) !important;
}

/* ── BODY LIGHT MODE — clean ── */
body.light-mode::before, body.light-mode::after { display: none; }
body.light-mode .sidebar {
  background: rgba(255,255,255,.9) !important;
  backdrop-filter: blur(20px) !important;
}
body.light-mode .onb-drawer,
body.light-mode .onb-fiche-m,
body.light-mode .efmod,
body.light-mode .cmod,
body.light-mode .clm,
body.light-mode .scr-m,
body.light-mode .adm-m {
  background: rgba(248,249,252,.98) !important;
  backdrop-filter: blur(20px) !important;
  border-color: rgba(0,0,0,.09) !important;
}
body.light-mode .ddm { background: rgba(255,255,255,.99) !important; border-color: rgba(0,0,0,.09) !important; }
/* ── Light mode modals : header, labels, footer ── */
body.light-mode .efh {
  background: #f0f2f7 !important;
  border-bottom-color: rgba(0,0,0,.08) !important;
}
body.light-mode .efh h3 { color: #1a1d2e !important; }
body.light-mode .efl { color: #5c6480 !important; }
body.light-mode .eff { color: #1a1d2e; }
body.light-mode .efa {
  background: #f0f2f7 !important;
  border-top-color: rgba(0,0,0,.08) !important;
}
body.light-mode .efmod input.efi,
body.light-mode .efmod textarea.efi,
body.light-mode .efmod select.efse {
  background: #fff !important;
  border-color: rgba(0,0,0,.15) !important;
  color: #1a1d2e !important;
  color-scheme: light;
}
body.light-mode .efmod input.efi:focus,
body.light-mode .efmod textarea.efi:focus,
body.light-mode .efmod select.efse:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(92,124,250,.12) !important;
}
body.light-mode .efmod input.efi::placeholder,
body.light-mode .efmod textarea.efi::placeholder { color: #9da3bc !important; }
body.light-mode .onb-hero-card,
body.light-mode .kc,
body.light-mode .onb-dash-panel,
body.light-mode .wpl-c,
body.light-mode .wd,
body.light-mode .onb-tw,
body.light-mode .tw {
  background: #fff !important;
  border-color: rgba(0,0,0,.07) !important;
}
body.light-mode .hb {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.09) !important;
  color: var(--text2) !important;
}
body.light-mode .hb:hover { background: rgba(0,0,0,.07) !important; }
body.light-mode .nav-tab.active, body.light-mode .onb-main-tab.active {
  background: rgba(92,124,250,.1) !important;
  border-color: rgba(92,124,250,.2) !important;
}


/* ═══════════════════════════════
   DELIVR AI ASSISTANT — Chatbot
   ═══════════════════════════════ */
#aiBtn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, #5C7CFA, #9F72FF);
  border: none;
  cursor: pointer;
  z-index: 1800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 24px rgba(92,124,250,.45), 0 1px 0 rgba(255,255,255,.15) inset;
  transition: all .22s cubic-bezier(.34,1.4,.64,1);
}
#aiBtn:hover { transform: scale(1.08) translateY(-2px); box-shadow: 0 8px 32px rgba(92,124,250,.55); }
#aiBtn:active { transform: scale(.95); }
#aiBtn svg { width: 24px; height: 24px; color: #fff; }
#aiBtn .ai-badge {
  position: absolute;
  top: -4px; right: -4px;
  width: 14px; height: 14px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid var(--bg);
  animation: ai-pulse 2s ease-in-out infinite;
}
@keyframes ai-pulse { 0%,100%{box-shadow:0 0 0 0 rgba(18,217,138,.4)} 50%{box-shadow:0 0 0 5px rgba(18,217,138,0)} }

/* Panel */
#aiPanel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 380px;
  max-height: 580px;
  background: rgba(10,12,20,.97);
  backdrop-filter: blur(28px) saturate(140%);
  -webkit-backdrop-filter: blur(28px) saturate(140%);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.05) inset;
  z-index: 1800;
  display: none;
  flex-direction: column;
  overflow: hidden;
  animation: ai-panel-in .25s cubic-bezier(.34,1.2,.64,1) both;
}
@keyframes ai-panel-in { from{opacity:0;transform:translateY(16px) scale(.96)} to{opacity:1;transform:none} }
#aiPanel.open { display: flex; }

/* Header */
.ai-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.055);
  background: linear-gradient(135deg, rgba(92,124,250,.08), rgba(159,114,255,.05));
  flex-shrink: 0;
}
.ai-head-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, #5C7CFA, #9F72FF);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 16px rgba(92,124,250,.35);
  flex-shrink: 0;
}
.ai-head-icon svg { width: 18px; height: 18px; color: #fff; }
.ai-head-info { flex: 1; min-width: 0; }
.ai-head-name { font-size: 13px; font-weight: 700; color: var(--text1); letter-spacing: -.2px; }
.ai-head-status { font-size: 10px; color: var(--green); font-weight: 600; display: flex; align-items: center; gap: 4px; }
.ai-head-status::before { content:''; width:6px;height:6px;border-radius:50%;background:var(--green);display:inline-block; }
.ai-close {
  width: 28px; height: 28px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.04);
  color: var(--text3);
  cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
  flex-shrink: 0;
}
.ai-close:hover { background: rgba(255,77,106,.12); color: var(--red); border-color: rgba(255,77,106,.2); }

/* Messages */
.ai-msgs {
  flex: 1;
  overflow-y: auto;
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.08) transparent;
}
.ai-msgs::-webkit-scrollbar { width: 3px; }
.ai-msgs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.1); border-radius: 2px; }

.ai-msg { display: flex; gap: 8px; align-items: flex-end; animation: ux-fade-up .2s ease both; }
.ai-msg.user { flex-direction: row-reverse; }

.ai-bubble {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text1);
}
.ai-msg.bot .ai-bubble {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.07);
  border-bottom-left-radius: 4px;
}
.ai-msg.user .ai-bubble {
  background: linear-gradient(135deg, rgba(92,124,250,.22), rgba(159,114,255,.15));
  border: 1px solid rgba(92,124,250,.25);
  border-bottom-right-radius: 4px;
  color: #d4dcff;
}
.ai-avatar {
  width: 26px; height: 26px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-size: 12px;
}
.ai-msg.bot .ai-avatar { background: linear-gradient(135deg,#5C7CFA,#9F72FF); }
.ai-msg.user .ai-avatar { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); color: var(--text2); }

/* Typing indicator */
.ai-typing { display: flex; gap: 4px; align-items: center; padding: 10px 14px; }
.ai-typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: rgba(92,124,250,.6);
  animation: ai-dot 1.2s ease-in-out infinite;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-dot { 0%,60%,100%{transform:translateY(0);opacity:.4} 30%{transform:translateY(-5px);opacity:1} }

/* Quick prompts */
.ai-quick {
  padding: 0 14px 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  flex-shrink: 0;
}
.ai-chip {
  padding: 5px 10px;
  border-radius: 20px;
  background: rgba(92,124,250,.08);
  border: 1px solid rgba(92,124,250,.15);
  color: var(--accent2);
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.ai-chip:hover { background: rgba(92,124,250,.15); border-color: rgba(92,124,250,.3); }

/* Input */
.ai-input-row {
  padding: 12px 14px;
  border-top: 1px solid rgba(255,255,255,.055);
  display: flex;
  gap: 8px;
  align-items: flex-end;
  flex-shrink: 0;
  background: rgba(255,255,255,.015);
}
#aiInput {
  flex: 1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: var(--text1);
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  padding: 9px 13px;
  resize: none;
  outline: none;
  min-height: 38px;
  max-height: 100px;
  line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
#aiInput:focus { border-color: rgba(92,124,250,.4); box-shadow: 0 0 0 3px rgba(92,124,250,.08); }
#aiInput::placeholder { color: var(--text3); }
#aiSend {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: linear-gradient(135deg, #5C7CFA, #9F72FF);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .18s cubic-bezier(.34,1.4,.64,1);
  box-shadow: 0 2px 12px rgba(92,124,250,.35);
}
#aiSend:hover { transform: scale(1.06); box-shadow: 0 4px 18px rgba(92,124,250,.5); }
#aiSend:active { transform: scale(.93); }
#aiSend svg { width: 16px; height: 16px; color: #fff; }
#aiSend:disabled { opacity: .4; transform: none; cursor: not-allowed; }

@media(max-width:768px) {
  #aiPanel { right:12px; left:12px; width:auto; bottom:76px; max-height:70vh; }
  #aiBtn { bottom:76px; right:16px; }
}
body.light-mode #aiPanel {
  background: rgba(250,251,255,.97);
  border-color: rgba(0,0,0,.08);
}
body.light-mode .ai-msg.bot .ai-bubble { background: rgba(0,0,0,.04); border-color: rgba(0,0,0,.07); color: #1a1d2e; }
body.light-mode .ai-msg.user .ai-bubble { color: #2a3580; }


/* ── TASK BUBBLES ── */
#taskBubbleWrap{
  position:fixed;top:62px;right:14px;
  z-index:9999;
  width:300px;
  max-height:calc(100vh - 80px);
  display:flex;flex-direction:column;gap:0;
  pointer-events:all;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,.6);
}
#tbbl-header{
  background:var(--card2,#10121E);
  border-bottom:1px solid rgba(255,255,255,.08);
  padding:8px 12px;
  display:flex;align-items:center;justify-content:space-between;
  flex-shrink:0;
  cursor:default;
}
#tbbl-header-title{font-size:11px;font-weight:700;color:var(--text3,#888);text-transform:uppercase;letter-spacing:.06em;}
#tbbl-header-count{font-size:11px;font-weight:700;color:var(--accent,#5C7CFA);background:rgba(92,124,250,.15);padding:2px 7px;border-radius:20px;}
#tbbl-close-all{background:none;border:none;color:var(--text3,#888);font-size:11px;font-weight:600;cursor:pointer;font-family:inherit;padding:3px 8px;border-radius:6px;transition:background .15s,color .15s;}
#tbbl-close-all:hover{background:rgba(255,77,106,.12);color:var(--red,#FF4D6A);}
#tbbl-scroll{
  overflow-y:auto;
  flex:1;
  -webkit-overflow-scrolling:touch;
}
#tbbl-scroll::-webkit-scrollbar{width:3px;}
#tbbl-scroll::-webkit-scrollbar-track{background:transparent;}
#tbbl-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:3px;}
.tbbl{
  background:var(--card,#0C0E17);
  border-bottom:1px solid rgba(255,255,255,.06);
  padding:10px 12px;
  position:relative;
  animation:tbbl-in .2s ease both;
}
.tbbl:last-child{border-bottom:none;}
.tbbl-stripe{position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,#5C7CFA);border-radius:0;}
.tbbl-stripe.urgent{background:var(--red,#FF4D6A);}
@keyframes tbbl-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.tbbl-hd{display:flex;align-items:flex-start;gap:8px;margin-bottom:4px;padding-left:8px;}
.tbbl-title{font-weight:600;font-size:12px;color:var(--text1,#fff);flex:1;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tbbl-by{font-size:10px;color:var(--text3,#888);padding-left:8px;margin-bottom:4px;}
.tbbl-ech{font-size:10px;font-weight:600;padding-left:8px;margin-bottom:6px;}
.tbbl-act{display:flex;gap:6px;justify-content:flex-end;padding-left:8px;}
.tbbl-ok{background:var(--accent,#5C7CFA);color:#fff;border:none;border-radius:6px;padding:4px 10px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;white-space:nowrap;}
.tbbl-ok:hover{opacity:.8;}
.tbbl-del{background:none;border:none;color:var(--text3,#888);font-size:13px;cursor:pointer;padding:2px 4px;border-radius:4px;line-height:1;flex-shrink:0;transition:color .15s,background .15s;}
.tbbl-del:hover{color:var(--red,#FF4D6A);background:rgba(255,77,106,.1);}
@media(max-width:600px){#taskBubbleWrap{top:auto;bottom:60px;right:8px;left:8px;width:auto;max-height:50vh;}}

/* ── TOUR DE CONTRÔLE ── */
/* ══════════════════════════════════════════════
   TOUR DE CONTRÔLE v2 — Refonte 2026-05-11
   Blocs côte-à-côte, liseré coloré, tuiles compactes
   ══════════════════════════════════════════════ */
.tdc-screen{display:none;position:fixed;inset:0;z-index:9998;background:var(--bg);overflow-y:auto}
.tdc-inner{max-width:1280px;margin:0 auto;padding:48px 28px 40px}
.tdc-head{text-align:center;margin-bottom:36px}
.tdc-logo{font-size:26px;font-weight:900;letter-spacing:-1px;margin-bottom:4px;color:var(--text1)}
.tdc-logo .aw{color:var(--text1)}.tdc-logo .red{color:#e03e3e}
.tdc-sub{font-size:12px;color:var(--text3);font-weight:500}
.tdc-welcome{font-size:18px;font-weight:700;color:var(--text1);margin-top:16px}
.tdc-role{display:inline-block;font-size:11px;font-weight:700;padding:4px 12px;border-radius:20px;background:var(--accent-soft);color:var(--accent);margin-top:8px}
.tdc-foot{text-align:center;margin-top:24px}
.tdc-foot button{background:none;border:none;color:var(--text3);font-size:11px;cursor:pointer;text-decoration:underline;font-family:inherit}
.tdc-foot button:hover{color:var(--text1)}

/* ══════════════════════════════════════════════
   DASHBOARD SUB-TABS & COMPACT LAYOUT
   ══════════════════════════════════════════════ */
.dash-subtabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.035);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 12px;
  width: fit-content;
}
.dash-subtab {
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: inherit;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  position: relative;
}
.dash-subtab .nt-ico { font-size: 12px; }
.dash-subtab:hover { color: var(--text2); background: rgba(255,255,255,.04); }
.dash-subtab.active {
  background: var(--accent-soft);
  color: var(--accent);
  box-shadow: 0 1px 4px rgba(92,124,250,.15);
}
body.light-mode .dash-subtab.active { background: rgba(59,91,219,.1); color: #3b5bdb; }
body.light-mode .dash-subtabs { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
.dash-subtab-badge {
  font-size: 9px;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--red);
  color: #fff;
  padding: 0 4px;
  line-height: 1;
}
.dash-subtab-badge:empty { display: none; }
.dash-sub { display: none; }
.dash-sub.active { display: block; }

/* ── Compact KPI cards ── */
#v-dashboard .kpi-sec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  margin-bottom: 6px;
}
#v-dashboard .kc {
  padding: 10px 12px;
  border-radius: 10px;
}
#v-dashboard .kc-l {
  font-size: 8.5px;
  letter-spacing: .6px;
  margin-bottom: 3px;
}
#v-dashboard .kc-v {
  font-size: 20px;
  letter-spacing: -1px;
}
#v-dashboard .kc-v small { font-size: 11px; }
#v-dashboard .kc-s { font-size: 9px; margin-top: 2px; }
#v-dashboard .kc-who { font-size: 8px; margin-top: 3px; padding: 1px 5px; }

/* ── KPI section titles — compact ── */
#v-dashboard .kpi-sec-title {
  font-size: 11px !important;
  padding: 2px 0 6px !important;
}

/* ── Dash split: InProg + Done side by side ── */
.dash-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 10px;
}
.dash-split-col {
  min-width: 0;
  max-height: calc(100vh - 320px);
  overflow-y: auto;
}
/* Make inprog cards smaller inside split */
.dash-split .inprog-grid {
  grid-template-columns: 1fr !important;
  gap: 6px !important;
  margin-bottom: 8px;
}
.dash-split .ip-card { padding: 10px 12px; border-radius: 10px; }
.dash-split .ip-name { font-size: 11px; }
.dash-split .ip-fam { font-size: 8px; margin-bottom: 5px; }
.dash-split .ip-step { font-size: 8px; padding: 1px 4px; }
.dash-split .done-list { margin-bottom: 8px; gap: 3px; }
.dash-split .done-row { padding: 6px 10px; border-radius: 8px; }
.dash-split .done-row .dr-name { font-size: 11px; }
.dash-split .done-row .dr-fam { font-size: 9px; }
.dash-split .stit { font-size: 11px !important; margin-bottom: 8px !important; }

/* ── Alertes tab — full height ── */
#dsub-alertes .als { margin-bottom: 14px; }
#dsub-alertes .ag { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; }

/* ── Responsive ── */
@media(max-width:900px) {
  .dash-split { grid-template-columns: 1fr; }
  .dash-split-col { max-height: none; }
}
@media(max-width:600px) {
  .dash-subtabs { width: 100%; overflow-x: auto; }
  .dash-subtab { font-size: 10px; padding: 4px 10px; }
  .dash-split { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════
   ONBOARDING DASHBOARD — COMPACT + SUB-TABS
   ══════════════════════════════════════════════ */
.onb-dash-subtabs {
  display: flex;
  gap: 2px;
  background: rgba(255,255,255,.035);
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--border);
  margin-bottom: 10px;
  width: fit-content;
}
.onb-dash-subtab {
  padding: 5px 12px;
  border-radius: 7px;
  font-size: 10.5px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  background: none;
  color: var(--text3);
  font-family: inherit;
  transition: all .2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.onb-dash-subtab:hover { color: var(--text2); background: rgba(255,255,255,.04); }
.onb-dash-subtab.active {
  background: rgba(224,62,62,.12);
  color: #e03e3e;
  box-shadow: 0 1px 4px rgba(224,62,62,.12);
}
body.light-mode .onb-dash-subtab.active { background: rgba(224,62,62,.08); }
body.light-mode .onb-dash-subtabs { background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.08); }
.onb-dash-subtab-badge {
  font-size: 9px; font-weight: 800; min-width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--red); color: #fff; padding: 0 4px; line-height: 1;
}
.onb-dash-subtab-badge:empty { display: none; }
.onb-dsub { display: none; }
.onb-dsub.active { display: block; }

/* ── Compact hero cards for onboarding ── */
#onbDashboard .onb-hero-card {
  padding: 10px 12px;
  border-radius: 10px;
}
#onbDashboard .onb-hero-card .hc-label {
  font-size: 8px;
  letter-spacing: .5px;
  margin-bottom: 3px;
}
#onbDashboard .onb-hero-card .hc-val {
  font-size: 18px;
  letter-spacing: -1px;
}
#onbDashboard .onb-hero-card .hc-sub {
  font-size: 9px;
  margin-top: 3px;
}
#onbDashboard .onb-hero-card .hc-bar { margin-top: 6px; }
#onbDashboard .onb-dash-hero {
  gap: 8px;
  margin-bottom: 12px;
}
#onbDashboard .onb-kpi-section { margin-bottom: 12px; }
#onbDashboard .onb-kpi-section-title { font-size: 10px !important; padding: 3px 0 !important; }
#onbDashboard .onb-section-body { padding-top: 4px; }
#onbDashboard .onb-dash-row { gap: 10px; margin-bottom: 10px; }
#onbDashboard .onb-dash-panel { border-radius: 10px; }
#onbDashboard .onb-dp-h h4 { font-size: 11px; }
#onbDashboard .onb-arr-card { margin: 8px 0 !important; padding: 12px 16px; }
#onbDashboard .arr-val { font-size: 22px; }
#onbDashboard .onb-rank-item { padding: 4px 8px; }
@media(max-width:600px) {
  .onb-dash-subtabs { width: 100%; overflow-x: auto; }
  .onb-dash-subtab { font-size: 9px; padding: 4px 8px; }
}

/* ── Year navigation ── */
.onb-yr-nav {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px;
  margin-bottom: 12px;
}
.onb-yr-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text3);
  font-size: 11px;
  cursor: pointer;
  border-radius: 8px;
  transition: all .15s;
  font-family: inherit;
}
.onb-yr-arrow:hover {
  background: var(--accent-soft);
  color: var(--accent);
}
.onb-yr-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--accent-soft);
  color: var(--accent);
  border: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 800;
  padding: 5px 28px 5px 14px;
  border-radius: 8px;
  cursor: pointer;
  outline: none;
  text-align: center;
  min-width: 80px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235C7CFA'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  transition: all .15s;
}
.onb-yr-select:hover {
  background-color: rgba(92,124,250,.18);
}
.onb-yr-select option {
  background: var(--card);
  color: var(--text);
  font-size: 13px;
  padding: 6px 10px;
}
body.light-mode .onb-yr-nav { background: #fff; border-color: rgba(0,0,0,.08); }
body.light-mode .onb-yr-arrow:hover { background: rgba(59,91,219,.08); color: #3b5bdb; }
body.light-mode .onb-yr-select { background-color: rgba(59,91,219,.08); color: #3b5bdb; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%233b5bdb'/%3E%3C/svg%3E"); }
body.light-mode .onb-yr-select option { background: #fff; color: #1a1a2e; }

/* ═══ PERFORMANCE v5 — RPG ADVENTURE THEME ═══ */
.perf-wrap{display:flex;gap:0;min-height:calc(100vh - 120px)}
.perf-side{width:220px;flex-shrink:0;border-right:1px solid var(--border);padding:0;background:var(--card);overflow-y:auto}
.perf-main{flex:1;padding:24px;overflow-y:auto}

/* Sidebar profile */
.perf-profile-card{padding:16px;border-bottom:1px solid var(--border)}
.perf-profile-card .perf-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:14px;flex-shrink:0;overflow:hidden;cursor:pointer;position:relative}
.perf-profile-card .perf-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.perf-profile-card .perf-lvl-badge{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;background:var(--green);border-radius:50%;border:2px solid var(--card);font-size:7px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800}
.perf-xp-bar{height:4px;background:var(--bg);border-radius:2px;overflow:hidden;margin-top:10px}
.perf-xp-bar-fill{height:100%;border-radius:2px;transition:width .6s ease}

/* Sidebar nav */
.perf-nav{padding:8px}
.perf-nav-section{font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;padding:14px 12px 6px}
.perf-nav-btn{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;cursor:pointer;border:none;background:none;color:var(--text2);font-family:inherit;width:100%;text-align:left;transition:all .2s}
.perf-nav-btn:hover{background:var(--bg2);color:var(--text1)}
.perf-nav-btn.active{background:var(--accent-soft);color:var(--accent)}
.perf-nav-btn .perf-nav-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.perf-nav-btn .perf-nav-ico{font-size:14px;width:20px;text-align:center}

/* Family colors */
.perf-fam-contenus{--fam:#7c5cf6;--fam-bg:rgba(124,92,246,.08);--fam-border:rgba(124,92,246,.2)}
.perf-fam-onboarding{--fam:#e85d30;--fam-bg:rgba(232,93,48,.08);--fam-border:rgba(232,93,48,.2)}
.perf-fam-support{--fam:#0fca7a;--fam-bg:rgba(15,202,122,.08);--fam-border:rgba(15,202,122,.2)}
.perf-fam-tasks{--fam:#3b82f6;--fam-bg:rgba(59,130,246,.08);--fam-border:rgba(59,130,246,.2)}

/* Skill tree */
.perf-tree{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:20px;margin-bottom:20px}
.perf-tree svg text{font-family:inherit}

/* Leaderboard radar cards */
.perf-lb-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:24px}
.perf-lb-card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px;cursor:pointer;transition:border-color .2s,transform .15s}
.perf-lb-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.perf-lb-card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.perf-lb-card-rank{font-size:18px;font-weight:800;min-width:24px;font-family:JetBrains Mono,monospace}
.perf-lb-card-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:var(--text2)}
.perf-lb-card-avatar img{width:100%;height:100%;object-fit:cover}
.perf-lb-card-name{font-size:13px;font-weight:700;color:var(--text1)}
.perf-lb-card-xp{font-size:10px;color:var(--text3);font-family:JetBrains Mono,monospace}
.perf-lb-card-trophies{display:flex;gap:3px;justify-content:center;margin-top:8px;font-size:12px}

/* Objective cards */
.perf-obj-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px;margin-bottom:20px}
.perf-obj-card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px;position:relative;transition:border-color .2s}
.perf-obj-card:hover{border-color:var(--accent)}
.perf-obj-card .perf-obj-accent{position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0}
.perf-obj-card-title{font-size:12px;font-weight:700;color:var(--text1);margin-bottom:2px}
.perf-obj-card-meta{font-size:9px;color:var(--text3);margin-bottom:6px}
.perf-obj-bar{height:4px;background:var(--bg);border-radius:2px;overflow:hidden;margin:6px 0}
.perf-obj-bar-fill{height:100%;border-radius:2px;transition:width .4s ease}
.perf-obj-card-stats{display:flex;justify-content:space-between;font-size:10px}
.perf-obj-card-add{border:1px dashed var(--border);border-radius:10px;padding:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text3);font-size:12px;transition:border-color .2s}
.perf-obj-card-add:hover{border-color:var(--accent);color:var(--accent)}

/* Trophy shelf */
.perf-trophy-shelf{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.perf-trophy-item{width:56px;text-align:center;cursor:pointer;transition:transform .15s}
.perf-trophy-item:hover{transform:scale(1.1)}
.perf-trophy-item.locked{opacity:.3;filter:grayscale(.7)}
.perf-trophy-item .perf-trophy-emoji{font-size:24px;display:block;margin-bottom:2px}
.perf-trophy-item .perf-trophy-label{font-size:8px;font-weight:700;color:var(--text3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Quarter nav */
.perf-q-nav{display:flex;align-items:center;gap:8px}
.perf-q-nav button{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;cursor:pointer;font-family:inherit;font-size:11px;font-weight:600;color:var(--text2)}
.perf-q-nav button:hover{border-color:var(--accent);color:var(--accent)}
.perf-q-nav .perf-q-current{padding:5px 16px;font-family:JetBrains Mono,monospace;font-size:13px;font-weight:800;color:#ffd700;background:rgba(255,215,0,.08);border-radius:8px}

/* Celebration overlay */
.perf-celeb-v5{position:fixed;top:0;left:0;right:0;bottom:0;z-index:99999;pointer-events:none;display:none;align-items:center;justify-content:center}
.perf-celeb-v5.active{display:flex}
.perf-celeb-v5 .perf-celeb-card{background:var(--card);border:2px solid #ffd700;border-radius:16px;padding:32px 48px;text-align:center;animation:perfCelebPop .5s ease;pointer-events:auto;box-shadow:0 0 60px rgba(255,215,0,.3)}
@keyframes perfCelebPop{0%{transform:scale(.5);opacity:0}60%{transform:scale(1.05)}100%{transform:scale(1);opacity:1}}
@keyframes perfCelebGlow{0%,100%{box-shadow:0 0 20px rgba(255,215,0,.2)}50%{box-shadow:0 0 40px rgba(255,215,0,.5)}}
.perf-celeb-v5 .perf-celeb-card.glow{animation:perfCelebPop .5s ease,perfCelebGlow 1.5s ease infinite}
.perf-celeb-particle{position:absolute;border-radius:50%;animation:perfConfetti 1.5s ease forwards}
@keyframes perfConfetti{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(400px) rotate(720deg);opacity:0}}

/* Feed */
.perf-feed-v5{max-height:300px;overflow-y:auto}
.perf-feed-item-v5{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:11px}
.perf-feed-item-v5:last-child{border:none}

/* Mobile responsive */
@media(max-width:768px){
  .perf-wrap{flex-direction:column}
  .perf-side{width:100%;border-right:none;border-bottom:1px solid var(--border);max-height:none;padding-bottom:8px}
  .perf-main{padding:16px}
  .perf-obj-grid{grid-template-columns:1fr}
  .perf-lb-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .perf-lb-grid{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════════
   DEMOS MODULE — Comptes Démo SENSIPRO
   Teinte primaire : cyan #06b6d4
   ═══════════════════════════════════════════════════════════════ */

/* Active state top-level switcher */
.app-sw-btn[data-sec="demos"].active{
  background:linear-gradient(135deg,#06b6d4,#0891b2)!important
}

/* Badge sur le bouton switcher (nb démos expirant) */
.demo-hdr-badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:16px;height:16px;padding:0 5px;margin-left:6px;
  background:#f5a23a;color:#fff;font-size:9px;font-weight:800;
  border-radius:10px;line-height:1;
  box-shadow:0 2px 6px rgba(245,162,58,.4)
}

/* Section body */
#demosSection{padding:0;font-family:'Inter',system-ui,sans-serif}
#demosSection .stit{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:-.3px;font-size:16px;color:var(--text1)}

/* KPI cards */
.demo-kpi{
  background:var(--card);border:1px solid var(--border);border-radius:12px;
  padding:14px;display:flex;flex-direction:column;gap:4px;position:relative;overflow:hidden;
  transition:all .2s cubic-bezier(.4,0,.2,1)
}
.demo-kpi[onclick]:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.08);border-color:#06b6d4}
.demo-kpi-ico{
  position:absolute;top:10px;right:10px;width:28px;height:28px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:14px
}
.demo-kpi-v{font-size:24px;font-weight:800;line-height:1;margin-top:6px;font-variant-numeric:tabular-nums}
.demo-kpi-l{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);font-weight:700}
.demo-kpi-s{font-size:10px;color:var(--text3);margin-top:2px}

/* Panels */
.demo-panel{
  background:var(--card);border:1px solid var(--border);border-radius:12px;overflow:hidden
}
.demo-panel-h{
  padding:12px 14px;font-size:12px;font-weight:700;color:var(--text1);
  border-bottom:1px solid var(--border);background:var(--gray-bg);
  display:flex;align-items:center;gap:8px
}
.demo-panel-b{padding:10px;display:flex;flex-direction:column;gap:4px}
.demo-badge{
  margin-left:auto;font-size:10px;font-weight:800;padding:2px 8px;border-radius:10px;
  background:rgba(6,182,212,.12);color:#06b6d4
}
.demo-empty{padding:18px;text-align:center;color:var(--text3);font-size:12px}

/* Alert rows */
.demo-alert-row{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  cursor:pointer;transition:background .15s
}
.demo-alert-row:hover{background:var(--gray-bg)}
.demo-alert-ico{
  width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-size:16px;flex-shrink:0
}
.demo-alert-t{font-size:12px;font-weight:700;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-alert-s{font-size:10px;color:var(--text3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-alert-dl{font-size:11px;font-weight:700;flex-shrink:0}

/* Module bars */
.demo-mod-row{
  display:grid;grid-template-columns:130px 1fr 32px;gap:10px;align-items:center;
  padding:5px 0;font-size:11px
}
.demo-mod-lbl{color:var(--text2);font-weight:600;display:flex;align-items:center;gap:6px}
.demo-mod-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.demo-mod-bar-wrap{background:var(--gray-bg);height:6px;border-radius:3px;overflow:hidden}
.demo-mod-bar{height:100%;border-radius:3px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.demo-mod-val{font-weight:700;color:var(--text1);text-align:right;font-variant-numeric:tabular-nums}

/* Status pill */
.demo-status-pill{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:10px;
  font-size:10px;font-weight:700;white-space:nowrap
}

/* Module badge (short) */
.demo-mod-badge{
  display:inline-block;padding:2px 6px;border-radius:6px;font-size:9px;font-weight:700;
  letter-spacing:.02em
}

/* Sector chip */
.demo-sec-chip{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:8px;
  background:var(--gray-bg);font-size:10px;color:var(--text2);font-weight:600
}

/* Table */
.demo-table-wrap{
  border:1px solid var(--border);border-radius:12px;overflow:auto;background:var(--card);
  max-height:calc(100vh - 260px)
}
.demo-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}
.demo-table thead th{
  background:var(--gray-bg);position:sticky;top:0;z-index:2;
  text-align:left;padding:10px 12px;font-size:10px;font-weight:700;
  text-transform:uppercase;letter-spacing:.05em;color:var(--text3);
  border-bottom:1px solid var(--border)
}
.demo-table tbody tr{transition:background .12s}
.demo-table tbody tr:hover{background:rgba(6,182,212,.04)}
.demo-table tbody td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle}
.demo-cl-name{font-weight:700;color:var(--text1);font-size:12px}
.demo-cl-sub{font-size:10px;color:var(--text3);margin-top:1px}

/* Origin row (analytics) */
.demo-origin-row{
  display:flex;align-items:center;gap:10px;padding:8px;border-radius:8px;
  transition:background .12s
}
.demo-origin-row:hover{background:var(--gray-bg)}

/* ═══ MODAL ═══ */
.demo-modal-bg{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:10000;
  align-items:center;justify-content:center;padding:20px;backdrop-filter:blur(4px)
}
.demo-modal-bg.open{display:flex;animation:demoFadeIn .18s ease}
@keyframes demoFadeIn{from{opacity:0}to{opacity:1}}
.demo-modal-content{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  width:100%;max-width:760px;max-height:92vh;display:flex;flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.4);animation:demoSlideUp .22s cubic-bezier(.4,0,.2,1)
}
@keyframes demoSlideUp{from{transform:translateY(12px);opacity:.5}to{transform:translateY(0);opacity:1}}
.demo-mod-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 20px;border-bottom:1px solid var(--border)
}
.demo-mod-title{font-size:16px;font-weight:800;color:var(--text1);letter-spacing:-.3px}
.demo-mod-sub{font-size:11px;color:var(--text3);margin-top:2px}
.demo-mod-close{
  background:var(--gray-bg);border:none;width:32px;height:32px;border-radius:8px;
  font-size:14px;cursor:pointer;color:var(--text2);font-family:inherit;
  display:flex;align-items:center;justify-content:center;transition:all .15s
}
.demo-mod-close:hover{background:rgba(224,62,62,.12);color:#e03e3e}
.demo-mod-body{padding:16px 20px;overflow-y:auto;flex:1}
.demo-mod-foot{
  padding:12px 20px;border-top:1px solid var(--border);
  display:flex;gap:8px;align-items:center;justify-content:flex-end;background:var(--gray-bg)
}

/* Form tabs */
.demo-ftabs{
  display:flex;gap:3px;background:var(--gray-bg);padding:3px;border-radius:10px;margin-bottom:16px;
  flex-wrap:wrap
}
.demo-ftab{
  flex:1;min-width:100px;padding:7px 12px;border-radius:8px;border:none;font-family:inherit;
  font-size:11.5px;font-weight:700;cursor:pointer;color:var(--text3);background:transparent;
  transition:all .15s
}
.demo-ftab:hover{color:var(--text2)}
.demo-ftab.active{background:#06b6d4;color:#fff;box-shadow:0 2px 6px rgba(6,182,212,.3)}
.demo-ftab-c{display:none;flex-direction:column;gap:12px}
.demo-ftab-c.active{display:flex}

/* Form fields */
.demo-field{display:flex;flex-direction:column;gap:4px}
.demo-field>label{font-size:10px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.05em}
.demo-inp{
  background:var(--card2,var(--gray-bg));border:1px solid var(--border);border-radius:8px;
  padding:9px 11px;font-size:12px;color:var(--text1);font-family:inherit;
  transition:all .15s;outline:none;width:100%;box-sizing:border-box
}
.demo-inp:focus{border-color:#06b6d4;box-shadow:0 0 0 3px rgba(6,182,212,.15)}
textarea.demo-inp{resize:vertical;min-height:60px;line-height:1.5}
.demo-inp-btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:var(--gray-bg);border:1px solid var(--border);border-radius:6px;
  padding:4px 10px;font-size:10px;cursor:pointer;font-family:inherit;font-weight:600;
  color:var(--text2);transition:all .15s
}
.demo-inp-btn:hover{background:#06b6d4;color:#fff;border-color:#06b6d4}

/* Grids */
.demo-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.demo-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}

/* Module checkboxes */
.demo-mod-check{
  display:flex;align-items:center;gap:10px;padding:10px 12px;background:var(--gray-bg);
  border-radius:10px;cursor:pointer;transition:all .15s;margin-bottom:6px
}
.demo-mod-check:hover{background:rgba(6,182,212,.06)}
.demo-mod-check input[type=checkbox]{width:16px;height:16px;cursor:pointer;accent-color:#06b6d4}
.demo-mod-check-lbl{flex:1;font-size:12px;color:var(--text1)}
.demo-mod-check-pill{padding:3px 8px;border-radius:6px;font-size:10px;font-weight:700}

/* Duration quick buttons */
.demo-dur-btn{
  padding:5px 10px;border-radius:6px;border:1px solid var(--border);background:var(--card);
  font-size:10px;font-weight:700;cursor:pointer;font-family:inherit;color:var(--text2);
  transition:all .15s
}
.demo-dur-btn:hover{background:#06b6d4;color:#fff;border-color:#06b6d4}

/* Details grid */
.demo-status-banner{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 14px;border-radius:10px;margin-bottom:14px
}
.demo-det-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border:1px solid var(--border);border-radius:10px;overflow:hidden
}
.demo-det-row{
  display:flex;flex-direction:column;gap:2px;padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.03);border-right:1px solid rgba(255,255,255,.03);
  font-size:12px
}
.demo-det-row:nth-child(2n){border-right:none}
.demo-det-lbl{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.demo-det-val{color:var(--text1);font-size:12px;word-break:break-word}

/* Followup timeline */
.demo-fu-row{
  display:flex;gap:10px;padding:9px 12px;background:var(--gray-bg);border-radius:8px;
  align-items:flex-start
}
.demo-fu-ico{
  width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:var(--card);font-size:13px;flex-shrink:0
}

/* Light mode tweaks */
body.light-mode .demo-table tbody tr:hover{background:rgba(6,182,212,.06)}
body.light-mode .demo-mod-close:hover{background:rgba(224,62,62,.08)}
body.light-mode .demo-inp{background:#fff}

/* Responsive */
@media(max-width:900px){
  .demo-dash-split{grid-template-columns:1fr!important}
  .demo-grid-2,.demo-grid-3{grid-template-columns:1fr}
  .demo-det-grid{grid-template-columns:1fr}
  .demo-det-row{border-right:none!important}
  .demo-ftab{flex:none;min-width:auto;padding:7px 9px;font-size:11px}
  .demo-modal-content{max-width:100%;max-height:100vh;border-radius:0}
  .demo-modal-bg{padding:0}
}

/* ═══════════════════════════════════════════════════════════════
   DELIVR v3 — Prospection SENSIPRO additional styles
   Dashboard tabs · KPI sections · Pipeline Kanban · Config · hb-ico
   ═══════════════════════════════════════════════════════════════ */

/* — Dashboard : onglets internes Suivi Démo / Suivi Commercial — */
.demo-dash-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.08));
  padding-bottom: 0;
}
.demo-dash-tab {
  background: transparent;
  border: none;
  color: var(--text3);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  border-radius: 6px 6px 0 0;
}
.demo-dash-tab:hover { color: var(--text2); background: rgba(6,182,212,.06); }
.demo-dash-tab.active {
  color: #06b6d4;
  border-bottom-color: #06b6d4;
  background: rgba(6,182,212,.08);
}
.demo-dash-tab-content { animation: demo-fade-in .2s ease; }
@keyframes demo-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }

/* — KPI sections (titre + badge) — */
.demo-kpi-section { margin-bottom: 18px; }
.demo-kpi-section-h {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.demo-section-badge {
  background: #e03e3e;
  color: #fff;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 10px;
  font-weight: 800;
}
.demo-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
}
@media (max-width: 900px) {
  .demo-kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .demo-dash-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 520px) {
  .demo-kpi-grid { grid-template-columns: 1fr; }
  .demo-dash-tab { padding: 8px 10px; font-size: 12px; }
}

/* — Performance row (classement) — */
.demo-perf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border-soft, rgba(255,255,255,.05));
}
.demo-perf-row:last-child { border-bottom: none; }

/* — Icon-only button (actions sur lignes table) — */
.hb-ico {
  background: transparent;
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  color: var(--text2);
  width: 26px;
  height: 26px;
  border-radius: 5px;
  cursor: pointer;
  margin-left: 3px;
  font-size: 12px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hb-ico:hover { background: rgba(6,182,212,.1); color: #06b6d4; border-color: rgba(6,182,212,.3); }
body.light-mode .hb-ico { border-color: rgba(0,0,0,.08); color: #4a4e67; }
body.light-mode .hb-ico:hover { background: rgba(6,182,212,.08); color: #0891b2; }

/* — PIPELINE KANBAN — */
.demo-kanban {
  display: grid;
  grid-template-columns: repeat(5, minmax(220px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
}
@media (max-width: 1280px) {
  .demo-kanban {
    grid-template-columns: repeat(5, 240px);
    overflow-x: auto;
  }
}
.demo-kan-col {
  background: var(--gray-bg, rgba(255,255,255,.02));
  border: 1px solid var(--border-soft, rgba(255,255,255,.06));
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: 72vh;
}
body.light-mode .demo-kan-col { background: #fafbff; border-color: rgba(0,0,0,.06); }
.demo-kan-h {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}
.demo-kan-h-lbl {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text1);
  flex: 1;
  min-width: 0;
}
.demo-kan-h-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.demo-kan-h-cnt {
  background: rgba(255,255,255,.08);
  color: var(--text1);
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 10px;
  min-width: 24px;
  text-align: center;
}
body.light-mode .demo-kan-h-cnt { background: rgba(0,0,0,.06); color: #1a1d2e; }
.demo-kan-h-sub {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text3);
  margin-bottom: 8px;
  min-height: 14px;
}
.demo-kan-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow-y: auto;
  padding-right: 2px;
}
.demo-kan-empty {
  color: var(--text3);
  font-size: 11px;
  font-style: italic;
  text-align: center;
  padding: 16px 4px;
  opacity: .6;
}
.demo-kan-card {
  background: var(--card-bg, rgba(255,255,255,.04));
  border: 1px solid var(--border-soft, rgba(255,255,255,.08));
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: background .15s ease, transform .1s ease, border-color .15s ease, box-shadow .15s ease;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.light-mode .demo-kan-card {
  background: #fff;
  border-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.demo-kan-card:hover {
  background: rgba(6,182,212,.06);
  border-color: rgba(6,182,212,.35);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(6,182,212,.12);
}
body.light-mode .demo-kan-card:hover {
  background: #f6faff;
  box-shadow: 0 4px 12px rgba(6,182,212,.1);
}
.demo-kan-card-t {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-kan-card-meta {
  font-size: 10.5px;
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-kan-card-team {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  border-top: 1px dashed var(--border-soft, rgba(255,255,255,.06));
  border-bottom: 1px dashed var(--border-soft, rgba(255,255,255,.06));
  margin: 2px 0;
}
.demo-kan-card-prsn {
  font-size: 10.5px;
  color: var(--text2);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.demo-kan-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 2px;
}
.demo-kan-card-deal {
  font-size: 11px;
  font-weight: 700;
  color: var(--text1);
}
.demo-kan-card-dl {
  font-size: 10.5px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  white-space: nowrap;
}
body.light-mode .demo-kan-card-dl { background: rgba(0,0,0,.05); }

/* — Configuration rows — */
.demo-cfg-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  margin-bottom: 4px;
  transition: background .15s ease;
}
.demo-cfg-row:hover { background: rgba(6,182,212,.05); }
body.light-mode .demo-cfg-row:hover { background: rgba(6,182,212,.06); }

/* ═══════════════════════════════════════════════════════════════
   DELIVR v3 — Prospection SENSIPRO · RESPONSIVE MOBILE
   Adaptations pour <768px (tablette/mobile)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* En-tête principal de la section */
  #demosSection { padding: 12px 10px 100px 10px; }

  /* Dashboard — onglets internes : scroll horizontal, pas de saut de ligne */
  .demo-dash-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    scrollbar-width: thin;
  }
  .demo-dash-tabs::-webkit-scrollbar { height: 3px; }
  .demo-dash-tab {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 12px;
  }

  /* KPIs — 2 colonnes sur mobile */
  .demo-kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .demo-kpi { padding: 10px 8px !important; }
  .demo-kpi-v { font-size: 18px !important; }
  .demo-kpi-l { font-size: 10.5px !important; }
  .demo-kpi-s { font-size: 9.5px !important; }
  .demo-kpi-ico { width: 28px !important; height: 28px !important; font-size: 14px !important; }

  /* Titre de section KPI */
  .demo-kpi-section-h { font-size: 11px; padding: 6px 0; }

  /* Panels latéraux (classements, raisons, etc.) — pleine largeur */
  .demo-dash-split { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* Grille à 3 colonnes (modules/secteurs/origines) → 1 colonne */
  [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns: 1fr !important; }

  /* Pipeline Kanban : scroll horizontal avec colonnes fixes en largeur */
  .demo-kanban {
    grid-template-columns: repeat(5, 280px) !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding-bottom: 10px;
    scroll-snap-type: x mandatory;
  }
  .demo-kan-col {
    scroll-snap-align: start;
    min-height: 280px;
    max-height: 65vh;
  }
  .demo-kan-card-t { font-size: 12px; }
  .demo-kan-card-meta { font-size: 10px; }

  /* Liste des comptes — rendre le tableau scrollable horizontalement */
  .demo-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .demo-table { min-width: 780px; font-size: 11px; }
  .demo-table thead th { padding: 8px 6px; font-size: 10px; }
  .demo-table tbody td { padding: 8px 6px; }

  /* Filtres en haut de la liste : scroll horizontal sans saut de ligne */
  #demoListContainer > div:first-child {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  #demoListContainer > div:first-child .finp,
  #demoListContainer > div:first-child .fsel,
  #demoListContainer > div:first-child .hb { flex-shrink: 0; }
  #demoListContainer > div:first-child .finp { min-width: 180px !important; }

  /* Pipeline : filtres aussi en scroll horizontal */
  #demoPipelineContainer > div:nth-child(2) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 4px;
  }
  #demoPipelineContainer > div:nth-child(2) .fsel,
  #demoPipelineContainer > div:nth-child(2) .hb { flex-shrink: 0; }

  /* Modale de détail / édition : plein écran */
  .demo-modal-content { max-width: 100% !important; width: 100% !important; max-height: 100vh !important; height: 100vh !important; border-radius: 0 !important; margin: 0 !important; }
  .demo-modal-bg { padding: 0 !important; align-items: stretch !important; }
  .demo-mod-body { padding: 12px !important; }
  .demo-mod-head { padding: 12px !important; }
  .demo-mod-foot { padding: 10px 12px !important; flex-wrap: wrap; gap: 6px; }
  .demo-mod-foot .hb { flex: 1; min-width: 100px; font-size: 11px; }
  .demo-mod-title { font-size: 15px !important; }
  .demo-mod-sub { font-size: 11px !important; }

  /* Onglets du formulaire — scroll horizontal */
  .demo-ftabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: thin;
  }
  .demo-ftab { flex-shrink: 0; padding: 7px 10px !important; font-size: 11px !important; }

  /* Champs formulaire — 1 colonne */
  .demo-grid-2, .demo-grid-3 { grid-template-columns: 1fr !important; }

  /* Fiche détail — 1 colonne */
  .demo-det-grid { grid-template-columns: 1fr !important; }
  .demo-det-row { border-right: none !important; }

  /* Bannière de statut dans la fiche détail */
  .demo-status-banner { flex-direction: column; align-items: flex-start !important; gap: 8px; text-align: left !important; }

  /* Boutons "durée rapide" : en grille 5 colonnes */
  .demo-dur-btn { flex: 1; min-width: 0; padding: 6px 4px !important; font-size: 10px !important; }

  /* Alertes & Relances : rangée plus compacte */
  .demo-alert-row { padding: 8px 10px !important; gap: 8px !important; }
  .demo-alert-ico { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  .demo-alert-t { font-size: 12px !important; }
  .demo-alert-s { font-size: 10px !important; }
  .demo-alert-dl { font-size: 10.5px !important; }

  /* Panels */
  .demo-panel-h { font-size: 11px !important; padding: 10px 12px !important; }
  .demo-panel-b { padding: 10px !important; }

  /* Bouton "Nouvelle demande démo" dans l'en-tête dashboard */
  .stit { font-size: 15px !important; }
}

/* Très petit mobile (<480px) */
@media (max-width: 480px) {
  .demo-kpi-grid { grid-template-columns: 1fr 1fr !important; }
  .demo-kanban { grid-template-columns: repeat(5, 260px) !important; }
  .demo-ftab { padding: 6px 8px !important; font-size: 10.5px !important; }
  .demo-dur-btn { font-size: 9.5px !important; }
}

/* ══════════════════════════════════════════════
   BLOCK GROUPING — Header, TDC, Mobile
   ══════════════════════════════════════════════ */

/* ── Header app-switcher dropdowns ── */
.app-sw-dd{position:relative}
.app-sw-dd-trigger{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg2);color:var(--text3);font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .18s}
.app-sw-dd-trigger:hover{border-color:var(--border2);color:var(--text2);background:rgba(255,255,255,.04)}
.app-sw-dd-trigger.active{border-color:var(--accent-line);color:var(--text1);background:var(--accent-soft)}
.app-sw-dd-block{font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--text3);opacity:.7}
.app-sw-dd-trigger.active .app-sw-dd-block{color:var(--accent2);opacity:1}
.app-sw-dd-cur{font-weight:600;color:var(--text2)}
.app-sw-dd-trigger.active .app-sw-dd-cur{color:#fff}
.app-sw-dd-chev{opacity:.5;transition:transform .2s;flex-shrink:0}
.app-sw-dd.open .app-sw-dd-chev{transform:rotate(180deg)}
.app-sw-dd-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;min-width:180px;background:var(--card);border:1px solid var(--border2);border-radius:10px;box-shadow:var(--shadow-lg);padding:4px;z-index:9500}
.app-sw-dd.open .app-sw-dd-menu{display:block}
.app-sw-dd-menu .app-sw-btn{display:flex;align-items:center;gap:6px;width:100%;padding:7px 12px;border-radius:7px;border:none;background:none;color:var(--text2);font-family:'Inter',system-ui,sans-serif;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;transition:all .15s}
.app-sw-dd-menu .app-sw-btn:hover{background:rgba(255,255,255,.05);color:var(--text1)}
.app-sw-dd-menu .app-sw-btn.active{color:#fff}
.app-sw-dd-menu .app-sw-btn[data-sec="contenus"].active{background:linear-gradient(135deg,#5c7cfa,#4F6AE8)}
.app-sw-dd-menu .app-sw-btn[data-sec="onboarding"].active{background:linear-gradient(135deg,#e03e3e,#c0392b)}
.app-sw-dd-menu .app-sw-btn[data-sec="tech"].active{background:linear-gradient(135deg,#0fca7a,#0ea86a)}
.app-sw-dd-menu .app-sw-btn[data-sec="partenaires"].active{background:linear-gradient(135deg,#f5a23a,#d97706)}
.app-sw-dd-menu .app-sw-btn[data-sec="demos"].active{background:linear-gradient(135deg,#06b6d4,#0891b2)}
.app-sw-dd-menu .app-sw-btn[data-sec="procedures"].active{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}
.app-sw-dd-menu .app-sw-btn[data-sec="performance"].active{background:linear-gradient(135deg,#ffd700,#ff8c00)}
.app-sw-dd-menu .app-sw-btn[data-sec="admin"].active{background:linear-gradient(135deg,#64748b,#475569)}
body.light-mode .app-sw-dd-trigger{background:#fff;border-color:#e2e4e9;color:#6b7280}
body.light-mode .app-sw-dd-trigger:hover{background:#f9fafb;border-color:#d1d5db}
body.light-mode .app-sw-dd-trigger.active{background:rgba(92,124,250,.08);border-color:rgba(92,124,250,.3);color:#1e293b}
body.light-mode .app-sw-dd-menu{background:#fff;border-color:#e2e4e9;box-shadow:0 8px 32px rgba(0,0,0,.12)}
body.light-mode .app-sw-dd-menu .app-sw-btn:hover{background:#f1f5f9}
.app-sw-block{display:none}
.app-sw-block-lbl{display:none}
.app-sw-sep{display:none}

/* ── TDC v2 — Conteneur principal : flex-wrap pour blocs côte-à-côte ── */
.tdc-grid{display:flex!important;flex-wrap:wrap;gap:16px;margin-bottom:30px;align-items:flex-start}

/* ── TDC v2 — Bloc (groupe de tuiles) ── */
.tdc-block{
  background:var(--card);
  border:1px solid var(--border);
  border-top:3px solid var(--blk,var(--accent));
  border-radius:12px;
  padding:14px 14px 12px;
  position:relative;
  transition:box-shadow .2s ease;
  flex:0 1 auto;
  min-width:0;
}
.tdc-block:hover{box-shadow:0 4px 16px rgba(0,0,0,.06)}
.tdc-block-sm{flex-basis:240px;max-width:280px}
.tdc-block-md{flex-basis:430px;max-width:520px}
.tdc-block-lg{flex-basis:100%;max-width:100%}

/* Header du bloc */
.tdc-block-hdr{
  display:flex;align-items:center;gap:8px;
  margin-bottom:4px;
}
.tdc-block-label{
  font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--blk,var(--text1));
}
.tdc-block-count{
  font-size:9.5px;font-weight:700;
  background:color-mix(in srgb,var(--blk) 14%,transparent);
  color:var(--blk);
  padding:1px 6px;border-radius:8px;line-height:1.5;
}
.tdc-block-desc{
  font-size:11px;color:var(--text3);font-weight:400;
  margin-bottom:10px;line-height:1.4;
}

/* Grille interne du bloc — tuiles compactes côte-à-côte */
.tdc-block-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:8px;
}
.tdc-block-sm .tdc-block-grid{grid-template-columns:1fr}
.tdc-block-md .tdc-block-grid{grid-template-columns:repeat(2,1fr)}

/* ── TDC v2 — Tuile compacte (horizontale) ── */
.tdc-card{
  background:var(--gray-bg);
  border:1px solid var(--border);
  border-radius:9px;
  padding:10px 11px;
  cursor:pointer;
  transition:all .18s ease;
  position:relative;
  display:flex;align-items:center;gap:10px;
  overflow:hidden;
  min-height:54px;
}
.tdc-card:hover{
  transform:translateY(-1px);
  border-color:var(--blk,var(--accent));
  box-shadow:0 4px 12px color-mix(in srgb,var(--blk,var(--accent)) 15%,transparent);
  background:var(--card);
}
.tdc-card-ico{font-size:22px;flex-shrink:0;line-height:1}
.tdc-card-body{flex:1;min-width:0}
.tdc-card-title{font-size:12.5px;font-weight:700;color:var(--text1);margin-bottom:2px;line-height:1.2}
.tdc-card-desc{font-size:10.5px;color:var(--text3);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tdc-card-arrow{color:var(--text3);opacity:.35;transition:all .18s;flex-shrink:0}
.tdc-card:hover .tdc-card-arrow{opacity:1;color:var(--blk,var(--accent));transform:translateX(2px)}

/* ── Mobile nav blocks ── */
.mob-sec-blk{font-size:7.5px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);padding:0 6px;white-space:nowrap;display:flex;align-items:center}
.mob-sec-sep{width:1px;height:18px;background:var(--border2);margin:0 2px;flex-shrink:0}

/* Responsive */
@media(max-width:900px){
  .tdc-block-md,.tdc-block-sm{flex-basis:100%;max-width:100%}
  .tdc-block-md .tdc-block-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}
}
@media(max-width:600px){
  .tdc-inner{padding:30px 14px 30px}
  .tdc-block-grid{grid-template-columns:1fr!important}
  .tdc-card{padding:10px 12px}
}

/* ═══════════════════════════════════════════════════════════════
   ÉCRAN DE BIENVENUE (landing post-login)
   ═══════════════════════════════════════════════════════════════ */
.welcome-screen{
  display:none;
  position:fixed;inset:0;z-index:9999;
  background:radial-gradient(circle at 30% 20%, rgba(92,124,250,.08), transparent 60%),
             radial-gradient(circle at 70% 80%, rgba(139,92,246,.08), transparent 60%),
             var(--bg);
  align-items:center;justify-content:center;
  padding:24px;
}
.welcome-screen.open{display:flex}
.welcome-inner{
  width:100%;max-width:520px;
  text-align:center;
  animation:welcomeFadeIn .6s cubic-bezier(.16,1,.3,1);
}
@keyframes welcomeFadeIn{
  from{opacity:0;transform:translateY(20px)}
  to{opacity:1;transform:translateY(0)}
}
.welcome-logo-wrap{margin-bottom:48px}
.welcome-logo-icon{
  width:72px;height:72px;
  margin:0 auto 16px;
  border-radius:18px;
  background:linear-gradient(135deg,#5c7cfa,#8b5cf6);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:32px;font-weight:900;
  box-shadow:0 12px 32px rgba(92,124,250,.4),
             0 0 0 1px rgba(255,255,255,.1) inset;
}
.welcome-tenant{
  font-size:22px;font-weight:900;
  color:var(--text1);letter-spacing:-.5px;
  margin-bottom:2px;
}
.welcome-sub{
  font-size:11px;font-weight:600;
  color:var(--text3);
  letter-spacing:2px;text-transform:uppercase;
}
.welcome-greeting{margin-bottom:40px}
.welcome-hello{
  font-size:14px;color:var(--text3);
  font-weight:500;margin-bottom:6px;
}
.welcome-name{
  font-size:34px;font-weight:900;
  color:var(--text1);letter-spacing:-1px;
  margin-bottom:10px;
}
.welcome-role{
  display:inline-block;
  font-size:12px;font-weight:700;
  color:var(--text2);
  background:var(--card);
  border:1px solid var(--border);
  padding:6px 14px;border-radius:20px;
}
.welcome-cta{
  display:inline-flex;align-items:center;justify-content:center;
  padding:16px 32px;
  background:linear-gradient(135deg,#5c7cfa,#8b5cf6);
  color:#fff;font-size:15px;font-weight:700;
  border:none;border-radius:14px;
  cursor:pointer;
  transition:all .25s cubic-bezier(.16,1,.3,1);
  box-shadow:0 8px 24px rgba(92,124,250,.35),
             0 0 0 1px rgba(255,255,255,.1) inset;
  font-family:inherit;
}
.welcome-cta:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(92,124,250,.45),
             0 0 0 1px rgba(255,255,255,.15) inset;
}
.welcome-cta:active{transform:translateY(0)}
.welcome-cta-ico{font-size:18px;margin-right:10px}
.welcome-foot{margin-top:32px}
.welcome-logout{
  background:transparent;border:none;
  color:var(--text3);font-size:12px;
  cursor:pointer;font-family:inherit;
  text-decoration:underline;
  padding:8px 16px;
  transition:color .2s;
}
.welcome-logout:hover{color:var(--text1)}
@media (max-width:640px){
  .welcome-name{font-size:26px}
  .welcome-cta{padding:14px 24px;font-size:14px}
}

/* ══════════════════════════════════════════════════════════════
   DASHBOARD ONBOARDING — Harmonisation visuelle (style Dashboard Clients)
   Cible scopée sur #onbDashboard pour éviter d'impacter le reste de l'app.
   ════════════════════════════════════════════════════════════ */
#onbDashboard {
  padding: 8px 24px 32px;
  max-width: 1400px;
  margin: 0 auto;
}

/* En-tête dashboard (eyebrow + titre 18px) */
#onbDashboard .onb-dash-header {
  margin-bottom: 18px;
}
#onbDashboard .onb-dash-eyebrow {
  font-size: 11px;
  color: var(--text3);
  text-transform: uppercase;
  letter-spacing: .7px;
  font-weight: 700;
  margin-bottom: 4px;
}
#onbDashboard .onb-dash-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--text1);
  display: flex;
  align-items: center;
  gap: 10px;
}
#onbDashboard .onb-dash-title-yr {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  background: var(--accent-soft);
  padding: 3px 10px;
  border-radius: 6px;
  letter-spacing: .5px;
}

/* Air entre les sections KPI et les hero rows */
#onbDashboard .onb-kpi-section {
  margin-bottom: 18px;
}
#onbDashboard .onb-dash-hero {
  gap: 12px;
}
#onbDashboard .onb-dash-hero + .onb-dash-hero {
  margin-top: 14px !important;
}

/* Panels intérieurs un peu plus aérés */
#onbDashboard .onb-dash-panel {
  border-radius: 12px;
}

@media (max-width: 900px) {
  #onbDashboard {
    padding: 8px 14px 24px;
  }
  #onbDashboard .onb-dash-title {
    font-size: 16px;
  }
  #onbDashboard .onb-dash-eyebrow {
    font-size: 10px;
  }
}