:root {
  --bg-primary: #F5F8FF;
  --bg-secondary: #FFFFFF;
  --bg-tertiary: #EEF2FB;
  --text-primary: #0B1220;
  --text-secondary: #1A2436;
  --text-muted: var(--neutral-500);
  --border-color: #DBE3F0;
  --shadow-sm: 0 1px 3px rgba(15,23,42,0.04), 0 1px 2px rgba(15,23,42,0.06);
  --shadow-md: 0 4px 6px rgba(15,23,42,0.04), 0 2px 4px rgba(15,23,42,0.06);
  --shadow-lg: 0 10px 15px rgba(15,23,42,0.05), 0 4px 6px rgba(15,23,42,0.04);
  --shadow-glow: 0 0 40px rgba(37,99,235,0.12);
  --shadow-soft: 0 1px 3px rgba(15,23,42,0.04), 0 4px 12px rgba(15,23,42,0.06);
  --shadow-soft-lg: 0 2px 6px rgba(15,23,42,0.06), 0 8px 24px rgba(15,23,42,0.10);

  --accent-primary: var(--blue-500);
  --accent-secondary: #60A5FA;
  --accent-gradient: linear-gradient(135deg, #60A5FA 0%, var(--blue-500) 50%, #1D52D2 100%);
  --accent-light: rgba(37,99,235,0.10);
  --accent-green: var(--green-500);
  --accent-green-light: rgba(5,150,105,0.10);
  --accent-green-gradient: linear-gradient(135deg, #10B981 0%, var(--green-500) 100%);
  --brand-green: var(--green-500);
  --brand-steel: #334155;
  --icon-primary: #121331;
  --icon-secondary: var(--blue-500);

  --success: var(--green-500);
  --success-bg: #ECFDF5;
  --success-border: #A7F3D0;
  --warning: var(--amber-500);
  --warning-bg: #FFFBEB;
  --warning-border: #FDE68A;
  --danger: var(--red-500);
  --danger-bg: #FEF2F2;
  --danger-border: #FECACA;
  --info: var(--blue-500);
  --info-bg: #F0F9FF;

  /* Échelles sémantiques 9 teintes (100→900) — pattern theme.js react-admin-dashboard
     500 = valeur de base, IDENTIQUE en light & dark ; 100-400 s'inversent avec 600-900 */
  /* green (succès / marque) */
  --green-100: #E1F2ED;
  --green-200: #B9E2D5;
  --green-300: #91D1BD;
  --green-400: #69C0A5;
  --green-500: #059669;
  --green-600: #04845C;
  --green-700: #047250;
  --green-800: #035D41;
  --green-900: #02442F;
  /* red (danger) */
  --red-100: #FBE5E5;
  --red-200: #F5C2C2;
  --red-300: #F0A0A0;
  --red-400: #EA7D7D;
  --red-500: #DC2626;
  --red-600: #C22121;
  --red-700: #A71D1D;
  --red-800: #881818;
  --red-900: #631111;
  /* blue (marque / info) — Cobalt Grid, centré sur #2563EB */
  --blue-100: #E9EFFB;
  --blue-200: #C9D8F7;
  --blue-300: #A4BDF4;
  --blue-400: #6C95EF;
  --blue-500: #2563EB;
  --blue-600: #1E57D2;
  --blue-700: #1649B6;
  --blue-800: #0F3995;
  --blue-900: #092A71;
  /* amber (warning) */
  --amber-100: #FAEFE1;
  --amber-200: #F4D9B9;
  --amber-300: #EEC391;
  --amber-400: #E8AD6A;
  --amber-500: #D97706;
  --amber-600: #BF6905;
  --amber-700: #A55A05;
  --amber-800: #874A04;
  --amber-900: #623603;
  /* neutral (slate) */
  --neutral-100: #ECEEF1;
  --neutral-200: #D4D8DF;
  --neutral-300: #BBC2CC;
  --neutral-400: #A2ACB9;
  --neutral-500: #64748B;
  --neutral-600: #58667A;
  --neutral-700: #4C586A;
  --neutral-800: #3E4856;
  --neutral-900: #2D343F;

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  --font-body: 'Fira Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Fira Code', 'Courier New', monospace;
  /* Échelle typographique (pattern theme.js) — base mobile 14px */
  --font-xs: 11px;
  --font-sm: 12px;
  --font-base: 14px;
  --font-md: 16px;
  --font-lg: 18px;
  --font-xl: 20px;
  --font-2xl: 24px;
  --font-3xl: 32px;
  --font-4xl: 40px;
  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;
  --heading-h1: clamp(26px, 6vw, 40px);
  --heading-h2: clamp(22px, 5vw, 32px);
  --heading-h3: clamp(18px, 4vw, 24px);
  --heading-h4: clamp(16px, 3vw, 20px);
  --heading-h5: clamp(14px, 2.5vw, 16px);
  --heading-h6: var(--font-base);
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Glassmorphism */
  --glass-bg: rgba(255,255,255,0.6);
  --glass-border: rgba(255,255,255,0.2);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
  --glass-blur: 12px;
  --glass-card-bg: rgba(255,255,255,0.55);
  --glass-card-border: rgba(255,255,255,0.25);
--orbital-bg: rgba(255,255,255,0.75);


  /* HUD — thème clair */
  --hud-card-bg: linear-gradient(160deg, rgba(37,99,235,0.07), rgba(255,255,255,0.72) 55%);
  --hud-card-border: rgba(37,99,235,0.18);
  --hud-track: rgba(15,23,42,0.10);
  --hud-glow: rgba(37,99,235,0.12);
  --hud-rule: rgba(37,99,235,0.40);

  /* Dashboard v2 — Verre premium (clair) */
  --v2-card-bg: linear-gradient(165deg, rgba(37,99,235,0.08), rgba(255,255,255,0.85) 58%);
  --v2-card-border: rgba(37,99,235,0.22);
  --v2-rule: rgba(37,99,235,0.28);
  --v2-shadow: 0 6px 22px rgba(37,99,235,0.10);
  --v2-glow: rgba(37,99,235,0.16);

  /* Dashboard v9 Aurora (clair) */
  --v9-halo-1: rgba(37,99,235,0.14);
  --v9-halo-2: rgba(167,139,250,0.10);
  --v9-card: linear-gradient(160deg, rgba(37,99,235,0.10), rgba(255,255,255,0.86) 55%);
  --v9-border: rgba(37,99,235,0.20);
  --v9-shadow: 0 8px 24px rgba(15,23,42,0.08);
  --v9-glow-1: rgba(37,99,235,0.30);
  --v9-glow-2: rgba(56,189,248,0.30);
  --v9-glow-3: rgba(167,139,250,0.30);
  --v9-grad-1: linear-gradient(90deg, #2563EB, #6C95EF);
  --v9-grad-2: linear-gradient(90deg, #0284c7, #38bdf8);
  --v9-grad-3: linear-gradient(90deg, #7c3aed, #a78bfa);
  --v9-track: rgba(15,23,42,0.08);
}

/* Material Symbols — icônes locales (hors-ligne APK) */
@font-face {
  font-family: 'Material Symbols Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(fonts/material-symbols-outlined.woff2) format('woff2');
}

.mi {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  user-select: none;
}
.mi.mi-sm { font-size: 16px; }
.mi.mi-md { font-size: 20px; }
.mi.mi-lg { font-size: 28px; }
.mi.mi-xl { font-size: 36px; }
.mi.mi-green { color: var(--accent-primary); }
.mi.mi-red { color: var(--danger); }
.mi.mi-amber { color: var(--warning); }
.mi.mi-blue { color: var(--info); }
.mi.mi-muted { color: var(--text-muted); }

[data-theme="dark"] {
  --bg-primary: #0B1220;
  --bg-secondary: #111A2B;
  --bg-tertiary: #1C2740;
  --text-primary: #EEF4FF;
  --text-secondary: #B6C4DA;
  --text-muted: var(--neutral-800);
  --border-color: #1C2740;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.4);
  --shadow-lg: 0 10px 15px rgba(0,0,0,0.35), 0 4px 6px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 60px rgba(37,99,235,0.15);
  --shadow-soft: 0 1px 3px rgba(0,0,0,0.3), 0 4px 12px rgba(0,0,0,0.35);
  --shadow-soft-lg: 0 2px 6px rgba(0,0,0,0.35), 0 8px 24px rgba(0,0,0,0.45);

  --success-bg: #064E3B;
  --success-border: #047857;
  --warning-bg: #78350F;
  --warning-border: #B45309;
  --danger-bg: #7F1D1D;
  --danger-border: #B91C1C;
  --info-bg: #0C4A6E;

  /* Échelles sémantiques 9 teintes — INVERSÉES (100=foncé → 900=clair), 500 identique */
  --green-100: #02442F;
  --green-200: #035D41;
  --green-300: #047250;
  --green-400: #04845C;
  --green-500: #059669;
  --green-600: #69C0A5;
  --green-700: #91D1BD;
  --green-800: #B9E2D5;
  --green-900: #E1F2ED;
  --red-100: #631111;
  --red-200: #881818;
  --red-300: #A71D1D;
  --red-400: #C22121;
  --red-500: #DC2626;
  --red-600: #EA7D7D;
  --red-700: #F0A0A0;
  --red-800: #F5C2C2;
  --red-900: #FBE5E5;
  --blue-100: #092A71;
  --blue-200: #0F3995;
  --blue-300: #1649B6;
  --blue-400: #1E57D2;
  --blue-500: #2563EB;
  --blue-600: #6C95EF;
  --blue-700: #A4BDF4;
  --blue-800: #C9D8F7;
  --blue-900: #E9EFFB;
  --amber-100: #623603;
  --amber-200: #874A04;
  --amber-300: #A55A05;
  --amber-400: #BF6905;
  --amber-500: #D97706;
  --amber-600: #E8AD6A;
  --amber-700: #EEC391;
  --amber-800: #F4D9B9;
  --amber-900: #FAEFE1;
  --neutral-100: #2D343F;
  --neutral-200: #3E4856;
  --neutral-300: #4C586A;
  --neutral-400: #58667A;
  --neutral-500: #64748B;
  --neutral-600: #A2ACB9;
  --neutral-700: #BBC2CC;
  --neutral-800: #D4D8DF;
  --neutral-900: #ECEEF1;

  --icon-primary: #FFFFFF;
  --icon-secondary: #60A5FA;

  /* Glassmorphism dark */
  --glass-bg: rgba(17,26,43,0.7);
  --glass-border: rgba(255,255,255,0.06);
  --glass-shadow: 0 8px 32px rgba(0,0,0,0.3);
  --glass-card-bg: rgba(17,26,43,0.65);
  --glass-card-border: rgba(255,255,255,0.08);
  --orbital-bg: #000;


  /* HUD — thème sombre */
  --hud-card-bg: linear-gradient(160deg, rgba(37,99,235,0.10), rgba(17,26,43,0.55) 55%);
  --hud-card-border: rgba(37,99,235,0.22);
  --hud-track: rgba(255,255,255,0.08);
  --hud-glow: rgba(37,99,235,0.16);
  --hud-rule: rgba(37,99,235,0.55);

  /* Dashboard v2 — Verre premium (sombre) */
  --v2-card-bg: linear-gradient(165deg, rgba(37,99,235,0.16), rgba(11,18,32,0.78) 58%);
  --v2-card-border: rgba(37,99,235,0.28);
  --v2-rule: rgba(37,99,235,0.38);
  --v2-shadow: 0 8px 26px rgba(0,0,0,0.45);
  --v2-glow: rgba(37,99,235,0.26);

  /* Dashboard v9 Aurora (sombre) */
  --v9-halo-1: rgba(37,99,235,0.16);
  --v9-halo-2: rgba(167,139,250,0.12);
  --v9-card: linear-gradient(160deg, rgba(37,99,235,0.14), rgba(11,18,32,0.80) 55%);
  --v9-border: rgba(37,99,235,0.26);
  --v9-shadow: 0 8px 26px rgba(0,0,0,0.45);
  --v9-glow-1: rgba(37,99,235,0.38);
  --v9-glow-2: rgba(56,189,248,0.38);
  --v9-glow-3: rgba(167,139,250,0.38);
  --v9-grad-1: linear-gradient(90deg, #2563EB, #6C95EF);
  --v9-grad-2: linear-gradient(90deg, #38bdf8, #7dd3fc);
  --v9-grad-3: linear-gradient(90deg, #a78bfa, #c4b5fd);
  --v9-track: rgba(255,255,255,0.08);
}

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

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-primary);
  color: var(--text-primary);
  display: flex;
  justify-content: center;
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background 0.4s ease, color 0.4s ease;
}

.app-container {
  width: 100%;
  max-width: 100%;
  height: 100vh;
  background: var(--bg-primary);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

@media (min-width: 640px) {
  .app-container {
    max-width: 100%;
    height: calc(100vh - 20px);
    max-height: none;
    margin: 10px auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg), var(--shadow-glow);
    border: 1px solid var(--border-color);
  }
}

.header {
  background: var(--accent-gradient);
  padding: 20px 20px 16px;
  position: relative;
  z-index: 100;
  overflow: hidden;
  flex-shrink: 0;
}

@media (min-width: 640px) {
  .header { border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
}

.header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -30%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  pointer-events: none;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 1;
}

.header-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.header-logo {
  height: 44px;
  width: auto;
  max-width: 150px;
  object-fit: contain;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.35));
  flex-shrink: 0;
}

.header-titles {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.header-subtitle {
  font-size: 10.5px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.03em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header-title {
  font-size: 18px;
  font-weight: 700;
  color: white;
  letter-spacing: -0.02em;
}

.header-badge {
  background: rgba(255,255,255,0.2);
  backdrop-filter: blur(10px);
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  color: white;
  letter-spacing: 0.02em;
}

.header-actions {
  display: flex;
  gap: 8px;
}

.theme-toggle {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  transition: var(--transition);
  backdrop-filter: blur(10px);
}

.theme-toggle:hover {
  background: rgba(255,255,255,0.25);
  transform: scale(1.05);
}

/* ── Sync banner global (notifications Firebase) ── */
.sync-banner {
  background: linear-gradient(135deg, var(--success-bg), var(--success-bg));
  border-bottom: 2px solid var(--success-border);
  padding: 9px 16px;
  font-size: 11px;
  color: var(--success);
  display: none;
  align-items: center;
  gap: 8px;
  animation: slideDown 0.35s ease;
  transition: opacity 0.5s ease;
  position: relative;
  z-index: 9999;
}

.sync-banner.active { display: flex; }

/* ── Smart Sync Banner (Traçabilité) ── */
.trace-sync-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 10px 12px;
  position: relative;
  z-index: 100;
}
.trace-sync-banner-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}
.trace-sync-banner-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.trace-sync-banner-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.trace-sync-banner-sub {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trace-sync-help {
  font-size: 10px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--warning, #f59e0b);
  max-width: 340px;
}
.sync-pulse {
  --pulse: rgba(148,163,184,0.45);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral-500, #94a3b8);
  flex: 0 0 auto;
}
.sync-pulse.pulse-green {
  --pulse: rgba(5,150,105,0.45);
  background: var(--success, #059669);
  animation: sync-pulse 1.8s infinite ease-out;
}
.sync-pulse.pulse-amber {
  --pulse: rgba(245,158,11,0.45);
  background: var(--warning, #f59e0b);
  animation: sync-pulse 1.8s infinite ease-out;
}
.sync-pulse.pulse-red {
  --pulse: rgba(239,68,68,0.45);
  background: var(--danger, #ef4444);
  animation: sync-pulse 1.8s infinite ease-out;
}
@keyframes sync-pulse {
  0% { box-shadow: 0 0 0 0 var(--pulse); transform: scale(0.98); }
  70% { box-shadow: 0 0 0 6px rgba(0,0,0,0); transform: scale(1.06); }
  100% { box-shadow: 0 0 0 0 rgba(0,0,0,0); transform: scale(0.98); }
}
.sync-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.sync-ico {
  display: inline-flex;
  line-height: 1;
  will-change: transform;
}
.sync-btn.syncing .sync-ico {
  animation: sync-rotate 0.9s linear infinite;
}
@keyframes sync-rotate {
  to { transform: rotate(360deg); }
}
.trace-status-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
@media (max-width: 639px) {
  .trace-sync-banner { flex-direction: column; align-items: stretch; }
  .trace-sync-banner-actions { width: 100%; }
  .trace-sync-banner-actions .sync-btn { width: 100%; justify-content: center; }
}

@keyframes slideDown {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen {
  flex: 1;
  display: none;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
  animation: fadeUp 0.35s ease;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.screen.active { display: flex; flex: 1; min-height: 0; }

.screen-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 20px 16px;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-primary) transparent;
}

.screen-scroll::-webkit-scrollbar { width: 4px; }
.screen-scroll::-webkit-scrollbar-thumb { background: var(--accent-primary); border-radius: 4px; }

.form-group {
  margin-bottom: 16px;
}

/* === FORM GRID — alignement standard des zones de saisie === */
.form-grid { display: grid; gap: 10px; min-width: 0; }
.form-grid-2 { grid-template-columns: 1fr 1fr; }
.form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  overflow-wrap: break-word;
}

.form-input {
  width: 100%;
  padding: 14px 16px;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 15px;
  font-family: inherit;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  transition: var(--transition);
}

.form-input:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 4px var(--accent-light), var(--shadow-glow);
}

.form-input::placeholder {
  color: var(--text-muted);
}

select.form-input {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 44px;
}

.autocomplete-wrap {
  position: relative;
}

.autocomplete-suggestions {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 240px;
  overflow-y: auto;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glow);
  backdrop-filter: blur(8px);
  display: none;
}

.autocomplete-suggestions.show {
  display: block;
}

.ac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid var(--glass-border);
}

.ac-item:last-child {
  border-bottom: none;
}

.ac-item:hover,
.ac-item.active {
  background: var(--accent-light);
}

.ac-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}

.ac-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.ac-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.ac-empty {
  padding: 12px 14px;
  font-size: 13px;
  color: var(--text-muted);
}

.ac-clear {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 14px;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ac-clear:hover {
  color: var(--danger);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border: none;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
}

.btn-primary {
  background: linear-gradient(135deg, var(--green-400) 0%, var(--green-500) 50%, var(--green-600) 100%);
  color: white;
  box-shadow: 0 4px 14px rgba(5,150,105,0.35);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(5,150,105,0.45);
}

.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  color: var(--text-secondary);
  border: 1px solid var(--glass-border);
}

.btn-secondary:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent-primary);
}

.btn-ghost {
  background: transparent;
  color: var(--text-muted);
  border: 1px solid transparent;
}

.btn-ghost:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
}


.btn-success {
  background: linear-gradient(135deg, var(--green-400), var(--green-600));
  color: white;
  box-shadow: 0 4px 14px rgba(16,185,129,0.3);
}

.btn-danger {
  background: linear-gradient(135deg, #ef4444, #dc2626);
  color: white;
}

.btn-block { width: 100%; }

.btn-sm {
  padding: 8px 14px;
  min-height: 44px;
  font-size: 12px;
  border-radius: 8px;
}

.icon-svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.tab-switcher .icon-svg { width: 16px; height: 16px; }
.screen-header h2 .icon-svg { width: 20px; height: 20px; margin-right: 8px; vertical-align: -4px; color: var(--accent-primary); }
.screen-header .header-actions button .icon-svg { width: 16px; height: 16px; }
.segmented .icon-svg { width: 14px; height: 14px; }
.btn .icon-svg { width: 16px; height: 16px; }

.card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  border: 1px solid var(--glass-card-border);
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
  min-width: 0;
  overflow-wrap: break-word;
}

.card:hover {
  border-color: var(--accent-secondary);
  box-shadow: var(--shadow-md);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

.card-title {
  font-size: var(--font-md);
  font-weight: 700;
  color: var(--text-primary);
  line-height: var(--lh-tight);
}

.card-subtitle {
  font-size: var(--font-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

.card-body {
  font-size: var(--font-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.card-footer {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-color);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--font-xs);
  font-weight: 600;
}

.status-success {
  background: var(--success-bg);
  color: var(--success);
  border: 1px solid var(--success-border);
}

.status-warning {
  background: var(--warning-bg);
  color: var(--warning);
  border: 1px solid var(--warning-border);
}

.status-danger {
  background: var(--danger-bg);
  color: var(--danger);
  border: 1px solid var(--danger-border);
}

.status-info {
  background: var(--info-bg);
  color: var(--info);
}

.status-pending {
  background: color-mix(in srgb, var(--neutral-500) 12%, transparent);
  color: var(--neutral-600);
  border: 1px solid color-mix(in srgb, var(--neutral-500) 30%, transparent);
}

.status-processing {
  background: color-mix(in srgb, var(--blue-500) 12%, transparent);
  color: var(--blue-600);
  border: 1px solid color-mix(in srgb, var(--blue-500) 25%, transparent);
}

.status-cancelled {
  background: color-mix(in srgb, var(--red-500) 10%, transparent);
  color: var(--red-500);
  border: 1px solid color-mix(in srgb, var(--red-500) 25%, transparent);
}

/* Échelle typographique appliquée — classes utilitaires (pattern theme.js) */
.h-scale-1 { font-size: var(--heading-h1); line-height: var(--lh-tight); font-weight: 700; }
.h-scale-2 { font-size: var(--heading-h2); line-height: var(--lh-tight); font-weight: 700; }
.h-scale-3 { font-size: var(--heading-h3); line-height: var(--lh-tight); font-weight: 600; }
.h-scale-4 { font-size: var(--heading-h4); line-height: var(--lh-normal); font-weight: 600; }
.h-scale-5 { font-size: var(--heading-h5); line-height: var(--lh-normal); font-weight: 600; }
.h-scale-6 { font-size: var(--heading-h6); line-height: var(--lh-normal); font-weight: 600; }

.text-xs  { font-size: var(--font-xs); }
.text-sm  { font-size: var(--font-sm); }
.text-base { font-size: var(--font-base); }
.text-md  { font-size: var(--font-md); }
.text-lg  { font-size: var(--font-lg); }
.text-xl  { font-size: var(--font-xl); }
.text-2xl { font-size: var(--font-2xl); }
.text-3xl { font-size: var(--font-3xl); }
.text-4xl { font-size: var(--font-4xl); }

.result-panel {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 20px;
  margin-top: 16px;
  display: none;
  animation: fadeUp 0.4s ease;
  box-shadow: var(--glass-shadow);
}

.result-panel.active { display: block; }

.result-panel h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--accent-primary);
  text-align: center;
  margin-bottom: 16px;
}

.result-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.result-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--border-color);
}

.result-table td:first-child {
  color: var(--text-secondary);
}

.result-table td:last-child {
  text-align: right;
  font-weight: 600;
  color: var(--text-primary);
}

.result-table tr:last-child td {
  border-bottom: none;
}

.result-table tr.highlight {
  background: var(--success-bg);
}

.result-table tr.highlight td:last-child {
  color: var(--success);
}

.result-table tr.warning-row {
  background: var(--warning-bg);
}

.result-table tr.warning-row td:last-child {
  color: var(--warning);
}

.chute-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 16px 0;
}

.chute-side {
  background: linear-gradient(135deg, var(--warning-bg), transparent);
  border: 1px solid var(--warning-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
}

.chute-side-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 6px;
}

.chute-side-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--warning);
}

.yield-rate {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, var(--accent-light), transparent);
  border-radius: var(--radius-md);
  margin: 16px 0;
}

.yield-rate-label {
  font-size: 12px;
  color: var(--text-secondary);
  font-weight: 500;
  margin-bottom: 4px;
}

.yield-rate-value {
  font-size: 42px;
  font-weight: 800;
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.diagram-container {
  margin-top: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-card-border);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--glass-shadow);
}

.diagram-header {
  background: var(--accent-gradient);
  padding: 10px 16px;
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  text-align: center;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.diagram-body {
  padding: 16px 12px;
  overflow-x: auto;
  background: var(--glass-card-bg);
}

.diagram-body svg {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

.diagram-footer {
  padding: 10px 16px;
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 11px;
  color: var(--text-muted);
  border-top: 1px solid var(--glass-border);
  flex-wrap: wrap;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

/* Flux machines (onglet Sciage) — harmonisé avec diagram-container */
.flux-container { margin-top: 0; }
.flux-body {
  padding: 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.flux-arrow {
  color: var(--brand-green);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 0;
  opacity: .85;
}
.flux-pill {
  background: var(--accent-green-light);
  color: var(--brand-green);
  border: 1px solid rgba(5, 150, 105, .25);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.flux-pill.flux-end { color: var(--text-secondary); background: var(--glass-bg); border-color: var(--border-color); }
.flux-machine {
  width: 100%;
  max-width: 100%;
  background: var(--bg-card, var(--glass-card-bg));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  padding: 10px 12px;
  transition: box-shadow .15s ease;
}
.flux-machine:active { box-shadow: none; }
.flux-machine-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2px; }
.flux-machine-code {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-green);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.flux-machine-code svg { color: var(--brand-green); }
.flux-status-dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 3px rgba(0, 0, 0, .05); }
.flux-machine-label { font-size: 11.5px; color: var(--text-secondary); margin: 0 0 2px; }
.flux-machine-name { font-size: 10.5px; font-weight: 600; color: var(--brand-green, #2d6a4f); line-height: 1.35; margin: 0 0 6px; }
.flux-machine-meta { font-size: 12px; color: var(--text-primary); margin-bottom: 8px; }
.flux-machine-meta strong { color: var(--accent-primary); }
.flux-machine-actions { display: flex; gap: 8px; align-items: center; }
.flux-machine-actions select { flex: 1; min-width: 0; font-size: 11px; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-secondary); color: var(--text-primary); }
.flux-machine-actions .btn { white-space: nowrap; }

/* ============================================================
   MACHINE-STATE — lignes de production, puis fiche plein écran
   ============================================================ */

/* ── Niveau 1 : une ligne par machine ───────────────────────────── */
/* Quatre faits : identité, rôle, état, un chiffre. La grille 2×2 et ses
   tuiles sont mortes — plus aucun markup ne les émet. */

.ms-rows { display: flex; flex-direction: column; gap: 1px; }

.ms-row {
  display: grid;
  grid-template-columns: 58px 1fr auto auto 14px;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  min-height: 46px;
  background: var(--surface-1, var(--bg-secondary));
  border-left: 3px solid var(--border-color);
  cursor: pointer;
  user-select: none;
}
.ms-row:focus-visible { outline: 2px solid var(--accent-primary); outline-offset: -2px; }
.ms-row--run { border-left-color: var(--green-500); }
.ms-row--warn { border-left-color: var(--amber-500); }
.ms-row--maint { border-left-color: var(--blue-500); }
.ms-row--down { border-left-color: var(--red-500); }

.r-code { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--text-primary); }
.r-code svg { color: var(--accent-primary); flex: none; }
.r-role { font-size: 12px; color: var(--text-secondary); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.r-role b { font-weight: 600; color: var(--text-primary); }

.pill { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; color: #fff; }
.pill--run { background: var(--green-500); }
.pill--warn { background: var(--amber-500); }
.pill--maint { background: var(--blue-500); }
.pill--down { background: var(--red-500); }

.r-val { display: inline-flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.r-val b { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.r-val span { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.r-val--void b { color: var(--text-muted); }
.r-chev { color: var(--text-muted); font-size: 17px; line-height: 1; }

.r-alert {
  display: flex; align-items: flex-start; gap: 7px;
  padding: 6px 12px 8px 14px;
  font-size: 11px; font-weight: 600;
  background: var(--danger-bg); color: var(--danger-text, var(--red-600));
  border-left: 3px solid var(--red-500);
}
.r-alert--info { background: var(--bg-tertiary); color: var(--text-muted); border-left-color: var(--border-color); }

/* ── En-tête de ligne ───────────────────────────────────────────── */

.ligne-head {
  display: flex; align-items: center; gap: 11px;
  padding: 11px 13px; background: var(--surface-2, var(--bg-tertiary));
  border-bottom: 1px solid var(--border-color);
}
.ligne-badge {
  width: 27px; height: 27px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; color: #fff;
}
.ligne-badge--A { background: var(--accent-primary); }
.ligne-badge--B { background: #7C3AED; }
.ligne-id { flex: 1; min-width: 0; }
.ligne-n { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.ligne-s { font-size: 10.5px; color: var(--text-muted); margin-top: 1px; }
.ligne-yield { text-align: right; line-height: 1.15; }
.ligne-yield b { display: block; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ligne-yield span { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

.ms-code {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 800;
  color: var(--text-primary);
  letter-spacing: .3px;
}
.ms-code svg { color: var(--accent-primary); }
.ms-status { width: 9px; height: 9px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, .05); }
.ms-label {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.25;
}

/* Schéma compact à l'échelle réelle */
.ms-schema { margin: 1px 0 2px; }
.ms-schema svg { display: block; width: 100%; height: auto; border-radius: 4px; }
.ms-schema-cap { font-size: 8.5px; color: var(--text-muted); text-align: center; margin-top: 2px; }
.ms-schema-empty {
  font-size: 10px;
  color: var(--text-muted);
  text-align: center;
  padding: 10px 4px;
  border: 1px dashed var(--border-color);
  border-radius: 6px;
}

/* Fiche plein écran */
.ms-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(9, 20, 40, .55);
  backdrop-filter: blur(3px);
  display: none;
  padding: 12px;
  overflow: auto;
}
.ms-overlay.open { display: flex; align-items: flex-start; justify-content: center; }
.ms-sheet {
  width: 100%;
  max-width: 860px;
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: var(--shadow-soft-lg);
  padding: 14px 16px 20px;
  margin: auto;
}
.ms-sheet-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ms-sheet-code {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-primary);
  flex: none;
}
.ms-sheet-code svg { color: var(--accent-primary); }
.ms-sheet-tt { flex: 1; min-width: 0; }
.ms-sheet-t { font-size: 14px; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.ms-sheet-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.ms-sheet-close {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--bg-secondary);
  color: var(--text-secondary);
  font-size: 14px;
  cursor: pointer;
}
.ms-sheet-close:hover { background: var(--bg-tertiary); }

.ms-statusrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.ms-statusrow label { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.ms-status-sel { flex: none; width: auto; min-width: 170px; font-size: 12px; padding: 6px 9px; }
.ms-status-pill {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  padding: 3px 9px;
  border-radius: 999px;
}
.ms-sheet-alert {
  font-size: 11.5px;
  font-weight: 600;
  padding: 7px 10px;
  border-radius: 8px;
  margin-bottom: 12px;
}
.ms-sheet-alert.is-ok { background: var(--success-bg); color: var(--green-700); border: 1px solid var(--success-border); }
.ms-sheet-alert.is-bad { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger-border); }
.ms-sheet-block { margin-bottom: 14px; }
.ms-sheet-block h4 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 6px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.ms-sheet-block .ms-schema { padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 10px; }
body.ms-open { overflow: hidden; }

/* ── Fiche de production ────────────────────────────────────────── */

.fiche { display: flex; flex-direction: column; gap: 10px; }

.fb { border: 1px solid var(--border-color); border-radius: 10px; padding: 11px 13px; background: var(--surface-2, var(--bg-tertiary)); }
.fb-h { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.fb-t { font-size: 12px; font-weight: 700; color: var(--text-primary); }
.fb-of { font-size: 10.5px; color: var(--text-muted); }
.fb-open { font-size: 10.5px; font-weight: 600; color: var(--text-muted); background: none; border: 1px solid var(--border-color); border-radius: 6px; padding: 2px 8px; cursor: pointer; white-space: nowrap; }
.fb-open:active { background: var(--bg-tertiary); }
.fb-bar { display: flex; height: 30px; border-radius: 6px; overflow: hidden; background: var(--bg-tertiary); }
.fb-u, .fb-d, .fb-p { display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: #fff; min-width: 0; overflow: hidden; white-space: nowrap; }
.fb-u { background: var(--green-500); }
.fb-d { background: #F59E0B; }
.fb-p { background: #64748B; }
.fb-eq { margin-top: 8px; font-size: 11px; color: var(--text-secondary); }
.fb-eq b { color: var(--text-primary); }
.fb-eq--ko { color: var(--red-600); font-weight: 700; }

.blk { border: 1px solid var(--border-color); border-radius: 10px; overflow: hidden; }
.blk-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 13px; background: var(--surface-2, var(--bg-tertiary)); border-bottom: 1px solid var(--border-color); }
.blk-n { font-size: 11.5px; font-weight: 700; color: var(--text-primary); }
.blk-c { font-size: 10.5px; color: var(--text-muted); text-align: right; }

.tbl { width: 100%; border-collapse: collapse; font-size: 11px; }
.tbl th { padding: 7px 9px; text-align: left; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); border-bottom: 1px solid var(--border-color); }
.tbl td { padding: 7px 9px; border-bottom: 1px solid var(--border-color); color: var(--text-secondary); vertical-align: top; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tbl .ref { font-weight: 700; color: var(--text-primary); font-family: ui-monospace, monospace; }
.tbl .ts { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 10px; }
.tbl-empty { padding: 14px 13px; font-size: 11px; color: var(--text-muted); text-align: center; }
/* Lignes synthétiques : ce ne sont pas des mouvements du registre, ce sont des
   diagnostics calcules. Il ne faut pas qu'elles se lisent comme du bois. */
.tbl tr.is-surprod td { background: var(--danger-bg); color: var(--red-600); font-weight: 600; }
.tbl tr.is-noinput td { background: var(--bg-tertiary); color: var(--text-secondary); font-weight: 600; font-style: italic; }

.nat { display: inline-block; padding: 1px 6px; border-radius: 4px; font-size: 9.5px; font-weight: 700; }
.nat--grume-entree { background: var(--blue-500); color: #fff; }
.nat--semi-fini { background: var(--green-500); color: #fff; }
.nat--dosse { background: #B6602B; color: #fff; }
.nat--chute { background: #64748B; color: #fff; }

.mach { display: inline-block; min-width: 22px; padding: 1px 5px; border-radius: 4px; font-size: 9.5px; font-weight: 700; color: #fff; text-align: center; }
.mach--a1, .mach--a2, .mach--a3, .mach--a4 { background: var(--accent-primary); }
.mach--b1, .mach--b2, .mach--b3, .mach--b4 { background: #7C3AED; }

.fb-alert { margin: 9px 13px 11px; padding: 8px 10px; border-radius: 7px; font-size: 10.5px; line-height: 1.45; background: var(--bg-tertiary); color: var(--text-secondary); border: 1px solid var(--border-color); }
.fb-alert--ko { background: var(--danger-bg); border-color: var(--red-500); color: var(--red-600); font-weight: 600; }

@media (max-width: 420px) {
  .hide-xs { display: none; }
  .ms-row { grid-template-columns: 52px 1fr auto 12px; }
  .ms-row .pill { display: none; }
}

@media (max-width: 640px) {
  .ms-sheet { padding: 12px 12px 18px; border-radius: 14px; }
  .ms-overlay { padding: 6px; }
}





.nav-icon {
  font-size: 22px;
  line-height: 1;
}

.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100% - 32px);
}

.toast {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 200px;
  max-width: 100%;
  padding: 13px 40px 13px 13px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--glass-shadow);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
  animation: toastIn 0.35s ease;
}

.toast-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--success);
  padding-top: 1px;
}

.toast.error .toast-icon { color: var(--danger); }
.toast.warning .toast-icon { color: var(--warning); }
.toast.info .toast-icon { color: var(--info); }

.toast-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.toast-title {
  font-weight: 700;
  font-size: 13px;
  line-height: 1.3;
}

.toast-msg {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.85;
  line-height: 1.4;
  overflow-wrap: break-word;
}

.toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: currentColor;
  opacity: 0.55;
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
}

.toast-close:hover { opacity: 1; background: var(--hover-bg); }

.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
.toast.info { border-left-color: var(--info); }

.toast-progress {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2.5px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: left;
  background: var(--success);
}

.toast.error .toast-progress { background: var(--danger); }
.toast.warning .toast-progress { background: var(--warning); }
.toast.info .toast-progress { background: var(--info); }

.toast-progress.active { animation: toastProgress linear forwards; }

@keyframes toastProgress {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

.toast-exit {
  animation: toastOut 0.25s ease forwards;
}

@keyframes toastOut {
  to { opacity: 0; transform: translateX(100%); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 1000;
  animation: fadeIn 0.2s ease;
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg);
  padding: 28px;
  width: 100%;
  max-width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--glass-shadow);
  animation: modalIn 0.35s ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(0.95) translateY(20px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.modal-icon {
  font-size: 48px;
  text-align: center;
  margin-bottom: 16px;
}
.modal-icon svg {
  width: 48px;
  height: 48px;
  color: var(--accent-primary);
}
.epi-label-svg {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  vertical-align: -3px;
  color: var(--accent-primary);
}

.modal-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  text-align: center;
  margin-bottom: 12px;
}

.modal-message {
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
  line-height: 1.6;
  margin-bottom: 24px;
}

.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.diagram-zoom-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15,10,5,0.85);
  backdrop-filter: blur(6px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 0;
  z-index: 1100;
  overflow-y: auto;
  animation: fadeIn 0.2s ease;
}
.diagram-zoom-overlay.open { display: flex; }

.diagram-zoom-panel {
  background: var(--bg-primary);
  border-radius: 0;
  width: 100%;
  max-width: 100%;
  min-height: 100vh;
  margin: 0;
  box-shadow: none;
  animation: modalIn 0.3s ease;
  overflow: visible;
}

.diagram-zoom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: var(--accent-gradient);
  color: white;
  font-weight: 700;
  font-size: 15px;
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.diagram-zoom-close {
  width: 32px; height: 32px;
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 16px;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.diagram-zoom-close:hover { background: rgba(255,255,255,0.32); }

.diagram-zoom-print {
  border-radius: 10px;
  border: none;
  background: rgba(255,255,255,0.2);
  color: white;
  font-size: 12.5px;
  font-weight: 700;
  padding: 0 14px;
  height: 32px;
  cursor: pointer;
  backdrop-filter: blur(10px);
  white-space: nowrap;
}
.diagram-zoom-print:hover { background: rgba(255,255,255,0.32); }

.diagram-zoom-print-header {
  display: none;
  align-items: center;
  gap: 14px;
  padding: 6px 4px 16px;
  border-bottom: 2.5px solid #1f2937;
  margin-bottom: 14px;
}
.print-header-logo { height: 52px; width: auto; object-fit: contain; }
.print-header-title { font-size: 17px; font-weight: 800; color: #111827; letter-spacing: 0.02em; }
.print-header-sub { font-size: 11px; color: #6b7280; margin-top: 2px; }

.diagram-zoom-body {
  padding: 10px;
  overflow: visible;
}
.diagram-zoom-body svg { width: 100%; height: auto; max-width: 100%; }
.diagram-zoom-body .diagram-container { box-shadow: none; padding: 0; overflow: visible; }
.diagram-zoom-body .diagram-body { overflow-x: auto; }

.diagram-click-hint {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  cursor: pointer;
  user-select: none;
}
.diagram-click-hint:hover { color: var(--accent-primary); }

.pdf-viewer-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  display: none;
  flex-direction: column;
  z-index: 2000;
}
.pdf-viewer-overlay.open { display: flex; }
.pdf-viewer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  background: #1f2937;
  color: white;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.pdf-viewer-title { flex: 1; }
.pdf-viewer-body {
  flex: 1;
  overflow: auto;
  background: #525659;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10px;
}
.pdf-viewer-body img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}

.zoom-detail-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 18px;
  font-size: 13.5px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  overflow: hidden;
}
.zoom-detail-table tr:nth-child(even) { background: var(--bg-tertiary); }
.zoom-detail-table td {
  padding: 10px 10px;
  border-bottom: 1px solid var(--border-color);
}
.zoom-detail-table td:first-child { color: var(--text-secondary); font-weight: 500; }
.zoom-detail-table td:last-child { text-align: right; font-weight: 700; color: var(--text-primary); }
.zoom-detail-table tr.highlight td { color: var(--accent-primary); background: var(--accent-light) !important; }

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tool-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}

.tool-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
}

.tool-card:active {
  transform: translateY(-2px);
}

.tool-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.tool-icon svg {
  width: 36px;
  height: 36px;
  color: var(--accent-primary);
}

.tool-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.calc-display {
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: right;
  font-size: 28px;
  font-weight: 700;
  font-family: 'Inter', monospace;
  color: var(--text-primary);
  margin-bottom: 12px;
  min-height: 56px;
  word-break: break-all;
}

.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.calc-btn {
  aspect-ratio: 1;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 18px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
}

.calc-btn:hover { background: rgba(255,255,255,0.1); }
.calc-btn:active { transform: scale(0.95); }

.calc-btn.operator {
  background: var(--accent-light);
  color: var(--accent-primary);
}

.calc-btn.equals {
  background: var(--accent-gradient);
  color: white;
}

.calc-btn.clear {
  background: var(--danger-bg);
  color: var(--danger);
}

.notepad-textarea {
  width: 100%;
  min-height: 200px;
  padding: 16px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-family: inherit;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  resize: vertical;
  line-height: 1.6;
}

.notepad-textarea:focus {
  outline: none;
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px var(--accent-light), var(--shadow-glow);
}

.notepad-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.empty-state {
  text-align: center;
  padding: 48px 20px;
  color: var(--text-muted);
}

.empty-state-icon {
  font-size: 56px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-text {
  font-size: 14px;
}

.lateral-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}

.lateral-input-row input {
  flex: 1;
}

.remove-lateral-btn {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  background: var(--danger-bg);
  color: var(--danger);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.remove-lateral-btn:hover {
  background: var(--danger);
  color: white;
}

.add-lateral-btn {
  width: 100%;
  padding: 12px;
  border: 2px dashed var(--border-color);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--accent-primary);
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.add-lateral-btn:hover {
  border-color: var(--accent-primary);
  background: var(--accent-light);
}

.segmented {
  display: inline-flex;
  padding: 4px;
  background: var(--glass-bg);
  border: 1px solid var(--border-color);
  border-radius: 999px;
  gap: 4px;
  position: relative;
}
.segmented button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.segmented button.active {
  background: var(--accent-gradient);
  color: #fff;
  box-shadow: 0 2px 10px rgba(5,150,105,0.35);
}
.segmented button:not(.active):hover {
  color: var(--accent-primary);
  background: var(--accent-light);
}

.pp-machine-seg {
  width: 100%;
  border-radius: 14px;
}
.pp-machine-seg button {
  flex: 1;
  justify-content: center;
  padding: 8px 10px;
  font-size: 12px;
}
.pp-machine-ops {
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--accent-primary, #2e7d32);
  background: var(--glass-bg);
  border-radius: 12px;
  padding: 10px 12px;
  margin-bottom: 16px;
}
.pp-ops-header {
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-primary, #2e7d32);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.machine-card {
  margin-bottom: 10px;
  padding: 12px;
}
.machine-card:active {
  transform: scale(0.99);
}
.machine-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.machine-card-header strong {
  color: var(--text-primary);
}
.machine-card-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.machine-card-body span {
  font-size: 13px;
}
.machine-card-body strong {
  color: var(--accent-primary);
}

.config-preview {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  padding: 14px;
  margin-top: 12px;
}

.config-preview-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 10px;
}

.config-preview-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--border-color);
}

.config-preview-row:last-child {
  border-bottom: none;
}

.config-preview-row strong {
  color: var(--text-primary);
}

.stock-table {
  width: 100%;
}

.stock-row {
  display: grid;
  grid-template-columns: 1fr 70px 1fr;
  gap: 8px;
  align-items: center;
  padding: 10px 4px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 13px;
}

.stock-row-header {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--glass-border);
}

.stock-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  background: var(--glass-bg);
  color: var(--text-primary);
  font-family: inherit;
  backdrop-filter: blur(4px);
}

.stock-status {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 12px;
  text-align: center;
}

.stock-status.ok {
  background: var(--success-bg);
  color: var(--success);
}

.stock-status.warn {
  background: var(--danger-bg);
  color: var(--danger);
}

.dt-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.dt-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
}

.dt-search {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--text-primary);
  font-family: inherit;
  font-size: 13px;
}

.dt-save-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  padding: 0;
}

.dt-save-btn:hover { color: var(--primary); background: var(--hover-bg); }

.saved-queries {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.sq-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.sq-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
  max-width: 200px;
}

.sq-chip:hover { border-color: var(--primary); }
.sq-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }

.status-filter-bar { display: flex; gap: 6px; flex-wrap: wrap; }
.status-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-primary);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  cursor: pointer;
}
.status-chip:hover { border-color: var(--primary); }
.status-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.status-chip[data-status="draft"]:not(.active) { border-color: #94a3b8; color: #64748b; }
.status-chip[data-status="engage"]:not(.active) { border-color: #3b82f6; color: #2563eb; }
.status-chip[data-status="realise"]:not(.active) { border-color: #059669; color: #059669; }
.status-chip[data-status="annule"]:not(.active) { border-color: #dc2626; color: #dc2626; }

.sq-chip-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  opacity: 0.55;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}

.sq-chip-del:hover { opacity: 1; }

.dt-table {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
}

.dt-head {
  display: grid;
  grid-template-columns: 28px 1.4fr 1.3fr 0.8fr 0.8fr 96px;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--glass-border);
}

.dt-row {
  display: grid;
  grid-template-columns: 28px 1.4fr 1.3fr 0.8fr 0.8fr 96px;
  gap: 6px;
  align-items: center;
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--glass-border);
  cursor: pointer;
  transition: background 0.15s;
}

.dt-row:last-child {
  border-bottom: none;
}

.dt-row:hover {
  background: var(--hover-bg, rgba(255,255,255,0.04));
}

.dt-row.selected {
  background: var(--accent-soft, rgba(79,191,92,0.08));
}

.dt-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  font-size: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}

.dt-sort-btn:hover {
  color: var(--text-primary);
}

.dt-sort-btn.sorted {
  color: var(--accent, var(--primary));
}

.dt-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary, #2e7d32);
  cursor: pointer;
}

.bulk-actions-toolbar {
  position: sticky;
  bottom: 72px;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--accent, var(--primary));
  border-radius: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}

.bulk-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pp-head {
  grid-template-columns: 28px 78px 1.4fr 1.1fr 92px;
}

.pp-row {
  grid-template-columns: 28px 78px 1.4fr 1.1fr 92px;
}

.pp-ref {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
}

.pp-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--glass-border);
}

.pp-task-row:last-child {
  border-bottom: none;
}

.warning-box {
  background: var(--danger-bg);
  border-left: 4px solid var(--danger);
  color: var(--danger);
  padding: 14px 16px;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 13px;
  margin-top: 16px;
  animation: shake 0.4s ease;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

.of-summary {
  background: var(--glass-card-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 10px 12px;
  font-size: 12px;
  color: var(--text-secondary);
  backdrop-filter: blur(var(--glass-blur));
}

.export-section {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-top: 16px;
  box-shadow: var(--glass-shadow);
}

.export-section h4 {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}

.export-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* Paramètres divers */
.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-color);
}
.settings-row:last-of-type {
  border-bottom: none;
}
.settings-row-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}
.settings-row-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}
.settings-row-stack {
  align-items: flex-start;
  flex-direction: column;
}
.settings-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
}
.settings-actions .btn {
  flex: 1;
  min-width: 70px;
}
.settings-about {
  margin-top: 12px;
  padding: 12px;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
}
.settings-about-line {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  padding: 3px 0;
  color: var(--text-muted);
}
.settings-about-line b {
  color: var(--text-primary);
}

/* Toggle switch */
.switch {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--bg-tertiary);
  border-radius: 24px;
  transition: 0.3s;
}
.switch-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background: var(--text-muted);
  border-radius: 50%;
  transition: 0.3s;
}
.switch input:checked + .switch-slider {
  background: var(--accent-primary, #2e7d32);
}
.switch input:checked + .switch-slider:before {
  transform: translateX(18px);
  background: #fff;
}


.print-tab-header {
  display: none;
}

@media print {
  @page {
    size: A4 portrait;
    margin: 8mm 10mm;
  }
  
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
  
  body {
    background: white !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  
  .no-print { display: none !important; }
  
  .app-container {
    box-shadow: none !important;
    max-width: 100% !important;
    min-width: 270mm !important;
    margin: 0 auto !important;
    border: none !important;
    border-radius: 0 !important;
    background: white !important;
  }
  
  .print-tab-header {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 0 0 10px 0;
    margin-bottom: 14px;
    border-bottom: 2.5px solid #1f2937;
  }
  .print-tab-header img {
    height: 40px;
    width: auto;
    object-fit: contain;
  }
  .print-tab-header-text .print-tab-title {
    font-size: 15px;
    font-weight: 800;
    color: #111827;
    letter-spacing: 0.02em;
  }
  .print-tab-header-text .print-tab-sub {
    font-size: 10.5px;
    color: #6b7280;
    margin-top: 1px;
  }
  
  .screen { 
    display: block !important; 
    overflow: visible !important;
    padding: 0 !important;
  }
  
  .screen:not(.active) { display: none !important; }
  
  .result-panel {
    display: block !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    page-break-inside: avoid;
    box-shadow: none !important;
    margin-top: 10px !important;
  }
  
  .diagram-container {
    page-break-inside: avoid;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    margin-top: 14px !important;
  }
  
  .diagram-header {
    background: #1f2937 !important;
    color: white !important;
    font-size: 11px !important;
    padding: 7px 12px !important;
    -webkit-print-color-adjust: exact !important;
  }
  
  .diagram-body {
    padding: 10px 8px !important;
    background: white !important;
  }
  
  .diagram-body svg {
    width: 100% !important;
    height: auto !important;
    max-height: 55vh !important;
  }
  
  .diagram-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 6px 12px !important;
    font-size: 9.5px !important;
  }
  
  .zoom-detail-table {
    page-break-inside: avoid;
    width: 100% !important;
    font-size: 11px !important;
  }
  
  .yield-rate {
    page-break-inside: avoid;
  }
  
  .chute-split {
    page-break-inside: avoid;
  }

  body.print-zoom-mode .app-container > * {
    display: none !important;
  }
  body.print-zoom-mode #diagramZoomOverlay {
    display: flex !important;
    position: fixed !important;
    top: 0; left: 0; right: 0; bottom: 0;
    background: white !important;
    padding: 0 !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    z-index: 1 !important;
  }
  body.print-zoom-mode #diagramZoomOverlay .diagram-zoom-close {
    display: none !important;
  }
  body.print-zoom-mode .diagram-zoom-panel {
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    min-height: auto !important;
    margin: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    animation: none !important;
    overflow: visible !important;
    background: white !important;
  }
  body.print-zoom-mode .diagram-zoom-header { display: none !important; }
  body.print-zoom-mode .diagram-zoom-print-header { display: flex !important; }
  body.print-zoom-mode .diagram-zoom-body {
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
  }
  body.print-zoom-mode .diagram-zoom-body .diagram-container {
    border: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    page-break-inside: auto;
  }
  body.print-zoom-mode .diagram-zoom-body .diagram-body {
    padding: 0 !important;
    overflow: visible !important;
  }
  body.print-zoom-mode .diagram-zoom-body .diagram-header {
    background: #1f2937 !important;
    color: white !important;
    padding: 8px 14px !important;
    -webkit-print-color-adjust: exact !important;
  }
  body.print-zoom-mode .diagram-zoom-body .diagram-footer {
    background: #f9fafb !important;
    border-top: 1px solid #e5e7eb !important;
    padding: 6px 14px !important;
    font-size: 9.5px !important;
  }
  body.print-zoom-mode .diagram-zoom-body svg {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  body.print-zoom-mode .zoom-detail-table {
    page-break-inside: avoid;
    width: 100% !important;
  }
  body.print-zoom-mode .diagram-zoom-body .diagram-container .diagram-body svg {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }
  body.print-zoom-mode .diagram-zoom-body h4 {
    page-break-inside: avoid;
  }
}

*:focus-visible {
  outline: 3px solid var(--accent-primary);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════
   MODERN UI v7.0 — Skeleton, FAB, Alerts, Sparklines
   ═══════════════════════════════════════════════ */

/* Skeleton loading */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--border-color) 50%, var(--bg-tertiary) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
.skeleton-line { height: 14px; margin-bottom: 8px; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w80 { width: 80%; }
.skeleton-circle { width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0; }

/* Conteneur de squelette (branché par modules/ui-skeleton.js) */
.skeleton-wrap { display: block; width: 100%; }
.skeleton-block-card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 12px; margin-bottom: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.skeleton-block-card .skeleton-line { margin-bottom: 0; }
.skeleton-row {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-sm);
}
.skeleton-row .skeleton-line { margin-bottom: 0; height: 12px; }

/* Texte reserve aux lecteurs d'ecran (labels de squelette) */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Floating Action Button */
.fab {
  position: fixed;
  bottom: 80px;
  right: calc(50% - 250px + 16px);
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: var(--accent-gradient);
  color: #fff;
  font-size: 22px;
  border: none;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(168,110,54,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.fab:active { transform: scale(0.9) rotate(90deg); }
.fab.hidden { opacity: 0; transform: scale(0) rotate(180deg); pointer-events: none; }
@media (max-width: 639px) {
  .fab { right: 16px; }
}

@keyframes pulse-badge {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.15); }
}

/* Smart Alerts panel */
.alerts-panel {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  border: 1px solid var(--glass-card-border);
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: var(--glass-shadow);
}
.alerts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
}
.alerts-header h4 {
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}
.alert-count {
  font-size: 11px;
  font-weight: 700;
  background: var(--danger);
  color: #fff;
  padding: 1px 7px;
  border-radius: 10px;
  min-width: 20px;
  text-align: center;
}
.alert-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--glass-border);
  transition: var(--transition);
  cursor: pointer;
}
.alert-item:last-child { border-bottom: none; }
.alert-item:active { background: rgba(255,255,255,0.05); }
.alert-item .alert-icon {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.alert-item .alert-icon.warning { background: var(--warning-bg); }
.alert-item .alert-icon.danger { background: var(--danger-bg); }
.alert-item .alert-icon.info { background: var(--info-bg); }
.alert-item .alert-icon.success { background: var(--success-bg); }
.alert-item .alert-body { flex: 1; min-width: 0; }
.alert-item .alert-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}
.alert-item .alert-desc {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 1px;
}
.alert-item .alert-time {
  font-size: 10px;
  color: var(--text-muted);
  white-space: nowrap;
}
.alerts-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}

/* KPI cards v2 — modern with sparkline */
.kpi-grid-v2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

/* ===== Dashboard v2 — Verre premium (PD Direction B) ===== */
.v2-dash {
  position: relative;
}
.v2-dash::before {
  content: '';
  position: absolute;
  inset: -20px -12px;
  background:
    radial-gradient(420px 180px at 10% 0%, var(--v9-halo-1), transparent 65%),
    radial-gradient(380px 160px at 95% 4%, var(--v9-halo-2), transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.v2-dash > * {
  position: relative;
  z-index: 1;
}
.v2-section {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0 12px;
}
.v2-section-title {
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--text-secondary);
}
.v2-section-rule {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--v2-rule), transparent);
}
.v2-hero {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
}
.v2-hero-card {
  position: relative;
  background: var(--v9-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 14px 12px;
  overflow: hidden;
  box-shadow: var(--v9-shadow);
  animation: v2FadeUp 0.5s ease both;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.v2-hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px var(--v9-glow-1);
}
.v2-hero-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--v2-rule), transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.v2-hero-card::after {
  content: '';
  position: absolute;
  top: -34px;
  left: 18%;
  right: 18%;
  height: 64px;
  background: radial-gradient(closest-side, var(--v2-glow), transparent);
  pointer-events: none;
}
.v2-hero-card:nth-child(2) { animation-delay: 0.08s; }
.v2-hero-card:nth-child(3) { animation-delay: 0.16s; }
.v2-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.v2-hero-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2-hero-value {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.v2-hero-value.grad-1 { background: var(--v9-grad-1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-hero-value.grad-2 { background: var(--v9-grad-2); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-hero-value.grad-3 { background: var(--v9-grad-3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.v2-hero-icon {
  box-shadow: 0 4px 12px var(--v9-glow-1);
}
.v2-hero-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-muted);
  margin-top: 4px;
}
.v2-hero-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}
.v2-hero-spark {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 30px;
  opacity: 0.45;
}
.v2-hero-divider {
  height: 1px;
  background: linear-gradient(90deg, var(--v2-rule), transparent);
  margin: 6px 0;
}
.v2-flow {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2-flow-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  border-left: 3px solid var(--brand-green);
  min-height: 48px;
  animation: v2FadeUp 0.5s ease both;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.v2-flow-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--v9-glow-1);
}
.v2-flow-card:nth-child(2) { animation-delay: 0.1s; }
.v2-flow-card:nth-child(3) { animation-delay: 0.2s; }
.v2-flow-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-flow-body { flex: 1; min-width: 0; }
.v2-flow-label {
  font-size: 10px;
  color: var(--text-secondary);
  font-weight: 600;
}
.v2-flow-value {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.v2-flow-sub { font-size: 10px; color: var(--text-muted); }
.v2-flow-trend { flex-shrink: 0; }
.v2-extra-grid {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.v2-extra-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  min-height: 56px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  animation: v2FadeUp 0.5s ease both;
}
.v2-extra-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px var(--v9-glow-1);
}
.v2-extra-card:nth-child(2) { animation-delay: 0.05s; }
.v2-extra-card:nth-child(3) { animation-delay: 0.1s; }
.v2-extra-card:nth-child(4) { animation-delay: 0.15s; }
.v2-extra-card:nth-child(5) { animation-delay: 0.2s; }
.v2-extra-card:nth-child(6) { animation-delay: 0.25s; }
.v2-extra-card:active {
  transform: scale(0.96);
  box-shadow: 0 4px 18px rgba(5,150,105,0.25);
}
.v2-extra-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-extra-body { flex: 1; min-width: 0; }
.v2-extra-value {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.v2-extra-label {
  font-size: 9.5px;
  color: var(--text-secondary);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.v2-panel {
  margin-top: 10px;
  position: relative;
  background: var(--v9-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  overflow: hidden;
  box-shadow: var(--v9-shadow);
  animation: v2FadeUp 0.5s ease both;
}
.v2-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--v2-rule), transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.v2-panel-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.v2-panel-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--v2-rule), transparent);
}
.v2-gauges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.v2-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  animation: v2FadeUp 0.5s ease both;
}
.v2-gauge:nth-child(2) { animation-delay: 0.1s; }
.v2-gauge:nth-child(3) { animation-delay: 0.2s; }
.v2-gauge-label {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}
@keyframes v2FadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ===== /Dashboard v2 ===== */

.kpi-card-v2 {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 14px;
  border: 1px solid var(--glass-card-border);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}
.kpi-card-v2:active { transform: scale(0.97); }
.kpi-card-v2 .kpi-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.kpi-card-v2 .kpi-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.kpi-card-v2 .kpi-trend {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
}
.kpi-card-v2 .kpi-trend.up { color: var(--success); background: var(--success-bg); }
.kpi-card-v2 .kpi-trend.down { color: var(--danger); background: var(--danger-bg); }
.kpi-card-v2 .kpi-trend.neutral { color: var(--text-muted); background: var(--info-bg); }
.kpi-card-v2 .kpi-value {
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 2px;
}
.kpi-card-v2 .kpi-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-secondary);
}
.kpi-card-v2 .kpi-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
}
.kpi-card-v2 .kpi-sparkline {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 32px;
  opacity: 0.3;
}

/* ===== Dashboard Dense — Direction C (PD) ===== */
.v2-grid-dense {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.v2-mini {
  position: relative;
  background: var(--v9-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 11px 12px;
  overflow: hidden;
  box-shadow: var(--v9-shadow);
  animation: v2FadeUp 0.5s ease both;
}
.v2-mini::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--v2-rule), transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.v2-mini:nth-child(2) { animation-delay: 0.06s; }
.v2-mini:nth-child(3) { animation-delay: 0.12s; }
.v2-mini:nth-child(4) { animation-delay: 0.18s; }
.v2-mini-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.v2-mini-lbl {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--text-muted);
}
.v2-mini-ic {
  width: 22px;
  height: 22px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.v2-mini-ic svg { width: 12px; height: 12px; }
.v2-mini-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}
.v2-mini-sub {
  font-size: 9px;
  color: var(--text-muted);
  margin-top: 3px;
}
.v2-bar {
  height: 6px;
  border-radius: 99px;
  background: var(--v9-track);
  overflow: hidden;
  margin-top: 8px;
}
.v2-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
}
.v2-bar-row {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 5px;
}
.v2-bar-row .stroke { color: var(--text-secondary); font-weight: 700; }
.v2-donut-wrap {
  display: grid;
  grid-template-columns: 104px 1fr;
  gap: 12px;
  align-items: center;
}
.v2-donut {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
}
.v2-donut::after {
  content: '';
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: #0e1728;
}
.v2-donut-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.v2-donut-center b {
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
}
.v2-donut-center span {
  font-size: 8px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.v2-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.v2-lg {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--text-secondary);
}
.v2-lg i {
  width: 9px;
  height: 9px;
  border-radius: 3px;
  flex-shrink: 0;
}
.v2-lg .p {
  font-size: 9px;
  color: var(--text-muted);
  width: 34px;
  text-align: right;
}
.v2-lg .v {
  margin-left: auto;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}
.v2-eq-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.v2-eq-tile {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 10px;
}
.v2-eq-tile .v2-mini-lbl { display: block; margin-bottom: 5px; }
.v2-eq-tile .v2-mini-value { font-size: 20px; }
.v2-alert-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 12px;
}
.v2-alert-head .chip-danger {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger, #ef4444);
  background: rgba(239,68,68,0.13);
  border: 1px solid rgba(239,68,68,0.3);
  padding: 4px 10px;
  border-radius: 99px;
}
.v2-alert-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}
.v2-alert-chip {
  font-size: 9px;
  border-radius: 10px;
  padding: 7px 9px;
  line-height: 1.4;
}
.v2-alert-chip b { font-size: 12px; margin-right: 4px; }

/* ===== Dashboard Dense — conformité maquette Direction C ===== */
.v2-hero-spark-bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 24px;
  margin-top: 9px;
}
.v2-hero-spark-bars i {
  flex: 1;
  min-width: 0;
  border-radius: 2px 2px 0 0;
  background: var(--brand-green);
}
.v2-pill {
  font-size: 10px;
  font-weight: 700;
  color: var(--brand-green);
  background: rgba(5,150,105,0.14);
  border: 1px solid rgba(5,150,105,0.3);
  padding: 2px 8px;
  border-radius: 99px;
  margin-left: 6px;
  white-space: nowrap;
}
.v2-section-v1 { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.v2-section-v1 .v2-section-title { line-height: normal; }
/* Mini cards conformes maquette (grid2) */
.v2-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
@media (max-width: 360px) {
  .v2-grid2 { grid-template-columns: 1fr; }
}
/* Panel carte conforme maquette (donut + bar) */
.v2-panel-maquette {
  position: relative;
  background: var(--v9-card);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--radius-md);
  box-shadow: var(--v9-shadow);
  padding: 14px;
  overflow: hidden;
}
.v2-panel-maquette::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(160deg, var(--v2-rule), transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}
.v2-panel-maquette::after {
  content: '';
  position: absolute;
  top: -34px;
  left: 18%;
  right: 18%;
  height: 64px;
  background: radial-gradient(closest-side, var(--v9-glow-1), transparent);
  pointer-events: none;
}
/* Tiles équipements conformes maquette */
.v2-flexb { display: flex; gap: 10px; }
.v2-eq-box {
  flex: 1;
  background: rgba(255,255,255,0.03);
  border-radius: 12px;
  padding: 10px;
}
.v2-alert-head-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 14px;
}
.v2-alert-count {
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 99px;
  color: var(--danger, #ef4444);
  background: var(--danger-bg, rgba(239,68,68,0.14));
}
/* Danger trend pill conforme maquette */
.v2-trend-danger {
  font-size: 11px;
  font-weight: 700;
  color: var(--danger, #ef4444);
  background: var(--danger-bg, rgba(239,68,68,0.14));
  padding: 4px 10px;
  border-radius: 99px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.of-chart-svg text {
  font-family: inherit;
}

.recent-orders {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--glass-border);
  font-size: 12px;
}

.recent-row:last-child {
  border-bottom: none;
}

.recent-num {
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}

.recent-date {
  flex: 1;
  color: var(--text-muted);
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recent-empty {
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 4px;
}

.glass-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  box-shadow: var(--glass-shadow);
}

/* Quick stats row */
.quick-stats {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  margin-bottom: 16px;
  scroll-snap-type: x mandatory;
}
.quick-stats::-webkit-scrollbar { display: none; }
.quick-stat {
  flex-shrink: 0;
  scroll-snap-align: start;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 140px;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}
.quick-stat:active { transform: scale(0.97); }
.quick-stat .qs-icon {
  font-size: 20px;
}
.quick-stat .qs-info .qs-value {
  font-size: 16px;
  font-weight: 800;
}
.quick-stat .qs-info .qs-label {
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}

/* Progress bar */
.progress-bar {
  width: 100%;
  height: 6px;
  background: var(--bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
  margin-top: 6px;
}
.progress-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Section header with action */
.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.section-header h4 {
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.section-header h4::before {
  content: '';
  width: 4px; height: 16px; border-radius: 2px;
  background: linear-gradient(180deg, #10B981, #059669);
}
.section-action {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent-primary);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--transition);
  background: none;
  border: none;
}
.section-action:active { background: var(--accent-light); }

/* Improved card hover */
.card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 16px;
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--glass-shadow);
  transition: var(--transition);
}

/* Bottom sheet modal */
.bottom-sheet {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) translateY(100%);
  width: 100%;
  max-width: 100%;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -8px 32px rgba(0,0,0,0.2);
  z-index: 500;
  transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1);
  max-height: 70vh;
  overflow-y: auto;
  padding: 8px 20px 24px;
}
.bottom-sheet.open { transform: translateX(-50%) translateY(0); }
.bottom-sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-color);
  border-radius: 2px;
  margin: 0 auto 12px;
}

/* Enhanced module card */
.module-card {
  position: relative;
  overflow: hidden;
}
.module-card::after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(168,110,54,0.06) 0%, transparent 70%);
  pointer-events: none;
  transition: var(--transition);
}
.module-card:active::after {
  background: radial-gradient(circle, rgba(168,110,54,0.12) 0%, transparent 70%);
}

/* Swipe hint animation */
@keyframes swipe-hint {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-4px); }
}

/* Smart search bar */
.smart-search {
  position: relative;
  margin-bottom: 16px;
}
.smart-search input {
  width: 100%;
  padding: 12px 14px 12px 38px;
  border: 1.5px solid var(--glass-border);
  border-radius: var(--radius-sm);
  font-size: 13px;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  color: var(--text-primary);
  transition: var(--transition);
}
.smart-search input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(168,110,54,0.12);
  outline: none;
}
.smart-search .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  opacity: 0.4;
}

/* Quality check item */
.qc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-card-border);
  border-radius: 10px;
  margin-bottom: 6px;
  transition: var(--transition);
}
.qc-item:last-child { margin-bottom: 0; }
.qc-item .qc-status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.qc-item .qc-status.pass { background: var(--success); }
.qc-item .qc-status.fail { background: var(--danger); }
.qc-item .qc-status.pending { background: var(--warning); }

/* Supplier/Client chip */
.entity-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 2px;
  transition: var(--transition);
}
.entity-chip .chip-remove {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--danger-bg);
  color: var(--danger);
  border: none;
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}
.entity-chip .chip-remove:active { background: var(--danger); color: #fff; }

/* Tab switcher */
.tab-switcher {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  margin-bottom: 12px;
}
.tab-switcher button {
  flex: 1;
  padding: 8px 12px;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.tab-switcher button.active {
  background: var(--glass-card-bg);
  backdrop-filter: blur(4px);
  color: var(--accent-primary);
  box-shadow: var(--glass-shadow);
  border: 1px solid var(--accent-green-light);
}
.tab-switcher button:not(.active):hover {
  color: var(--accent-primary);
  background: var(--accent-light);
}

/* === AUTH SYSTEM === */
.auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  background: radial-gradient(ellipse at 18% 0%, rgba(37,99,235,0.12) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(96,165,250,0.14) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.55) 0%, transparent 70%),
    #F5F8FF;
  transition: opacity 0.35s ease, visibility 0.35s ease;
  overflow: hidden;
}
#authParticles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.6;
}
.auth-overlay.hidden { visibility: hidden; opacity: 0; pointer-events: none; }
.auth-overlay.visible { visibility: visible; opacity: 1; pointer-events: auto; }
.auth-overlay.visible ~ .orbital-fab { display: none; }

.auth-bg-art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 0;
}
.auth-bg-art svg {
  width: 320px;
  height: 320px;
  opacity: 0.42;
  animation: authPulse 8s ease-in-out infinite;
}
@keyframes authPulse {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.42; }
  50% { transform: scale(1.05) rotate(3deg); opacity: 0.6; }
}

.auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  background: rgba(255,255,255,0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(37,99,235,0.16);
  border-radius: 20px;
  padding: 34px 32px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(11,18,32,0.12), 0 0 60px rgba(37,99,235,0.10);
}
.auth-logo {
  width: 200px;
  margin: 0 auto 8px;
  display: flex; align-items: center; justify-content: center;
}
.auth-logo-img {
  width: 400px;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 6px 28px rgba(37,99,235,0.35));
}
.auth-card h2 {
  font-size: 24px; font-weight: 700; margin: 0 0 4px;
  color: #0B1220;
  font-family: var(--font-body);
}
.auth-sub {
  font-size: 13px; color: rgba(11,18,32,0.55); margin-bottom: 28px;
  font-family: var(--font-body);
}

/* Forms */
.auth-field {
  position: relative; margin-bottom: 16px;
}
.input-wrap {
  position: relative;
  display: block;
}
.input-wrap input {
  width: 100%; padding: 18px 16px 8px 44px;
  border: 1px solid rgba(37,99,235,0.20); border-radius: 10px;
  font-size: 14px; background: rgba(255,255,255,0.75);
  color: #0B1220; transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
  box-sizing: border-box;
  font-family: var(--font-body);
  letter-spacing: 0.3px;
  position: relative;
  z-index: 1;
}
.input-wrap input::placeholder { color: transparent; }
.input-wrap input:focus {
  border-color: rgba(37,99,235,0.55); outline: none;
  background: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}
.input-label {
  position: absolute;
  left: 44px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: rgba(11,18,32,0.45);
  font-family: var(--font-body);
  pointer-events: none;
  transition: all 0.2s ease;
  z-index: 2;
  letter-spacing: 0.3px;
}
.input-wrap input:focus + .input-label,
.input-wrap input:not(:placeholder-shown) + .input-label {
  top: 8px;
  transform: translateY(0);
  font-size: 10px;
  color: #2563EB;
}
.input-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 0;
}
.input-wrap:hover::after {
  opacity: 1;
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(37,99,235,0.08) 0%, transparent 70%);
}
.auth-field .field-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  pointer-events: none; opacity: 0.55;
  display: flex; align-items: center;
  z-index: 2;
}
.auth-field .field-icon svg {
  width: 18px; height: 18px;
  stroke: #2563EB; stroke-width: 1.5; fill: none;
}

/* Password toggle */
.pw-toggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  color: rgba(11,18,32,0.35); padding: 4px;
  z-index: 2; display: flex;
  transition: color 0.2s;
}
.pw-toggle:hover { color: rgba(11,18,32,0.65); }

/* Auth button with shimmer */
.auth-btn {
  width: 100%; padding: 14px; border: none; border-radius: 12px;
  background: linear-gradient(135deg, #60A5FA 0%, #2563EB 50%, #1E57D2 100%);
  color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
  position: relative; overflow: hidden;
  transition: opacity 0.3s, transform 0.2s, box-shadow 0.3s; margin-top: 8px;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 24px rgba(37,99,235,0.30), 0 2px 8px rgba(37,99,235,0.18);
  font-family: var(--font-body);
}
.auth-btn:hover { opacity: 0.94; transform: translateY(-1px); box-shadow: 0 10px 30px rgba(37,99,235,0.40), 0 2px 8px rgba(37,99,235,0.22); }
.auth-btn:active { transform: scale(0.98); }
.auth-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }
.auth-btn .btn-shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: translateX(-100%);
  transition: none;
}
.auth-btn:hover .btn-shimmer {
  transform: translateX(100%);
  transition: transform 0.8s ease-in-out;
}
.auth-btn .btn-loading {
  display: none; position: absolute; inset: 0;
  align-items: center; justify-content: center;
}
.auth-btn.loading .btn-text { visibility: hidden; }
.auth-btn.loading .btn-loading { display: flex; }
.auth-btn .btn-loading svg { animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.auth-error {
  font-size: 12px; color: #F87171;
  margin-top: 10px; min-height: 16px; text-align: center;
}

/* Remember me row */
.auth-row {
  display: flex; align-items: center; justify-content: space-between;
  margin: 12px 0 8px;
}
.auth-check {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; user-select: none;
}
.auth-check input[type="checkbox"] {
  width: 17px; height: 17px; margin: 0;
  accent-color: #2563EB;
  cursor: pointer;
}
.auth-check span {
  font-size: 13px; color: rgba(11,18,32,0.55);
  font-family: var(--font-body);
}

/* Social login */
.auth-divider {
  display: flex; align-items: center;
  margin: 20px 0 16px;
}
.auth-divider::before,
.auth-divider::after {
  content: ''; flex: 1;
  border-top: 1px solid rgba(37,99,235,0.12);
}
.auth-divider span {
  font-size: 12px; color: rgba(11,18,32,0.35);
  padding: 0 12px;
  font-family: var(--font-body);
}
.auth-social {
  display: flex; gap: 10px; justify-content: center;
}
.auth-social-btn {
  flex: 1; padding: 10px;
  border: 1px solid rgba(37,99,235,0.14);
  border-radius: 10px; background: rgba(255,255,255,0.65);
  cursor: pointer; transition: all 0.3s;
  display: flex; align-items: center; justify-content: center;
}
.auth-social-btn:hover {
  background: rgba(255,255,255,0.85);
  border-color: rgba(37,99,235,0.28);
}
.auth-social-btn svg {
  width: 20px; height: 20px;
  stroke: #0B1220; fill: none; stroke-width: 1.5;
  opacity: 0.6;
}
.auth-social-btn:hover svg { opacity: 0.8; }

/* Toggle mode */
.auth-toggle {
  margin-top: 16px;
  font-size: 13px; color: rgba(11,18,32,0.45);
  font-family: var(--font-body);
}
.auth-toggle a {
  color: #2563EB; text-decoration: none;
  font-weight: 500; cursor: pointer;
  transition: color 0.2s;
}
.auth-toggle a:hover { color: #1E57D2; }

.auth-admin-contact {
  font-size: 11px;
  color: rgba(37,99,235,0.45);
  font-family: var(--font-body);
  margin-top: 16px;
  cursor: default;
}

.auth-footer {
  font-size: 10px; color: rgba(11,18,32,0.30); margin-top: 24px;
  letter-spacing: 0.5px; text-transform: uppercase;
}
.auth-footer a {
  color: rgba(37,99,235,0.50);
  text-decoration: none;
}

/* ── Auth dark mode ── */
[data-theme="dark"] .auth-overlay {
  background: radial-gradient(ellipse at 18% 0%, rgba(37,99,235,0.30) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 100%, rgba(96,165,250,0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(96,165,250,0.06) 0%, transparent 70%),
    #0B1220;
}
[data-theme="dark"] .auth-card {
  background: rgba(11,18,32,0.82);
  border-color: rgba(96,165,250,0.20);
  box-shadow: 0 30px 80px rgba(0,0,0,0.60), 0 0 60px rgba(37,99,235,0.12);
}
[data-theme="dark"] .auth-logo-img {
  filter: drop-shadow(0 6px 28px rgba(96,165,250,0.35));
}
[data-theme="dark"] .auth-card h2 { color: #EEF4FF; }
[data-theme="dark"] .auth-sub { color: rgba(238,244,255,0.45); }
[data-theme="dark"] .input-wrap input {
  border-color: rgba(96,165,250,0.22);
  background: rgba(11,18,32,0.65);
  color: #EEF4FF;
}
[data-theme="dark"] .input-wrap input:focus {
  border-color: rgba(96,165,250,0.55);
  background: rgba(17,26,43,0.85);
  box-shadow: 0 0 0 3px rgba(96,165,250,0.12);
}
[data-theme="dark"] .input-label { color: rgba(238,244,255,0.35); }
[data-theme="dark"] .input-wrap input:focus + .input-label,
[data-theme="dark"] .input-wrap input:not(:placeholder-shown) + .input-label { color: #60A5FA; }
[data-theme="dark"] .input-wrap:hover::after {
  background: radial-gradient(200px circle at var(--mx, 50%) var(--my, 50%), rgba(96,165,250,0.10) 0%, transparent 70%);
}
[data-theme="dark"] .auth-field .field-icon svg { stroke: #60A5FA; }
[data-theme="dark"] .pw-toggle { color: rgba(238,244,255,0.35); }
[data-theme="dark"] .pw-toggle:hover { color: rgba(238,244,255,0.65); }
[data-theme="dark"] .auth-btn {
  box-shadow: 0 8px 24px rgba(37,99,235,0.45), 0 2px 8px rgba(37,99,235,0.25);
}
[data-theme="dark"] .auth-btn:hover {
  box-shadow: 0 10px 30px rgba(37,99,235,0.55), 0 2px 8px rgba(37,99,235,0.30);
}
[data-theme="dark"] .auth-check span { color: rgba(238,244,255,0.50); }
[data-theme="dark"] .auth-divider::before,
[data-theme="dark"] .auth-divider::after { border-top-color: rgba(96,165,250,0.15); }
[data-theme="dark"] .auth-divider span { color: rgba(238,244,255,0.28); }
[data-theme="dark"] .auth-social-btn {
  border-color: rgba(96,165,250,0.18);
  background: rgba(11,18,32,0.55);
}
[data-theme="dark"] .auth-social-btn:hover {
  background: rgba(11,18,32,0.75);
  border-color: rgba(96,165,250,0.35);
}
[data-theme="dark"] .auth-social-btn svg { stroke: #EEF4FF; opacity: 0.5; }
[data-theme="dark"] .auth-social-btn:hover svg { opacity: 0.8; }
[data-theme="dark"] .auth-toggle { color: rgba(238,244,255,0.35); }
[data-theme="dark"] .auth-toggle a { color: #60A5FA; }
[data-theme="dark"] .auth-toggle a:hover { color: #93C5FD; }
[data-theme="dark"] .auth-admin-contact { color: rgba(96,165,250,0.35); }
[data-theme="dark"] .auth-footer { color: rgba(238,244,255,0.18); }
[data-theme="dark"] .auth-footer a { color: rgba(96,165,250,0.40); }

/* Header user chip */
.header-user {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 10px 5px 5px;
  background: var(--accent-light); border-radius: 20px;
  font-size: 11px; font-weight: 600; color: var(--accent-primary);
  cursor: pointer; transition: var(--transition);
  white-space: nowrap;
}
.header-user:active { transform: scale(0.95); }
.header-user .user-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--accent-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: #fff; font-weight: 700;
  flex-shrink: 0;
}

/* Settings — Account card */
.screen-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  margin-bottom: 16px;
  box-shadow: var(--glass-shadow);
}
.screen-header h2 {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
}
.screen-header .header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.screen-header .header-actions button {
  padding: 8px 14px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition);
}
.screen-header .header-actions button:hover {
  background: rgba(255,255,255,0.1);
  border-color: var(--accent-primary);
}

.account-card {
  display: flex; align-items: center; gap: 14px;
  padding: 16px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 14px;
  border: 1px solid var(--glass-card-border);
  margin-bottom: 16px;
  box-shadow: var(--glass-shadow);
}
.account-card .ac-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; color: #fff; font-weight: 700; flex-shrink: 0;
}
.account-card .ac-info { flex: 1; min-width: 0; }
.account-card .ac-name {
  font-size: 15px; font-weight: 700; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.account-card .ac-role {
  font-size: 12px; color: var(--text-muted); margin-top: 1px;
}
.account-card .ac-logout {
  padding: 8px 14px; border: 1.5px solid var(--danger);
  border-radius: 8px; background: transparent; color: var(--danger);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: var(--transition); flex-shrink: 0;
}
.account-card .ac-logout:active {
  background: var(--danger); color: #fff;
}

/* Settings — user list */
.user-manage-section {
  padding: 16px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 14px;
  border: 1px solid var(--glass-card-border);
  margin-bottom: 16px;
  box-shadow: var(--glass-shadow);
}
.um-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.um-header h4 {
  font-size: 13px; font-weight: 700; color: var(--text-primary);
  display: flex; align-items: center; gap: 6px;
}
.um-header .um-count {
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg-secondary); padding: 2px 8px; border-radius: 10px;
}
.um-add-btn {
  display: flex; align-items: center; gap: 4px;
  padding: 6px 12px; border: none; border-radius: 8px;
  background: var(--accent-gradient); color: #fff;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: var(--transition);
}
.um-add-btn:active { transform: scale(0.95); }
.user-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(4px);
  border-radius: 10px;
  border: 1px solid var(--glass-card-border);
  margin-bottom: 6px;
  transition: var(--transition);
}
.user-row:last-child { margin-bottom: 0; }
.user-row .ur-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; color: #fff; font-weight: 700; flex-shrink: 0;
}
.user-row .ur-info { flex: 1; min-width: 0; }
.user-row .ur-name {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.user-row .ur-role-badge {
  display: inline-block; font-size: 10px; font-weight: 600;
  padding: 1px 6px; border-radius: 4px; margin-top: 2px;
}
.user-row .ur-role-select {
  font-size: 11px; font-weight: 600;
  padding: 2px 6px; border-radius: 6px; margin-top: 2px;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  color: var(--text-primary); cursor: pointer;
  transition: var(--transition);
}
.user-row .ur-role-select:focus {
  outline: none; border-color: var(--accent-primary);
  box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.user-row .ur-role-badge.admin { background: rgba(168,110,54,0.15); color: #a86e36; }
.user-row .ur-role-badge.responsable { background: rgba(75,85,99,0.12); color: #4b5563; }
.user-row .ur-role-badge.ouvrier { background: rgba(74,138,79,0.12); color: #4a8a4f; }
.user-row .ur-actions { display: flex; gap: 4px; flex-shrink: 0; }
.ur-btn {
  width: 30px; height: 30px; border: none; border-radius: 8px;
  cursor: pointer; font-size: 13px; display: flex;
  align-items: center; justify-content: center;
  transition: var(--transition);
}
.ur-btn-del { background: var(--danger-bg); color: var(--danger); }
.ur-btn-del:active { background: var(--danger); color: #fff; }
.ur-you {
  font-size: 10px; color: var(--accent-primary); font-weight: 600;
  background: var(--accent-light); padding: 1px 6px; border-radius: 4px;
  margin-left: 4px;
}

/* === MODULE GRID (Menu Screen) === */
.module-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
.module-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 20px 12px;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}
.module-card:hover {
  border-color: var(--accent-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg), var(--shadow-glow);
  background: var(--glass-card-bg);
}
.module-card:active { transform: translateY(-1px); }
.module-card-icon { font-size: 32px; margin-bottom: 8px; }
.module-card-name {
  font-size: 12px; font-weight: 700; color: var(--text-primary);
  line-height: 1.3;
}
.module-card-desc {
  font-size: 10px; color: var(--text-muted); margin-top: 4px;
}

/* === DATA TABLE === */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  margin-top: 12px;
}
.data-table th {
  background: var(--glass-card-bg);
  padding: 10px 8px;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--glass-border);
  white-space: nowrap;
}
.data-table td {
  padding: 10px 8px;
  border-bottom: 1px solid var(--glass-border);
  color: var(--text-primary);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover { background: rgba(255,255,255,0.05); }
.data-table .col-actions {
  display: flex; gap: 4px; justify-content: flex-end;
}

/* === STATUS BADGES (extended) === */
.badge { display:inline-block; padding:3px 8px; border-radius:6px; font-size:10px; font-weight:600; }
.badge-active { background:var(--success-bg); color:var(--success); }
.badge-maintenance { background:var(--warning-bg); color:var(--warning); }
.badge-broken { background:var(--danger-bg); color:var(--danger); }
.badge-drying { background:var(--info-bg); color:var(--info); }
.badge-done { background:var(--success-bg); color:var(--success); }
.badge-pending { background:var(--warning-bg); color:var(--warning); }
.badge-stock { background:var(--success-bg); color:var(--success); padding:2px 8px; border-radius:6px; font-size:10px; font-weight:600; }
.badge-consumed { background:var(--danger-bg); color:var(--danger); padding:2px 8px; border-radius:6px; font-size:10px; font-weight:600; }
.badge-danger { background:var(--danger-bg); color:var(--danger); padding:2px 8px; border-radius:6px; font-size:10px; font-weight:600; }

/* === SEARCH/FILTER BAR === */
.filter-bar {
  display: flex; gap: 8px; margin-bottom: 16px;
}
.filter-bar .form-input { padding: 10px 12px; font-size: 13px; }
.filter-bar select.form-input { min-width: 0; flex: 0 0 auto; }

/* === SHIFT CARDS === */
.shift-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: var(--glass-shadow);
}
.shift-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.shift-title { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.shift-members {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px;
}
.shift-member {
  padding: 4px 10px; background: var(--bg-tertiary);
  border: 1px solid var(--border-color); border-radius: 8px;
  font-size: 11px; font-weight: 500; color: var(--text-secondary);
}

/* === AUDIT LOG ROW === */
.audit-row {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 12px;
}
.audit-row:last-child { border-bottom: none; }
.audit-time { color: var(--text-muted); white-space: nowrap; min-width: 70px; }
.audit-action { color: var(--text-primary); flex: 1; }
.audit-user { color: var(--accent-primary); font-weight: 600; }

/* === GRUME SEARCH (flux lignes) === */
.grume-result {
  display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  flex-wrap: wrap;
  border: 1px solid var(--border-color); border-radius: 8px;
  margin-bottom: 5px; cursor: pointer;
  background: var(--glass-card-bg);
  font-size: 12px;
  transition: border-color .15s, background .15s;
}
.grume-result:hover { border-color: var(--primary, #2e7d32); }
.grume-result.selected {
  border-color: var(--success, #059669);
  background: rgba(5, 150, 105, 0.12);
}
.grume-result.selected .grume-radio {
  border-color: var(--success, #059669);
  background: var(--success, #059669);
  color: #fff;
}
.grume-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--border-color);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  transition: all .15s;
}

/* === EQUIPMENT CARD === */
.equip-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  transition: var(--transition);
  box-shadow: var(--glass-shadow);
}
.equip-card:hover { border-color: var(--accent-secondary); }
.equip-header {
  display: flex; justify-content: space-between; align-items: flex-start;
}
.equip-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.equip-type { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.equip-details {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  margin-top: 10px; font-size: 12px;
}
.equip-detail-label { color: var(--text-muted); }
.equip-detail-value { color: var(--text-primary); font-weight: 600; }

/* === DRYING BATCH CARD === */
.dry-card {
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  padding: 16px;
  margin-bottom: 10px;
  box-shadow: var(--glass-shadow);
}
.dry-header {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.dry-batch-num {
  font-size: 14px; font-weight: 700; color: var(--accent-primary);
}
.dry-progress {
  height: 6px; background: var(--bg-tertiary); border-radius: 3px;
  margin-top: 10px; overflow: hidden;
}
.dry-progress-bar {
  height: 100%; border-radius: 3px; transition: width 0.5s ease;
}
.dry-progress-bar.active { background: var(--info); }
.dry-progress-bar.done { background: var(--success); }

/* === INVENTORY ROW === */
.inv-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
  background: var(--glass-card-bg);
  backdrop-filter: blur(4px);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
  margin-bottom: 6px;
}
.inv-dims {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.inv-qty {
  font-size: 13px; font-weight: 700; color: var(--accent-primary);
}
.inv-species {
  font-size: 11px; color: var(--text-muted); margin-top: 2px;
}

/* ════════════════════════════════════════════
   ORBITAL NAVIGATION SYSTEM
   ════════════════════════════════════════════ */
.orbital-fab {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 10000;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
.orbital-fab:active {
  transform: scale(0.92);
}

.orbital-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--orbital-bg);
  display: none; align-items: center; justify-content: center; overflow: hidden;
  opacity: 0; transition: opacity 0.5s;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.orbital-overlay.open { display: flex; opacity: 1; }
.orbital-overlay.fade-out { opacity: 0; }
.orbital-overlay .orbital-icon,
.ac-avatar [data-lucide] { color: #fff; }
.lucide-svg { display: block; width: 100%; height: 100%; }
[data-lucide] { display: inline-flex; align-items: center; justify-content: center; }
.orbital-overlay [data-lucide] { width: 28px; height: 28px; stroke-width: 1.5; color: inherit; }
.orbital-card [data-lucide] { width: 16px; height: 16px; stroke-width: 1.5; }

.orbital-overlay .orbital-particles span {
  position: absolute; width: 3px; height: 3px; background: rgba(255,255,255,0.15);
  border-radius: 50%; animation: orbitalFloat 6s infinite;
}
@keyframes orbitalFloat {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  50% { opacity: 1; }
  100% { transform: translateY(-100vh) scale(0); opacity: 0; }
}
.orbital-scene {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  perspective: 1000px;
}

/* Center hub */
.orbital-hub {
  position: absolute; z-index: 10;
  width: 120px; height: 120px; border-radius: 50%;
  background: linear-gradient(135deg, #a855f7, #3b82f6, #14b8a6);
  display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: 0 0 40px rgba(168,85,247,0.3);
  animation: hubPulseRef 3s ease-in-out infinite;
}
.orbital-top-logo { position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 200; }
.orbital-top-logo-img { width: 240px; height: auto; object-fit: contain; }
.orbital-greeting { position: fixed; top: 160px; left: 50%; transform: translateX(-50%); z-index: 200; text-align: center; color: rgba(255,255,255,0.9); }
.orbital-greeting-user { display: block; font-size: 16px; font-weight: 600; margin-bottom: 4px; }
.orbital-greeting-datetime { display: block; font-size: 13px; opacity: 0.7; font-family: monospace; }
.orbital-hub .hub-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.orbital-hub .hub-brand-icon { width: 40px; height: 40px; color: #fff; }
.orbital-hub::before {
  content: ''; position: absolute; width: 140px; height: 140px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.2);
  animation: pingSlow 3s infinite;
}
.orbital-hub::after {
  content: ''; position: absolute; width: 160px; height: 160px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
  animation: pingSlow 3s infinite; animation-delay: 0.5s;
}
.orbital-hub .hub-dot {
  width: 36px; height: 36px; border-radius: 50%;
  background: transparent; backdrop-filter: blur(8px); display:flex; align-items:center; justify-content:center;
}
@keyframes hubPulseRef {
  0%, 100% { box-shadow: 0 0 40px rgba(168,85,247,0.3); }
  50% { box-shadow: 0 0 60px rgba(168,85,247,0.5); }
}
@keyframes pingSlow {
  0% { transform: scale(0.8); opacity: 0.5; }
  70% { transform: scale(1.3); opacity: 0; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Orbit ring */
.orbital-ring-line {
  position: absolute; width: 500px; height: 500px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

/* Light theme orbital overrides */
[data-theme="light"] .orbital-overlay .orbital-particles span { background: rgba(0,0,0,0.15); }
[data-theme="light"] .orbital-ring-line { border-color: rgba(0,0,0,0.12); }
[data-theme="light"] .orbital-node .node-circle { border-color: rgba(0,0,0,0.25); background: #fff; color: #111; }
[data-theme="light"] .orbital-node .node-label { color: rgba(0,0,0,0.7); }
[data-theme="light"] .orbital-node.active .node-circle { background: #111; color: #fff; border-color: #111; box-shadow: 0 0 30px rgba(0,0,0,0.2); }
[data-theme="light"] .orbital-node.active .node-label { color: #000; }
[data-theme="light"] .orbital-node.related .node-circle { background: rgba(0,0,0,0.5); color: #fff; border-color: #000; }
[data-theme="light"] .orbital-node .glow-ring { background: radial-gradient(circle, rgba(0,0,0,0.1) 0%, transparent 70%); }
[data-theme="light"] .orbital-card { background: rgba(255,255,255,0.95); border-color: rgba(0,0,0,0.15); box-shadow: 0 20px 60px rgba(0,0,0,0.15); }
[data-theme="light"] .orbital-card .card-connector { background: rgba(0,0,0,0.3); }
[data-theme="light"] .orbital-card .card-body p { color: #333 !important; }
[data-theme="light"] .orbital-connection { border-color: rgba(0,0,0,0.2); }
[data-theme="light"] .orbital-hub::before { border-color: rgba(0,0,0,0.15); }
[data-theme="light"] .orbital-hub::after { border-color: rgba(0,0,0,0.1); }

/* Nodes */
.orbital-node {
  position: absolute; cursor: pointer; transition: all 0.7s cubic-bezier(0.4,0,0.2,1);
  will-change: transform, opacity;
  display: flex; flex-direction: column; align-items: center;
}
.orbital-node .node-circle {
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid rgba(255,255,255,0.4);
  background: #000; color: #fff;
  transition: all 0.3s cubic-bezier(0.4,0,0.2,1);
}
.orbital-node .node-circle .node-icon { font-size: 20px; line-height: 1; }
.orbital-node.active .node-circle {
  background: #fff; color: #000; border-color: #fff;
  transform: scale(1.5); box-shadow: 0 0 30px rgba(255,255,255,0.3);
}
.orbital-node.related .node-circle {
  background: rgba(255,255,255,0.5); color: #000; border-color: #fff;
  animation: nodePulse 1s infinite;
}
.orbital-node.pulsing .node-circle {
  animation: nodePulse 1s infinite;
}
@keyframes nodePulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,255,255,0.2); }
  50% { box-shadow: 0 0 25px rgba(255,255,255,0.5); }
}
.orbital-node .glow-ring {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,0.15) 0%, transparent 70%);
  transition: all 0.5s;
}
.orbital-node .node-label {
  position: absolute; top: 54px;
  font-size: 10px; font-weight: 600; letter-spacing: 0.5px;
  color: rgba(255,255,255,0.7); white-space: nowrap;
  transition: all 0.3s;
}
.orbital-node.active .node-label { color: #fff; transform: scale(1.25); }

/* Expanded card */
.orbital-card {
  position: absolute; z-index: 300;
  background: rgba(0,0,0,0.9); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 12px; width: 280px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 40px rgba(255,255,255,0.05);
  overflow: visible;
}
.orbital-card .card-connector {
  position: absolute; width: 1px; height: 12px;
  background: rgba(255,255,255,0.5); left: 50%; margin-left: -0.5px;
}
.orbital-card .card-header { padding: 16px 16px 8px; }
.orbital-card .card-body { padding: 0 16px 16px; }
.orbital-card .orbital-badge {
  display: inline-block; padding: 2px 8px; font-size: 10px;
  font-weight: 600; border-radius: 2px;
}
.orbital-badge.completed { background: #000; color: #fff; border: 1px solid #fff; }
.orbital-badge.in-progress { background: #fff; color: #000; border: 1px solid #000; }
.orbital-badge.pending { background: rgba(0,0,0,0.4); color: rgba(255,255,255,0.7); border: 1px solid rgba(255,255,255,0.5); }

/* Orbital toggle button */
.orbital-toggle {
  background: linear-gradient(135deg, #1e293b, #0f172a);
  border: 1px solid rgba(5,150,105,0.3); color: #059669;
  border-radius: 50%; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; cursor: pointer; transition: all 0.3s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.orbital-toggle:hover { border-color: #059669; box-shadow: 0 0 20px rgba(5,150,105,0.3); transform: scale(1.1); }

/* Connection lines between related nodes */
.orbital-connection {
  position: absolute; z-index: 2; pointer-events: none;
  border-top: 1px dashed rgba(255,255,255,0.2);
  transform-origin: left center;
}

.orbital-brand { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 50; display: flex; align-items: center; gap: 10px; }
.orbital-brand svg { width: 26px; height: 26px; color: #a855f7; filter: drop-shadow(0 0 8px rgba(168,85,247,0.5)); }
.orbital-brand .brand-text { font-size: 14px; font-weight: 600; color: #fff; letter-spacing: 0.5px; }
.orbital-brand .brand-sub { font-size: 9px; color: rgba(255,255,255,0.5); letter-spacing: 1px; text-transform: uppercase; line-height: 1.3; }

/* ===== MODERN TOP APP BAR ===== */
.top-bar {
  position: absolute; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px calc(14px + var(--safe-area-inset-top, 0px));
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
@media (min-width: 640px) { .top-bar { border-radius: var(--radius-xl) var(--radius-xl) 0 0; } }
.top-bar-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.top-bar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.top-bar-logo { width: 40px; height: 40px; object-fit: contain; border-radius: 10px; background: var(--bg-secondary); padding: 4px; border: 1px solid var(--border-color); }
.top-bar-titles { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.top-bar-module-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-green-gradient); display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.top-bar-module-icon svg { width: 20px; height: 20px; }
.top-bar-title { font-size: 15px; font-weight: 700; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-bar-sub { font-size: 10px; color: var(--text-muted); font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; }

.top-bar-theme, .top-bar-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-primary); transition: all 0.25s;
}
.top-bar-theme:hover, .top-bar-avatar:hover { border-color: var(--brand-green); box-shadow: 0 0 12px rgba(5,150,105,0.25); }
.top-bar-avatar { font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #10B981, #059669); border: none; }

@media (max-width: 420px) {
  .top-bar-sub { display: none; }
}

/* Zones de saisie : jamais plus de 2 colonnes sur petit écran,
   pas de débordement hors du cadre global de l'APK */
@media (max-width: 430px) {
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
  .form-grid-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 360px) {
  .form-grid-3 { grid-template-columns: 1fr; }
}

/* ===== BOTTOM NAVIGATION (Material Design 3) ===== */
.bottom-nav {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: stretch; justify-content: space-around;
  padding: 6px 8px calc(8px + var(--safe-area-inset-bottom, 0px));
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)); -webkit-backdrop-filter: blur(var(--glass-blur));
}
@media (min-width: 640px) { .bottom-nav { border-radius: 0 0 var(--radius-xl) var(--radius-xl); } }
.bn-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 2px; background: transparent; border: none; cursor: pointer;
  color: var(--text-muted); border-radius: 16px; transition: all 0.25s; position: relative;
  -webkit-tap-highlight-color: transparent;
}
.bn-icon { font-size: 20px; line-height: 1; transition: transform 0.25s; display: inline-flex; align-items: center; justify-content: center; }
.lucide-svg { display: block; width: 100%; height: 100%; }
.lucide-svg .primary { stroke: var(--icon-primary); }
.lucide-svg .secondary { stroke: var(--icon-secondary); }
.bn-item .bn-icon .lucide-svg { width: 22px; height: 22px; }
.module-card-icon .lucide-svg { width: 26px; height: 26px; }
.bn-label { font-size: 10px; font-weight: 600; letter-spacing: 0.2px; }
.bn-item.active { color: var(--brand-green); }
.bn-item.active .bn-icon { transform: translateY(-1px) scale(1.08); }
.bn-item.active::before {
  content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 40px; height: 26px; border-radius: 999px; background: var(--accent-green-light);
  z-index: -1;
}
.bn-item:active { transform: scale(0.96); }

/* ===== MODULE GRID — BENTO SMART ===== */
.more-sheet-title-group { display: flex; align-items: center; gap: 8px; }
.more-module-count {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--accent-light); color: var(--brand-green);
  font-size: 11px; font-weight: 800; letter-spacing: 0.2px;
}

#moreModuleGrid.module-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 10px; padding-top: 2px; align-items: stretch;
}
.bento-item {
  position: relative; overflow: hidden; cursor: pointer; text-align: left;
  border: 1px solid var(--border-color); border-radius: 18px;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent; font-family: var(--font-body);
  animation: bentoIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.bento-item:focus-visible { outline: 2px solid var(--brand-green); outline-offset: 2px; }
@keyframes bentoIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Featured — hero pleine largeur */
.bento-feature {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 12px;
  padding: 14px; min-height: 88px;
  color: #fff; border: none; border-radius: 20px;
  box-shadow: 0 10px 26px rgba(4,120,87,0.22);
}
.bento-feature-production { background: linear-gradient(135deg, #059669 0%, #047857 55%, #065f46 100%); }
.bento-feature-planning { background: linear-gradient(135deg, #0f172a 0%, #1e3a5f 60%, #155e75 100%); }
.bento-feature-mp { background: linear-gradient(135deg, #d97706 0%, #b45309 55%, #92400e 100%); }
.bento-feature-pf { background: linear-gradient(135deg, #0d9488 0%, #0f766e 55%, #115e59 100%); }
.bento-feature::after {
  content: ''; position: absolute; top: -70%; right: -20%;
  width: 220px; height: 220px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.16), transparent 70%);
  pointer-events: none;
}
.bento-feature:active { transform: scale(0.98); }
.bento-feature:hover { box-shadow: 0 14px 32px rgba(4,120,87,0.30); }
.bento-feature .bento-icon {
  flex: 0 0 auto; width: 44px; height: 44px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); border: 1px solid rgba(255,255,255,0.30);
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.2), 0 6px 16px rgba(0,0,0,0.15);
}
.bento-feature .bento-icon .lucide-svg { width: 23px; height: 23px; }
.bento-feature .bento-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.bento-feature .bento-title { font-size: 16px; font-weight: 800; letter-spacing: 0.2px; }
.bento-feature .bento-desc {
  font-size: 11.5px; opacity: 0.85; line-height: 1.3; max-width: 240px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bento-kpi {
  display: inline-flex; align-items: baseline; gap: 5px; align-self: flex-start;
  margin-top: 7px; padding: 4px 10px; border-radius: 999px;
  background: var(--accent-light); color: var(--brand-green);
  font-size: 13px; font-weight: 800; line-height: 1;
}
.bento-kpi i { font-style: normal; font-size: 11px; font-weight: 600; opacity: 0.75; }
.bento-feature .bento-kpi {
  background: rgba(255,255,255,0.18); color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
}
.bento-feature .bento-kpi i { opacity: 0.85; }
.bento-arrow-ico { font-size: 22px; color: rgba(255,255,255,0.9); flex: 0 0 auto; margin-left: 4px; }

/* ===== GRUME QUICK LIST (dropdown saisie manuelle) ===== */
.grume-quick-list {
  position: absolute; left: 10px; right: 10px; top: 100%;
  z-index: 50; max-height: 260px; overflow-y: auto;
  background: var(--bg-primary); border: 1px solid var(--border-color);
  border-radius: 12px; box-shadow: var(--shadow-soft-lg);
  margin-top: 6px;
}
.grume-quick-list-header {
  padding: 8px 12px; font-size: 11px; font-weight: 700;
  color: var(--text-muted); border-bottom: 1px solid var(--border-color);
  position: sticky; top: 0; background: var(--bg-primary); z-index: 1;
}
.grume-quick-list-empty {
  padding: 16px 12px; text-align: center; font-size: 12px;
  color: var(--text-muted); border: 1px dashed var(--border-color); border-radius: 8px; margin: 8px;
}
.grume-quick-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; cursor: pointer; transition: background 0.15s;
  border-bottom: 1px solid rgba(226,232,240,0.5);
}
.grume-quick-item:last-child { border-bottom: none; }
.grume-quick-item:hover { background: var(--accent-light); }
.grume-quick-item:active { background: rgba(5,150,105,0.15); }
.grume-quick-code { font-size: 13px; font-weight: 800; color: var(--text-primary); min-width: 80px; }
.grume-quick-info { flex: 1; font-size: 11px; color: var(--text-muted); }
.grume-quick-range { font-size: 12px; flex: 0 0 auto; }
.grume-tag-ok {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800;
  background: rgba(5,150,105,0.12); color: #059669; flex: 0 0 auto;
}
.grume-tag-ko {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 6px; font-size: 11px; font-weight: 800;
  background: rgba(217,119,6,0.12); color: #d97706; flex: 0 0 auto;
}

/* ===== HOME HERO ===== */
.home-hero {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 12px;
  border-radius: var(--radius-md);
  background: var(--glass-card-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  box-shadow: var(--glass-shadow);
  color: var(--text-primary);
}
.home-hero-icon {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: var(--accent-light); border: 1px solid var(--glass-card-border);
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-green);
}
.home-hero-icon .lucide-svg { width: 22px; height: 22px; }
.home-hero-title { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--text-primary); }
.home-hero-sub { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.home-hero-meta { display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.home-hero-time { font-size: 11px; font-weight: 600; color: var(--brand-green); font-variant-numeric: tabular-nums; }
.home-hero-sep { color: var(--text-muted); font-size: 11px; }
.home-hero-version { font-size: 10px; color: var(--text-muted); font-weight: 500; }

/* Admin broadcast banner */
.admin-broadcast-banner {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; margin-bottom: 10px;
  background: var(--info-bg); border: 1px solid var(--info);
  border-radius: var(--radius-sm); color: var(--info);
  font-size: 12px; font-weight: 500;
  animation: slideDown 0.3s ease;
}
.admin-broadcast-banner [data-lucide] { flex-shrink: 0; }
.admin-broadcast-close {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%;
  border: none; background: rgba(0,0,0,0.1); color: inherit;
  font-size: 11px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.admin-broadcast-close:hover { background: rgba(0,0,0,0.2); }
@keyframes slideDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }

/* ===== MORE SHEET (Plus) ===== */
.more-sheet-overlay {
  position: absolute; inset: 0; z-index: 950; background: rgba(0,0,0,0.4);
  display: none; align-items: flex-end; justify-content: center; backdrop-filter: blur(2px);
}
.more-sheet-overlay.open { display: flex; animation: fadeIn 0.25s ease; }
.more-sheet {
  width: 100%; max-width: 100%; background: var(--bg-primary);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 10px 16px calc(20px + var(--safe-area-inset-bottom, 0px));
  box-shadow: var(--shadow-lg); animation: sheetUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  max-height: 84vh; overflow-y: auto;
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.more-sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--border-color); margin: 4px auto 12px; }
.more-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 4px 2px 8px; }
.more-sheet-header h3 { font-size: 16px; font-weight: 700; color: var(--text-primary); }
.more-sheet-close {
  width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-secondary); cursor: pointer; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}

/* Screen padding for fixed bars */
.screen-scroll { padding-top: 69px; padding-bottom: 61px; padding-left: 0 !important; padding-right: 0 !important; }
.screen.active > .screen-scroll { padding-top: 69px; padding-bottom: 61px; padding-left: 0 !important; padding-right: 0 !important; }

/* Fenêtres Ligne A / Ligne B (onglet Sciage) */
.line-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 800;
  margin-right: 6px;
  vertical-align: -4px;
}
.line-chip-a { background: var(--accent-green-gradient); color: #fff; }
.line-chip-b { background: var(--brand-green); color: #fff; }

/* ═══════════════════════════════════════════════
   RTL — Support de l'arabe (direction droite→gauche)
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   V2 UNIFIED — "Verre premium" appliqué aux composants métier
   (cycle 4 : unifier tous les écrans au langage du dashboard v2)
   ═══════════════════════════════════════════════════════ */

/* Cartes métier génériques (MP, PF, équipements, disques) */
.equip-card {
  background: var(--v2-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--v2-card-border);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 18px var(--v2-glow);
  position: relative;
  overflow: hidden;
  transition: transform 0.15s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.equip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--v2-rule), transparent);
  opacity: 0.6;
}
.equip-card:active {
  transform: scale(0.985);
  border-color: var(--v2-rule);
  box-shadow: 0 6px 24px var(--v2-glow);
}
.equip-name { font-weight: 700; font-size: 14px; color: var(--text-primary); }
.equip-type { font-size: 11.5px; color: var(--text-muted); }

/* Tables — en-tête vert premium */
.dt-table {
  border: 1px solid var(--v2-card-border);
  border-radius: 14px;
  background: var(--v2-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 18px var(--v2-glow);
  overflow: hidden;
}
.dt-head {
  background: linear-gradient(135deg, rgba(5,150,105,0.16), rgba(5,150,105,0.06));
  color: var(--brand-green);
  border-bottom: 2px solid var(--v2-rule);
  font-weight: 800;
  letter-spacing: 0.06em;
}
.dt-row { border-bottom: 1px solid rgba(5,150,105,0.10); }
.dt-row:last-child { border-bottom: none; }
.dt-row:hover { background: linear-gradient(90deg, rgba(5,150,105,0.07), transparent); }

/* En-têtes de section métier */
.section-header {
  border-bottom: 1px solid var(--v2-card-border);
  padding-bottom: 8px;
}
.section-header h4 {
  font-weight: 800;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.section-header h4::before {
  content: '';
  width: 4px;
  height: 16px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--brand-green), rgba(5,150,105,0.4));
}

/* Boutons — touche verre premium */
.btn-primary, .btn-success {
  background: linear-gradient(135deg, var(--brand-green), #047857);
  box-shadow: 0 4px 14px rgba(5,150,105,0.35);
  border: none;
  font-weight: 700;
}
.btn-primary:active, .btn-success:active { transform: scale(0.96); }
.btn-secondary, .btn-ghost { background: rgba(5,150,105,0.10); color: var(--brand-green); border: 1px solid var(--v2-card-border); }

/* Badges statut — cohérence v2 */
.status-badge, .badge-stock, .badge-maintenance, .badge-consumed {
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* ═══════════════════════════════════════════════════════════════
   CYCLE 1 — RESPONSIVE SYSTEM
   Breakpoints : xs(<360) sm(360-639) md(640-1023) lg(≥1024)
   ═══════════════════════════════════════════════════════════════ */

/* ── XS : Phone petit (<360px) ── */
@media (max-width: 359px) {
  .screen-scroll { padding: 69px 0 61px 0; }
  .form-grid-2, .form-grid-3 { grid-template-columns: 1fr; }
  .dt-head, .dt-row { grid-template-columns: 28px 1.2fr 0.8fr 72px; font-size: 11px; padding: 8px 8px; }
  .dt-col-date, .dt-col-status { display: none; }
  .top-bar-title { font-size: 13px; }
  .top-bar-logo { width: 34px; height: 34px; }
  .bottom-nav-item span { display: none; }
  .bottom-nav { padding: 6px 0; gap: 2px; }
  .section-header h3 { font-size: 13px; }
}

/* ── SM : Phone standard (360-639px) — baseline, pas de changement ── */

/* ── MD : Tablette portrait (640-1023px) ── */
@media (min-width: 640px) {
  .screen-scroll { padding: 69px 0 61px 0; max-width: none; }
  .form-grid-2 { grid-template-columns: 1fr 1fr; gap: 14px; }
  .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
  .dt-head, .dt-row { font-size: 13px; padding: 12px 16px; gap: 10px; }
  .dt-head { font-size: 11px; }
  .section-header h3 { font-size: 16px; }
  .section-header p { font-size: 13px; }
  .btn-primary, .btn-success, .btn-secondary { padding: 12px 24px; font-size: 14px; }
  .card, .glass-card { padding: 20px; }
  .flow-card { padding: 16px; }
}

/* ── LG : Tablette paysage / Desktop (≥1024px) ── */
@media (min-width: 1024px) {
  .app-shell { flex-direction: row; }
  .top-bar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-radius: 0; }
  .bottom-nav {
    position: fixed; top: 60px; left: 0; bottom: 0; right: auto;
    width: 72px; flex-direction: column; border-radius: 0;
    justify-content: flex-start; padding: 12px 0; gap: 4px;
    border-right: 1px solid var(--glass-border);
    border-bottom: none;
  }
  .bottom-nav-item { flex-direction: column; padding: 10px 6px; border-radius: 12px; }
  .bottom-nav-item span { font-size: 9px; display: block; }
  .bottom-nav-item.active { background: var(--accent-light); }
  .screen-scroll {
    padding: 80px 48px 48px 96px;
    max-width: none;
    margin-left: 0;
  }
  .form-grid-2 { grid-template-columns: 1fr 1fr; gap: 16px; }
  .form-grid-3 { grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
  .dt-head, .dt-row { font-size: 14px; padding: 14px 20px; gap: 12px; }
  .dt-head { font-size: 12px; }
  .dt-col-date, .dt-col-status { display: block; }
  .section-header h3 { font-size: 18px; }
  .card, .glass-card { padding: 24px; border-radius: 16px; }
  .flow-card { padding: 20px; }
  .hero-card { padding: 28px; }
  .btn-primary, .btn-success, .btn-secondary { padding: 14px 28px; font-size: 15px; }
}

/* ── Typographie fluide (clamp) ── */
@media (min-width: 640px) {
  .screen-header h2 { font-size: clamp(16px, 2.5vw, 22px); }
  .flow-card h4 { font-size: clamp(13px, 1.8vw, 16px); }
  .hero-card h3 { font-size: clamp(16px, 2.5vw, 22px); }
}

/* ── Tables responsive : colonnes masquées sur petit écran ── */
@media (max-width: 479px) {
  .dt-col-date { display: none; }
  .dt-head, .dt-row { grid-template-columns: 28px 1.2fr 0.8fr 72px; }
}

/* ── Dashboard responsive ── */
@media (min-width: 640px) {
  .kpi-grid { grid-template-columns: repeat(3, 1fr); }
  .flow-cards-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(4, 1fr); }
  .flow-cards-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ── Overflow sécurisé : scrollbar au lieu de masquage ── */
@media (max-width: 479px) {
  .equip-card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .calc-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ═══════════════════════════════════════════════════════════════
   CYCLE 2 — TABLES INTELLIGENTES
   Mobile : mode carte (lignes empilées)
   Desktop : colonnes élargies, toutes visibles
   ═══════════════════════════════════════════════════════════════ */

/* ── Mode mobile : vrai tableau, entête toujours visible, scroll horizontal ── */
@media (max-width: 639px) {
  .dt-table {
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(4px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overflow-y: hidden;
  }
  .dt-head {
    display: grid !important; /* entête toujours visible sur mobile */
  }
  .dt-head, .dt-row {
    min-width: 540px;
  }
  .dt-head span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .dt-row span[style*="font-weight:700"] {
    font-size: 13px !important;
  }
  .dt-table .dt-row > span::before,
  .dt-table .dt-row > span::after {
    content: '' !important; /* neutralise les étiquettes du mode carte */
  }
}

/* ── Mode tablette : colonnes élargies ── */
@media (min-width: 640px) {
  .dt-head, .dt-row {
    grid-template-columns: 32px 1.6fr 1fr 1fr 1fr 100px;
    gap: 10px;
  }
}

/* ── Mode desktop : colonnes optimales ── */
@media (min-width: 1024px) {
  .dt-head, .dt-row {
    grid-template-columns: 32px 1.8fr 1.2fr 1fr 1fr 110px;
    gap: 14px;
    font-size: 14px;
  }
  .dt-head { font-size: 12px; }
}

/* ═══════════════════════════════════════════════════════════════
   CYCLE 3 — FORMULAIRES ADAPTATIFS
   Labels flottants, inputs fluides, validation visuelle
   ═══════════════════════════════════════════════════════════════ */

/* ── Form grid responsive cascade ── */
@media (max-width: 479px) {
  .form-grid-2 { grid-template-columns: 1fr; gap: 8px; }
  .form-grid-3 { grid-template-columns: 1fr; gap: 8px; }
}
@media (min-width: 480px) and (max-width: 639px) {
  .form-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* ── Inputs fluides ── */
.form-input, .form-select, textarea.form-input {
  font-size: clamp(14px, 2.5vw, 16px);
  padding: clamp(10px, 2vw, 14px) clamp(12px, 2vw, 16px);
}

/* ── Labels adaptatifs ── */
.form-label {
  font-size: clamp(10px, 1.8vw, 12px);
  margin-bottom: clamp(4px, 1vw, 8px);
}

/* ── Form group spacing ── */
.form-group {
  margin-bottom: clamp(10px, 2vw, 16px);
}

/* ── Validation visuelle (succès/erreur) ── */
.form-input.is-valid {
  border-color: var(--success);
  background: linear-gradient(135deg, rgba(5,150,105,0.04), var(--glass-bg));
}
.form-input.is-valid:focus {
  box-shadow: 0 0 0 4px rgba(5,150,105,0.12), var(--shadow-glow);
}
.form-input.is-error {
  border-color: var(--danger);
  background: linear-gradient(135deg, rgba(220,38,38,0.04), var(--glass-bg));
}
.form-input.is-error:focus {
  box-shadow: 0 0 0 4px rgba(220,38,38,0.12);
}
.form-error-text {
  font-size: clamp(10px, 1.5vw, 11px);
  color: var(--danger);
  margin-top: 4px;
  font-weight: 500;
}
.form-success-text {
  font-size: clamp(10px, 1.5vw, 11px);
  color: var(--success);
  margin-top: 4px;
  font-weight: 500;
}

/* ── Boutons adaptatifs ── */
@media (max-width: 359px) {
  .btn-primary, .btn-success { padding: 10px 14px; font-size: 13px; }
}
@media (min-width: 640px) {
  .btn-primary, .btn-success { padding: 14px 28px; font-size: 15px; }
}

/* ── Modal responsive ── */
@media (max-width: 479px) {
  .modal-content { width: 96vw; max-height: 85vh; padding: 16px; border-radius: 16px; }
}
@media (min-width: 480px) and (max-width: 1023px) {
  .modal-content { width: 85vw; max-width: 600px; }
}
@media (min-width: 1024px) {
  .modal-content { width: 70vw; max-width: 800px; max-height: 80vh; }
}

/* ═══════════════════════════════════════════════════════════════
   CYCLE 4 — NAVIGATION ADAPTATIVE
   Bottom nav compact (xs), labels visibles (sm+), sidebar (lg)
   ═══════════════════════════════════════════════════════════════ */

/* ── Bottom nav : mode compact xs ── */
@media (max-width: 359px) {
  .bottom-nav { padding: 4px 0; gap: 0; }
  .bn-item { padding: 6px 0; gap: 1px; }
  .bn-icon .lucide-svg { width: 20px; height: 20px; }
  .bn-label { font-size: 9px; }
  .bn-item.active::before { width: 32px; height: 22px; }
}

/* ── Bottom nav : labels visibles sm+ ── */
@media (min-width: 360px) and (max-width: 639px) {
  .bn-label { font-size: 10px; }
}

/* ── Bottom nav : tablette paysage → sidebar verticale ── */
@media (min-width: 1024px) {
  .bottom-nav {
    position: fixed;
    top: 60px;
    left: 0;
    bottom: 0;
    right: auto;
    width: 72px;
    flex-direction: column;
    border-radius: 0;
    justify-content: flex-start;
    padding: 12px 0;
    gap: 4px;
    border-right: 1px solid var(--glass-border);
    border-bottom: none;
    z-index: 950;
  }
  .bn-item {
    flex-direction: column;
    padding: 10px 6px;
    border-radius: 12px;
    margin: 0 6px;
  }
  .bn-item.active {
    background: var(--accent-light);
  }
  .bn-item.active::before {
    width: 4px;
    height: 24px;
    border-radius: 999px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
  }
  .bn-label { font-size: 9px; display: block; }
}

/* ── Top bar : padding adaptatif ── */
@media (min-width: 1024px) {
  .top-bar {
    position: fixed;
    top: 0;
    left: 72px;
    right: 0;
    border-radius: 0;
    z-index: 1000;
  }
}

/* ── Screen scroll : padding adapté à la nav ── */
@media (max-width: 639px) {
  .screen-scroll { padding-bottom: 61px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .screen-scroll { padding-bottom: 61px; }
}
@media (min-width: 1024px) {
  .screen-scroll { padding-left: 8px; padding-bottom: 61px; padding-top: 69px; }
}

/* ═══════════════════════════════════════════════════════════════
   CYCLE 5 — DASHBOARD ADAPTATIF
   Hero cards, KPI grid, flow cards responsive
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero cards (3 colonnes → 1 colonne sur mobile) ── */
@media (max-width: 479px) {
  .v2-hero {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .v2-hero-card {
    padding: 12px 14px;
  }
  .v2-hero-card h3 {
    font-size: 14px;
  }
}
@media (min-width: 480px) and (max-width: 639px) {
  .v2-hero {
    grid-template-columns: 1fr 1fr;
  }
  .v2-hero-card:first-child {
    grid-column: span 2;
  }
}

/* ── KPI grid v2 (2 colonnes → 1 mobile, 3 tablette, 4 desktop) ── */
@media (max-width: 479px) {
  .kpi-grid-v2 {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .kpi-card-v2 { padding: 10px; }
  .kpi-card-v2 .kpi-value { font-size: 18px; }
  .kpi-card-v2 .kpi-label { font-size: 10px; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .kpi-grid-v2 {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}
@media (min-width: 1024px) {
  .kpi-grid-v2 {
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
  }
  .kpi-card-v2 { padding: 14px; }
}

/* ── Flow cards ── */
@media (max-width: 479px) {
  .flow-cards-grid, .flow-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .flow-card { padding: 12px; }
}
@media (min-width: 480px) and (max-width: 639px) {
  .flow-cards-grid, .flow-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ── Dashboard sections (panels, gauges) ── */
@media (max-width: 479px) {
  .panel-grid { grid-template-columns: 1fr; }
  .gauge-ring { width: 60px; height: 60px; }
}
@media (min-width: 640px) {
  .panel-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
}
@media (min-width: 1024px) {
  .panel-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .gauge-ring { width: 84px; height: 84px; }
}

/* ═══════════════════════════════════════════════════════════════
   CYCLE 6 — TYPOGRAPHIE FLUIDE + ANIMATIONS ADAPTÉES
   clamp() sur textes, réduction animations mobile, espacement fluide
   ═══════════════════════════════════════════════════════════════ */

/* ── Typographie fluide globale ── */
body {
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.5;
}

h1, .h1 { font-size: clamp(20px, 4vw, 28px); }
h2, .h2 { font-size: clamp(18px, 3vw, 24px); }
h3, .h3 { font-size: clamp(16px, 2.5vw, 20px); }
h4, .h4 { font-size: clamp(14px, 2vw, 18px); }
h5, .h5 { font-size: clamp(12px, 1.8vw, 15px); }

/* ── Section headers ── */
.screen-header h2 {
  font-size: clamp(16px, 3vw, 22px);
  line-height: 1.2;
}
.section-header h3 {
  font-size: clamp(13px, 2.2vw, 17px);
  line-height: 1.3;
}
.section-header p {
  font-size: clamp(11px, 1.8vw, 13px);
}

/* ── Cards titres ── */
.flow-card h4 { font-size: clamp(13px, 2vw, 16px); }
.hero-card h3 { font-size: clamp(16px, 2.8vw, 22px); }
.v2-hero-card h3 { font-size: clamp(14px, 2.2vw, 18px); }

/* ── KPI values ── */
.kpi-card-v2 .kpi-value {
  font-size: clamp(20px, 4vw, 28px);
}
.kpi-card-v2 .kpi-label {
  font-size: clamp(10px, 1.5vw, 12px);
}

/* ── Table textes ── */
.dt-row { font-size: clamp(12px, 2vw, 14px); }
.dt-head { font-size: clamp(10px, 1.5vw, 12px); }

/* ── Bottom nav labels ── */
.bn-label {
  font-size: clamp(9px, 1.5vw, 10px);
}

/* ── Top bar ── */
.top-bar-title {
  font-size: clamp(13px, 2.5vw, 16px);
}

/* ── Boutons texte ── */
.btn-primary, .btn-success, .btn-secondary {
  font-size: clamp(13px, 2vw, 15px);
  padding: clamp(10px, 2vw, 14px) clamp(16px, 3vw, 28px);
}

/* ── Espacement fluide ── */
.form-group { margin-bottom: clamp(10px, 2.5vw, 16px); }

/* ── Animations adaptées : pas d'animation lourde sur mobile ── */
@media (max-width: 479px) {
  *, *::before, *::after {
    animation-duration: 0.2s !important;
    animation-delay: 0s !important;
    transition-duration: 0.15s !important;
  }
  .v2-hero-card { animation: none; }
}

/* ── Grille KPI mobile (selon proposition validée v9) ── */
@media (max-width: 479px) {
  .v2-hero {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    overflow: visible;
    scroll-snap-type: none;
    padding-bottom: 0;
  }
  .v2-hero-card {
    flex: none;
    min-width: 0;
    scroll-snap-align: unset;
  }
  .v2-hero-card:first-child {
    grid-column: span 2;
  }
}

/* ── Print : masquer nav, optimiser pour papier ── */
@media print {
  .top-bar, .bottom-nav { display: none !important; }
  .screen-scroll { padding: 0 !important; }
  .dt-table { overflow: visible; }
  .dt-head, .dt-row { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   FIX ICONE RECHERCHE + AMELIORATIONS MODE JOUR
   ═══════════════════════════════════════════════════════════════ */

/* ── Top bar search (séparé du theme) ── */
.top-bar-search {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border-color); background: var(--bg-secondary);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  color: var(--text-primary); transition: all 0.25s;
}
.top-bar-search:hover { border-color: var(--brand-green); box-shadow: 0 0 12px rgba(5,150,105,0.25); }
.top-bar-search svg { width: 18px; height: 18px; }

/* ── Mode JOUR — améliorations visuelles ── */
[data-theme="light"] .top-bar {
  background: rgba(255,255,255,0.92);
  border-bottom: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 1px 8px rgba(15,23,42,0.06);
}

[data-theme="light"] .bottom-nav {
  background: rgba(255,255,255,0.92);
  border-top: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 -1px 8px rgba(15,23,42,0.06);
}

[data-theme="light"] .dt-table {
  border: 1px solid rgba(226,232,240,0.8);
  background: rgba(255,255,255,0.7);
}

[data-theme="light"] .dt-head {
  background: rgba(241,245,249,0.6);
  border-bottom: 2px solid rgba(226,232,240,0.8);
}

[data-theme="light"] .dt-row {
  border-bottom: 1px solid rgba(226,232,240,0.5);
}
[data-theme="light"] .dt-row:hover {
  background: rgba(5,150,105,0.04);
}
[data-theme="light"] .dt-row.selected {
  background: rgba(5,150,105,0.08);
}

[data-theme="light"] .form-input, [data-theme="light"] .form-select {
  background: rgba(255,255,255,0.8);
  border: 1.5px solid rgba(226,232,240,0.8);
  box-shadow: 0 1px 3px rgba(15,23,42,0.04);
}
[data-theme="light"] .form-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(5,150,105,0.1), 0 1px 4px rgba(15,23,42,0.06);
}

[data-theme="light"] .card, [data-theme="light"] .glass-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}

[data-theme="light"] .modal-content {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(226,232,240,0.8);
}

[data-theme="light"] .btn-primary {
  background: linear-gradient(135deg, var(--green-400), var(--green-600));
  color: #fff;
  box-shadow: 0 2px 8px rgba(5,150,105,0.25);
}
[data-theme="light"] .btn-primary:hover {
  box-shadow: 0 4px 16px rgba(5,150,105,0.35);
}

[data-theme="light"] .status-badge {
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06);
}

[data-theme="light"] .section-header h3 {
  color: #0F172A;
}

[data-theme="light"] .flow-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}

[data-theme="light"] .equip-card {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 2px 8px rgba(15,23,42,0.05);
}

[data-theme="light"] .hero-card {
  background: rgba(255,255,255,0.9);
  border: 1px solid rgba(226,232,240,0.8);
}

[data-theme="light"] .kpi-card-v2,
[data-theme="light"] .trace-report-bar,
[data-theme="light"] .trace-bento-table {
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(226,232,240,0.8);
  box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}

[data-theme="light"] .sync-banner {
  background: rgba(255,255,255,0.9);
  border-bottom: 1px solid rgba(226,232,240,0.8);
}

[data-theme="light"] .bn-item.active::before {
  background: rgba(5,150,105,0.12);
}

[data-theme="light"] .search-overlay {
  background: rgba(15,23,42,0.4);
}

[data-theme="light"] .more-sheet {
  background: #F8FAFC;
  border-top: 1px solid rgba(226,232,240,0.8);
}

/* ═══════════════════════════════════════════════════════════════
   GARDE-FOU OVERFLOW — AUCUN contenu ne depasse le cadre
   ═══════════════════════════════════════════════════════════════ */

/* Conteneur principal : JAMAIS de depassement */
.app-container, body, html {
  overflow-x: hidden;
  max-width: 100vw;
  width: 100%;
}

/* Screens : bloque tout depassement horizontal */
.screen {
  overflow: hidden;
  min-width: 0;
  max-width: 100%;
}

/* Scroll containers : scroll vertical uniquement */
.screen-scroll, .modal-body, .modal-content, .more-sheet {
  overflow-x: hidden;
  overflow-y: auto;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* Tables : scroll interne si besoin, JAMAIS de debordement parent */
.dt-table {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Cards et fiche : JAMAIS plus large que le parent */
.card, .glass-card, .flow-card, .hero-card, .equip-card, .flux-fiche,
.v2-hero-card, .kpi-card-v2, .module-card {
  max-width: 100%;
  overflow: hidden;
  word-wrap: break-word;
}

/* Fiche réglage : réductible/apparaître */
.fiche-summary { list-style: none; }
.fiche-summary::-webkit-details-marker { display: none; }
.fiche-summary::marker { display: none; content: ''; }
.fiche-summary:hover { background: var(--hover-bg, rgba(255,255,255,.04)); }
.fiche-chevron { display: inline-block; transition: transform .2s ease; }
details[open] > .fiche-summary .fiche-chevron { transform: rotate(0deg); }
details:not([open]) > .fiche-summary .fiche-chevron { transform: rotate(-90deg); }

/* Formulaires : jamais plus large */
.form-grid, .form-group, .form-input, .form-select, textarea.form-input {
  max-width: 100%;
  min-width: 0;
}

/* SVG diagrammes : contenus dans leur cadre */
.diagram-body, .diagram-zoom-body, .diagram-container {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.diagram-body svg, .diagram-zoom-body svg {
  max-width: 100%;
  height: auto;
}

/* Modals : jamais plus large que l'ecran */
.modal-overlay {
  max-width: 100vw;
  overflow: hidden;
}
.modal-content, .modal {
  max-width: min(90vw, 800px);
  overflow: hidden;
}

/* Texte long : wrap */
pre, code, .mono {
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 100%;
}

/* Images : jamais plus large que le parent */
img, .top-bar-logo, .auth-logo-img {
  max-width: 100%;
  height: auto;
}

/* Top bar et bottom nav : fixe, JAMAIS de debordement */
.top-bar, .bottom-nav {
  max-width: 100vw;
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   COLONNES DÉTAILLÉES — Tableau complet commandes validées
   TOUJOURS toutes les colonnes visibles
   ═══════════════════════════════════════════════════════════════ */

/* Tableau complet : scroll horizontal si besoin */
.dt-table-full {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Head du tableau complet */
.dt-head-full {
  display: grid;
  grid-template-columns: 28px 1.5fr 0.8fr 0.5fr 0.6fr 0.9fr 0.7fr 0.45fr 0.55fr 0.55fr 0.45fr 0.5fr 0.6fr 0.7fr 60px;
  gap: 4px;
  align-items: center;
  padding: 8px 10px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  border-bottom: 2px solid var(--glass-border);
  background: var(--bg-tertiary, rgba(241,245,249,0.5));
  min-width: 820px;
}

/* Mobile : vrai tableau, entête toujours visible, scroll horizontal */
@media (max-width: 639px) {
  .dt-head-full {
    display: grid !important; /* entête toujours visible sur mobile */
  }
  .dt-table-full .dt-row {
    min-width: 0;
  }
  .dt-table-full .dt-head-full,
  .dt-table-full .dt-row {
    grid-template-columns: 28px 1.5fr 0.8fr 0.5fr 0.6fr 0.9fr 0.7fr 0.45fr 0.55fr 0.55fr 0.45fr 0.5fr 0.6fr 0.7fr 60px;
    min-width: 540px;
  }
  .dt-table-full .dt-head-full span,
  .dt-table-full .dt-row > span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .dt-table-full .dt-row .dt-checkbox {
    position: static;
  }
  .dt-table-full .dt-row > span::before,
  .dt-table-full .dt-row > span::after {
    content: '' !important; /* neutralise les étiquettes du mode carte */
  }
}

/* Tablette : colonnes visibles mais compactes */
@media (min-width: 640px) and (max-width: 1023px) {
  .dt-head-full, .dt-table-full .dt-row {
    grid-template-columns: 28px 1.3fr 0.7fr 0.4fr 0.5fr 0.8fr 0.6fr 0.4fr 0.5fr 0.5fr 0.4fr 0.4fr 0.5fr 60px;
    min-width: 680px;
  }
  .dt-col-notes { max-width: 80px; overflow: hidden; text-overflow: ellipsis; }
}

/* Desktop : toutes les colonnes bien espacées */
@media (min-width: 1024px) {
  .dt-head-full, .dt-table-full .dt-row {
    grid-template-columns: 28px 1.5fr 0.8fr 0.5fr 0.6fr 1fr 0.8fr 0.45fr 0.65fr 0.65fr 0.45fr 0.5fr 0.8fr 0.7fr 70px;
    gap: 6px;
    min-width: 900px;
  }
  .dt-head-full { font-size: 11px; }
  .dt-col-notes { max-width: 140px; }
}

/* Job Card specific table */
#jobCardList .dt-head-full, #jobCardList .dt-table-full .dt-row {
  grid-template-columns: 1.2fr 1fr 0.8fr 0.7fr 0.5fr 0.5fr 0.7fr 0.8fr 60px;
  min-width: 760px;
}
#jobCardList .dt-head-full { font-size: 10px; }

/* Stock Entry specific table */
#stockEntryList .dt-head-full, #stockEntryList .dt-table-full .dt-row {
  grid-template-columns: 1.2fr 0.8fr 0.8fr 1fr 1fr 0.6fr 0.8fr 60px;
  min-width: 720px;
}
#stockEntryList .dt-head-full { font-size: 10px; }

/* BOM specific table */
#bomList .dt-head-full, #bomList .dt-table-full .dt-row {
  grid-template-columns: 1.2fr 1fr 0.6fr 0.5fr 0.6fr 0.6fr 0.6fr 0.8fr 60px;
  min-width: 780px;
}
#bomList .dt-head-full { font-size: 10px; }

/* Grume / MP specific table */
#gdsMpList .dt-head-full, #gdsMpList .dt-table-full .dt-row {
  grid-template-columns: 0.8fr 1fr 0.8fr 0.7fr 0.7fr 0.6fr 1.4fr 0.9fr 0.8fr 110px;
  min-width: 900px;
}
#gdsMpList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #gdsMpList .mp-dt-date::before { content: '📅 Date: '; }
  #gdsMpList .mp-dt-ref::before { content: '🏷️ Réf: '; }
  #gdsMpList .mp-dt-type::before { content: '🌳 Essence: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #gdsMpList .mp-dt-long::before { content: '↔️ Longueur: '; }
  #gdsMpList .mp-dt-dia::before { content: '⭕ Diamètre: '; }
  #gdsMpList .mp-dt-vol::before { content: '📦 Volume: '; }
  #gdsMpList .mp-dt-autres::before { content: 'ℹ️ Autres: '; }
  #gdsMpList .mp-dt-stat::before { content: '🏷️ Statut: '; }
  #gdsMpList .mp-dt-cons::before { content: '⏱️ Consommée: '; }
}

/* Routing specific table */
#routingList .dt-head-full, #routingList .dt-table-full .dt-row {
  grid-template-columns: 1.2fr 0.8fr 0.6fr 0.7fr 0.6fr 0.7fr 0.8fr 60px;
  min-width: 720px;
}
#routingList .dt-head-full { font-size: 10px; }

/* Produits finis specific table */
#gdsPfList .dt-head-full, #gdsPfList .dt-table-full .dt-row {
  grid-template-columns: 1.5fr 1.4fr 0.9fr 0.7fr 100px;
  min-width: 780px;
}
#gdsPfList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #gdsPfList .mp-dt-type::before { content: '📦 Produit: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #gdsPfList .mp-dt-long::before { content: '📐 Dimensions: '; font-weight: 600; font-size: 10px; color: var(--text-muted); }
  #gdsPfList .mp-dt-vol::before { content: '🔢 Qté: '; font-weight: 600; font-size: 10px; color: var(--text-muted); }
  #gdsPfList .mp-dt-stat::before { content: '🏷️ Statut: '; }
}

/* Équipements specific table */
#equipList .dt-head-full, #equipList .dt-table-full .dt-row {
  grid-template-columns: 1.5fr 0.8fr 1.6fr 0.8fr 110px;
  min-width: 780px;
}
#equipList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #equipList .mp-dt-type::before { content: '🔧 Équipement: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #equipList .mp-dt-date::before { content: '📅 Installé: '; }
  #equipList .mp-dt-autres::before { content: '🪚 Disque: '; }
  #equipList .mp-dt-stat::before { content: '🏷️ Statut: '; }
}

/* Séchage specific table */
#dryList .dt-head-full, #dryList .dt-table-full .dt-row {
  grid-template-columns: 1.3fr 0.8fr 0.7fr 0.5fr 0.8fr 0.8fr 0.9fr 120px;
  min-width: 900px;
}
#dryList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #dryList .mp-dt-ref::before { content: '🏷️ Lot: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #dryList .mp-dt-type::before { content: '🌳 Essence: '; }
  #dryList .mp-dt-vol::before { content: '📦 Volume: '; }
  #dryList .mp-dt-long::before { content: '🌡️ Temp: '; }
  #dryList .mp-dt-date::before { content: '📅 Entrée: '; }
  #dryList .mp-dt-stat::before { content: '🏷️ Statut: '; }
}

/* Équipes specific table */
#shiftsList .dt-head-full, #shiftsList .dt-table-full .dt-row {
  grid-template-columns: 1fr 2fr 150px;
  min-width: 660px;
}
#shiftsList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #shiftsList .mp-dt-ref::before { content: '👥 Équipe: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #shiftsList .mp-dt-autres::before { content: '🧑‍🤝‍🧑 Membres: '; }
}

/* Journal d'activité specific table */
#auditLogsList .dt-head-full, #auditLogsList .dt-table-full .dt-row {
  grid-template-columns: 0.9fr 2fr 1fr;
  min-width: 640px;
}
#auditLogsList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #auditLogsList .mp-dt-date::before { content: '📅 Date: '; }
  #auditLogsList .mp-dt-autres::before { content: '📝 Action: '; font-weight: 600; font-size: 10px; color: var(--text-muted); }
  #auditLogsList .mp-dt-vol::before { content: '👤 Utilisateur: '; }
}

/* Maintenance specific table */
#maintList .dt-head-full, #maintList .dt-table-full .dt-row {
  grid-template-columns: 1fr 2.5fr;
  min-width: 540px;
}
#maintList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #maintList .mp-dt-date::before { content: '📅 Date: '; }
  #maintList .mp-dt-autres::before { content: '🔧 Opération: '; font-weight: 600; font-size: 10px; color: var(--text-muted); }
}

/* Qualité / inspections specific table */
#qualityList .dt-head-full, #qualityList .dt-table-full .dt-row {
  grid-template-columns: 1.4fr 1fr 0.7fr 60px;
  min-width: 620px;
}
#qualityList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #qualityList .mp-dt-type::before { content: '📦 Produit: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #qualityList .mp-dt-autres::before { content: '🔬 Type: '; }
  #qualityList .mp-dt-cons::before { content: '⚠️ Gravité: '; }
}

/* Planning tâches specific table */
#planningList .dt-head-full, #planningList .dt-table-full .dt-row {
  grid-template-columns: 1fr 1.6fr 0.9fr 0.7fr 0.8fr 90px;
  min-width: 780px;
}
#planningList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #planningList .mp-dt-date::before { content: '📅 Date: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #planningList .mp-dt-autres::before { content: '📝 Tâche: '; }
  #planningList .mp-dt-type::before { content: '👤 Assigné: '; }
  #planningList .mp-dt-cons::before { content: '⚡ Priorité: '; }
  #planningList .mp-dt-stat::before { content: '🏷️ Statut: '; }
}

/* Admin utilisateurs specific table */
#adminUserList .dt-head-full, #adminUserList .dt-table-full .dt-row {
  grid-template-columns: 1.6fr 1fr;
  min-width: 540px;
}
#adminUserList .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #adminUserList .mp-dt-type::before { content: '👤 Utilisateur: '; font-weight: 600; font-size: 10px; color: var(--accent-primary); }
  #adminUserList .mp-dt-stat::before { content: '🏷️ Rôle: '; }
}

/* Régularisation cales - historique specific table */
#calesRegul .dt-table-full .dt-head-full, #calesRegul .dt-table-full .dt-row {
  grid-template-columns: 1fr 2.5fr 1fr;
  min-width: 560px;
}
#calesRegul .dt-table-full .dt-head-full { font-size: 10px; }
@media (max-width: 639px) {
  #calesRegul .mp-dt-date::before { content: '📅 Date: '; }
  #calesRegul .mp-dt-autres::before { content: '⚖️ Opération: '; font-weight: 600; font-size: 10px; color: var(--text-muted); }
  #calesRegul .mp-dt-vol::before { content: '👤 Par: '; }
}

/* ═══════ Module Données — chips, toolbar, tableau dynamique ═══════ */
.data-chips {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.data-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  padding: 8px 12px;
  border-radius: 20px;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  background: var(--glass-bg, rgba(255,255,255,0.04));
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.data-chip:hover { border-color: var(--accent-primary, #f59e0b); color: var(--text-primary); }
.data-chip.active {
  background: linear-gradient(135deg, var(--accent-primary, #f59e0b), var(--accent-secondary, #d97706));
  border-color: transparent;
  color: #fff;
}
.data-chip-count {
  font-size: 10px;
  background: rgba(0,0,0,0.15);
  border-radius: 10px;
  padding: 1px 7px;
  font-weight: 700;
}
.data-chip:not(.active) .data-chip-count { background: rgba(127,127,127,0.18); }

/* ═══════ DATA TABS (nouveau sélecteur) ═══════ */
.data-tabs-header {
  padding: 16px 16px 0 16px;
}
.data-tabs-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.data-tabs-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 12px;
}
.data-chips-scroll {
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--glass-border, rgba(255,255,255,0.08));
  padding: 0 16px;
}
.data-chips-scroll::-webkit-scrollbar { display: none; }
.data-tab {
  position: relative;
  flex: 0 0 auto;
  padding: 12px 16px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, background .2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.data-tab:hover { color: var(--text-primary); background: rgba(255,255,255,0.04); }
.data-tab-active {
  color: var(--accent-primary, #f59e0b);
  font-weight: 700;
}
.data-tab-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent-primary, #f59e0b);
  border-radius: 2px 2px 0 0;
}
.data-tab-count {
  font-size: 10px;
  background: rgba(127,127,127,0.15);
  border-radius: 8px;
  padding: 1px 6px;
  font-weight: 700;
  color: var(--text-muted);
}
.data-tab-active .data-tab-count {
  background: rgba(245,158,11,0.2);
  color: var(--accent-primary, #f59e0b);
}

/* ═══════ DATA ACTION BUTTONS ═══════ */
.data-action-btn {
  padding: 6px 12px;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  background: var(--glass-bg, rgba(255,255,255,0.04));
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
}
.data-action-btn:hover {
  background: rgba(255,255,255,0.08);
  color: var(--text-primary);
  border-color: rgba(255,255,255,0.2);
}
.data-action-primary {
  background: var(--accent-primary, #f59e0b);
  border-color: var(--accent-primary, #f59e0b);
  color: #fff;
}
.data-action-primary:hover {
  background: var(--accent-secondary, #d97706);
  border-color: var(--accent-secondary, #d97706);
  color: #fff;
}
[data-theme="light"] .data-action-btn {
  border-color: #e2e8f0;
  background: #fff;
  color: #475569;
}
[data-theme="light"] .data-action-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }

.data-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.data-toolbar-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.data-toolbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.data-tbl-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  background: var(--glass-bg, rgba(255,255,255,0.03));
}
.data-tbl-table { min-width: 100%; }
.data-tbl-head,
.data-tbl-row {
  padding-left: 12px;
  padding-right: 12px;
  gap: 10px;
}
.data-tbl-head {
  background: rgba(127,127,127,0.08);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-muted);
}
.data-tbl-head span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.data-tbl-row { transition: background .12s ease; }
.data-tbl-row:hover { background: rgba(255,255,255,0.04); }
.data-tbl-cell { padding: 8px 10px; font-size: 12px; color: var(--text-primary); }

/* ═══════ EXCEL-LIKE TABLE ═══════ */
.data-excel {
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 10px;
  overflow: hidden;
  background: var(--glass-bg, rgba(255,255,255,0.02));
  font-size: 12px;
}
.data-excel-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.2) transparent;
}
.data-excel-scroll::-webkit-scrollbar { height: 6px; }
.data-excel-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 3px; }
.data-excel-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 3px; }
.data-excel-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }
.data-excel-header {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 10;
  background: linear-gradient(180deg, rgba(40,40,50,0.95), rgba(35,35,45,0.9));
  border-bottom: 2px solid var(--accent-primary, #f59e0b);
  backdrop-filter: blur(8px);
  will-change: transform;
}
.data-th {
  flex: 1 1 0;
  min-width: 72px;
  padding: 8px 9px;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: background .15s, color .15s;
}
.data-th:last-child { border-right: none; }
.data-th:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.data-th-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.data-th-filter {
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(255,255,255,0.08);
  border-radius: 4px;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.data-th-filter:hover { background: var(--accent-primary, #f59e0b); color: #fff; }
.data-excel-body { max-height: 60vh; overflow-y: auto; overflow-x: hidden; }
.data-tr {
  display: flex;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background .1s;
}
.data-tr:hover { background: rgba(59,130,246,0.08); }
.data-tr-alt { background: rgba(255,255,255,0.015); }
.data-tr-alt:hover { background: rgba(59,130,246,0.08); }
.data-td {
  flex: 1 1 0;
  min-width: 72px;
  padding: 6px 9px;
  border-right: 1px solid rgba(255,255,255,0.04);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
  color: var(--text-primary);
  line-height: 1.4;
}
.data-td:last-child { border-right: none; }
.data-td-empty { color: var(--text-muted); opacity: 0.5; }
.data-tr-total {
  position: sticky;
  bottom: 0;
  z-index: 9;
  background: linear-gradient(0deg, rgba(40,40,50,0.97), rgba(45,45,55,0.92));
  border-top: 2px solid var(--accent-primary, #f59e0b);
  font-weight: 800;
  backdrop-filter: blur(6px);
}
.data-tr-total:hover { background: linear-gradient(0deg, rgba(40,40,50,0.97), rgba(45,45,55,0.92)); }
.data-tr-total .data-td { font-weight: 800; color: var(--text-primary); }
.data-td-total-label { color: var(--accent-primary, #f59e0b); text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; }
.data-td-total { font-variant-numeric: tabular-nums; }

/* ─── Grid v2 : alignements, statuts colorés, resize, filtres opérateurs, badge KPI ─── */
.data-td-align-right { text-align: right; justify-content: flex-end; font-variant-numeric: tabular-nums; }
.data-td-align-center { text-align: center; justify-content: center; }
.data-td-align-left { text-align: left; justify-content: flex-start; }
.data-td-num, .data-th[data-kind="num"] { font-variant-numeric: tabular-nums; }

.data-cell-ok { color: var(--success, #059669); font-weight: 600; }
.data-cell-run { color: var(--primary, #2563eb); font-weight: 600; }
.data-cell-err { color: var(--danger, #ef4444); font-weight: 600; }
[data-theme="light"] .data-cell-ok { color: #047857; }
[data-theme="light"] .data-cell-run { color: #1d4ed8; }
[data-theme="light"] .data-cell-err { color: #b91c1c; }

.data-th { position: relative; }
.data-th-resize {
  position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
  cursor: col-resize; z-index: 5; touch-action: none;
}
.data-th-resize::after {
  content: ''; position: absolute; top: 20%; bottom: 20%; right: 3px; width: 1px;
  background: rgba(255,255,255,0.15); transition: background .15s;
}
.data-th-resize:hover::after, .data-th-resize:active::after { background: var(--accent-primary, #f59e0b); }

.data-filter-op-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.data-filter-op {
  flex: 1; min-width: 0; background: rgba(255,255,255,0.06); color: var(--text-primary);
  border: 1px solid var(--glass-border); border-radius: 6px;
  font-size: 11px; padding: 5px 6px; outline: none;
}
.data-filter-op:focus { border-color: var(--primary, #2563eb); }
.data-filter-clear {
  width: 22px; height: 22px; flex-shrink: 0; border: none; border-radius: 5px;
  background: rgba(239,68,68,0.18); color: var(--danger, #ef4444); cursor: pointer;
  font-size: 11px; display: flex; align-items: center; justify-content: center;
}
.data-filter-clear:hover { background: rgba(239,68,68,0.3); }
.data-filter-popup[data-filter-active]::before {
  content: ''; position: absolute; top: -1px; left: 0; right: 0; height: 2px;
  background: var(--accent-primary, #f59e0b); border-radius: 8px 8px 0 0;
}
.data-filter-popup[data-filter-active] { border-color: rgba(245,158,11,0.5); }

.data-kpi-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 8px 0 10px;
  padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 700;
  color: #0f172a; background: linear-gradient(120deg, var(--accent-primary, #f59e0b), #fbbf24);
  box-shadow: 0 4px 14px rgba(245,158,11,0.3);
}
.data-kpi-badge-x {
  width: 18px; height: 18px; border: none; border-radius: 50%; cursor: pointer;
  background: rgba(15,23,42,0.15); color: #0f172a; font-size: 10px; line-height: 1;
  display: flex; align-items: center; justify-content: center; transition: background .15s;
}
.data-kpi-badge-x:hover { background: rgba(15,23,42,0.3); }
[data-theme="light"] .data-kpi-badge { color: #78350f; }
[data-theme="light"] .data-tr-total { background: #eef2f7; }
.data-tbl-empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--text-muted);
  font-size: 13px;
}

/* Filters */
.data-filter-popup {
  position: fixed;
  z-index: 100;
  background: var(--surface-bg, #1e1e2e);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.15));
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  padding: 8px;
  min-width: 160px;
  max-height: 240px;
  overflow-y: auto;
}
.data-filter-input {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  background: rgba(0,0,0,0.2);
  color: var(--text-primary);
  font-size: 11px;
  margin-bottom: 6px;
  outline: none;
}
.data-filter-input:focus { border-color: var(--accent-primary, #f59e0b); }
.data-filter-opts { max-height: 160px; overflow-y: auto; }
.data-filter-opt {
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  color: var(--text-secondary);
  transition: background .1s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.data-filter-opt:hover { background: rgba(59,130,246,0.15); color: var(--text-primary); }

/* Pagination */
.data-page-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 0;
  border-top: 1px solid var(--glass-border, rgba(255,255,255,0.08));
}
.data-page-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  color: var(--text-primary);
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  transition: background .12s, opacity .12s;
}
.data-page-btn:hover { background: rgba(59,130,246,0.15); }
.data-page-btn.disabled, .data-page-btn:disabled { opacity: 0.3; cursor: default; }
.data-page-info {
  font-size: 11px;
  color: var(--text-muted);
  min-width: 80px;
  text-align: center;
}
.data-page-size {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.12));
  border-radius: 6px;
  color: var(--text-primary);
  font-size: 11px;
  padding: 3px 6px;
}

/* Search box */
.data-filters-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.data-search-box {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
  border-radius: 8px;
  transition: border-color .15s;
}
.data-search-box:focus-within { border-color: var(--accent-primary, #f59e0b); }
.data-search-icon { color: var(--text-muted); flex-shrink: 0; }
.data-search-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  padding: 8px 0;
  outline: none;
}
.data-search-input::placeholder { color: var(--text-muted); opacity: 0.6; }
.data-search-clear {
  width: 20px;
  height: 20px;
  border: none;
  background: rgba(255,255,255,0.1);
  border-radius: 50%;
  color: var(--text-muted);
  font-size: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.data-search-clear:hover { background: rgba(239,68,68,0.3); color: #ef4444; }
.data-row-count {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
  font-weight: 600;
}

/* Light theme */
[data-theme="light"] .data-excel {
  border-color: #e2e8f0;
  background: #fff;
}
[data-theme="light"] .data-excel-header {
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border-bottom-color: var(--accent-primary, #f59e0b);
}
[data-theme="light"] .data-th { color: #475569; border-right-color: #e2e8f0; }
[data-theme="light"] .data-th:hover { background: #f1f5f9; color: #0f172a; }
[data-theme="light"] .data-tr { border-bottom-color: #f1f5f9; }
[data-theme="light"] .data-tr:hover { background: rgba(59,130,246,0.06); }
[data-theme="light"] .data-tr-alt { background: #f8fafc; }
[data-theme="light"] .data-td { border-right-color: #f1f5f9; color: #0f172a; }
[data-theme="light"] .data-td-empty { color: #94a3b8; }
[data-theme="light"] .data-search-box { background: #f1f5f9; border-color: #e2e8f0; }
[data-theme="light"] .data-filter-popup { background: #fff; border-color: #e2e8f0; box-shadow: 0 8px 24px rgba(0,0,0,0.15); }
[data-theme="light"] .data-filter-input { background: #f8fafc; border-color: #e2e8f0; color: #0f172a; }
[data-theme="light"] .data-excel-scroll::-webkit-scrollbar-track { background: #f1f5f9; }
[data-theme="light"] .data-excel-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; }
[data-theme="light"] .data-action-btn { border-color: #e2e8f0; background: #fff; color: #475569; }
[data-theme="light"] .data-action-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .data-page-btn { background: #fff; border-color: #e2e8f0; color: #475569; }
[data-theme="light"] .data-page-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
[data-theme="light"] .data-page-info { color: #64748b; }
[data-theme="light"] .data-page-size { background: #fff; border-color: #e2e8f0; color: #475569; }
  font-size: 11.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.data-tbl-empty {
  padding: 22px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--text-muted);
}
.data-tbl-cell-label { display: none; }

/* ── Mode mobile : vrai tableau lié entête + lignes, scroll horizontal ── */
@media (max-width: 639px) {
  .data-tbl-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    border: 1px solid var(--glass-border, rgba(255,255,255,0.1));
    background: transparent;
  }
  .data-tbl-table { min-width: max-content; }
  .data-tbl-head {
    display: grid !important; /* surcharge le .dt-head{display:none} mobile global */
  }
  .data-tbl-head span,
  .data-tbl-cell {
    font-size: 9.5px;
    letter-spacing: .02em;
  }
}
@media (min-width: 640px) {
  .data-tbl-cell-label { display: none !important; }
}

/* ═══ KPI Direction — Scierie (lignes A/B, basé grumes) ═══ */
.kd-dash { position: relative; }

/* Dashboard KPI en plein écran */
#screenMenu.dashboard-fullscreen .screen-scroll,
body.dashboard-fullscreen .screen-scroll { padding-top: 69px !important; padding-bottom: 61px !important; padding-left: 0 !important; padding-right: 0 !important; }
#screenMenu.dashboard-fullscreen #dashboardKPIs,
body.dashboard-fullscreen #dashboardKPIs { width: 100%; max-width: 100%; padding: 0; }
#screenMenu.dashboard-fullscreen .kd-dash,
body.dashboard-fullscreen .kd-dash { padding: 0; }

/* ── Bandeau santé ── */
.kd-health {
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, rgba(16,185,129,0.14), rgba(34,211,238,0.06));
  border: 1px solid rgba(16,185,129,0.28);
  border-radius: 16px; padding: 12px 14px; margin-bottom: 14px;
  animation: kdCardUp 0.55s cubic-bezier(.2,.8,.2,1) both;
}
.kd-health-orb { position: relative; width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; }
.kd-health-orb::before, .kd-health-orb::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #10b981; opacity: 0.5;
  animation: kdPing 2.4s ease-out infinite;
}
.kd-health-orb::after { animation-delay: 1.2s; border-color: #a78bfa; }
.kd-health-orb span { width: 15px; height: 15px; border-radius: 50%; background: #10b981; box-shadow: 0 0 16px #10b981; }
@keyframes kdPing { 0% { transform: scale(0.7); opacity: 0.7; } 100% { transform: scale(1.6); opacity: 0; } }
.kd-health-txt { flex: 1; min-width: 0; }
.kd-health-big { font-size: 13px; font-weight: 800; }
.kd-health-small { font-size: 11px; color: var(--text-muted); margin-top: 2px; }
.kd-health-score { flex-shrink: 0; text-align: right; }
.kd-health-score-n { font-size: 22px; font-weight: 800; color: #10b981; letter-spacing: -0.5px; line-height: 1.1; }
.kd-health-score-l { font-size: 9px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 1px; }

/* ── Panneaux LIGNE A/B ── */
.kd-lignes-wrap { display: block; }
.kd-ligne {
  position: relative;
  background: var(--glass-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border);
  border-radius: 20px; padding: 16px 14px 14px; margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: kdCardUp 0.55s cubic-bezier(.2,.8,.2,1) both;
}
.kd-ligne::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(16,185,129,0.07), transparent 55%);
}
.kd-ligne.kd-a { border-color: rgba(16,185,129,0.35); animation-delay: 0.1s; }
.kd-ligne.kd-b { border-color: rgba(167,139,250,0.35); animation-delay: 0.2s; }
@keyframes kdCardUp { from { opacity: 0; transform: translateY(16px) scale(0.98); } to { opacity: 1; transform: none; } }

.kd-lg-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.kd-lg-badge {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 20px; font-weight: 900;
}
.kd-ligne.kd-a .kd-lg-badge { background: rgba(16,185,129,0.14); color: #10b981; border: 1px solid rgba(16,185,129,0.45); box-shadow: 0 0 22px rgba(16,185,129,0.20); }
.kd-ligne.kd-b .kd-lg-badge { background: rgba(167,139,250,0.14); color: #a78bfa; border: 1px solid rgba(167,139,250,0.45); box-shadow: 0 0 22px rgba(167,139,250,0.20); }
.kd-lg-titre { font-size: 15px; font-weight: 800; letter-spacing: 0.5px; }
.kd-ligne.kd-a .kd-lg-titre { color: #10b981; }
.kd-ligne.kd-b .kd-lg-titre { color: #a78bfa; }
.kd-lg-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.kd-lg-rag { margin-left: auto; width: 10px; height: 10px; border-radius: 50%; position: relative; }
.kd-ligne.kd-a .kd-lg-rag { background: #10b981; }
.kd-ligne.kd-b .kd-lg-rag { background: #fbbf24; }
.kd-lg-rag::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.4; animation: kdPing 2s infinite; }
.kd-ligne.kd-a .kd-lg-rag { color: #10b981; }
.kd-ligne.kd-b .kd-lg-rag { color: #fbbf24; }

/* rendement principal */
.kd-lg-main { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.kd-lg-yield { position: relative; width: 74px; height: 74px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.kd-lg-yield i {
  width: 58px; height: 58px; border-radius: 50%;
  background: var(--bg-secondary);
  display: grid; place-items: center; font-style: normal; font-size: 17px; font-weight: 900;
  animation: kdRingSweep 1.2s ease-out both;
}
.kd-ligne.kd-a .kd-lg-yield i { color: #10b981; }
.kd-ligne.kd-b .kd-lg-yield i { color: #a78bfa; }
@keyframes kdRingSweep { from { transform: scale(0.5); opacity: 0; } }
.kd-lg-of { flex: 1; min-width: 0; }
.kd-lg-of-lab { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }
.kd-lg-of-num { font-size: 15px; font-weight: 800; margin-top: 2px; }
.kd-lg-of-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.kd-lg-of-badge {
  display: inline-block; font-size: 9px; font-weight: 800; padding: 2px 8px; border-radius: 99px; margin-top: 6px;
}
.kd-ligne.kd-a .kd-lg-of-badge { color: #10b981; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.32); animation: kdPulse 1.8s infinite; }
.kd-ligne.kd-b .kd-lg-of-badge { color: #a78bfa; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.32); animation: kdPulse 1.8s 0.4s infinite; }
@keyframes kdPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.55; } }
@media (max-width: 640px) {
  .kd-lg-of-badge { animation-duration: 2.4s !important; }
  .kd-grume-box .kd-gn { transition: color 0.3s ease; }
}

.kd-lg-grumes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.kd-grume-box {
  background: var(--bg-tertiary);
  border: 1px solid var(--border-color);
  border-radius: 12px; padding: 9px 6px; text-align: center;
}
.kd-grume-box .kd-gn { font-size: 18px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kd-ligne.kd-a .kd-grume-box .kd-gn { color: #2dd4bf; }
.kd-ligne.kd-b .kd-grume-box .kd-gn { color: #60a5fa; }
.kd-grume-box .kd-gl { font-size: 8px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.kd-grume-box.kd-hl { border-color: rgba(16,185,129,0.30); background: rgba(16,185,129,0.07); }
.kd-grume-box.kd-hl .kd-gn { color: #10b981; }

.kd-lg-bar-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.kd-lg-bar-lab { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; }
.kd-lg-bar-val { font-size: 11px; font-weight: 800; }
.kd-lg-bar { height: 8px; border-radius: 4px; background: var(--v9-track); overflow: hidden; }
.kd-lg-bar i { display: block; height: 100%; border-radius: 4px; transform-origin: left; animation: kdFillGrow 0.8s cubic-bezier(.2,.8,.2,1) 0.25s both; }
.kd-ligne.kd-a .kd-lg-bar i { background: linear-gradient(90deg, #10b981, #2dd4bf); }
.kd-ligne.kd-b .kd-lg-bar i { background: linear-gradient(90deg, #a78bfa, #60a5fa); }
@keyframes kdFillGrow { from { transform: scaleX(0); } }

.kd-lg-pf { margin-top: 12px; }
.kd-lg-pf-lab { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; }
.kd-lg-pf-bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.kd-lg-pf-bars i { flex: 1; min-width: 0; border-radius: 3px 3px 0 0; transform-origin: bottom; animation: kdBarGrow 0.7s cubic-bezier(.2,.8,.2,1) both; }
.kd-ligne.kd-a .kd-lg-pf-bars i { background: #10b981; }
.kd-ligne.kd-b .kd-lg-pf-bars i { background: #a78bfa; }
@keyframes kdBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ── ACCORDION LIGNES A/B ── */
.kd-acc-wrap { display: flex; flex-direction: column; gap: 0; }
.kd-acc-item {
  background: var(--glass-card-bg); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border: 1px solid var(--glass-card-border);
  border-radius: 16px; overflow: hidden; transition: border-color 0.25s, margin 0.3s;
  margin-bottom: 6px;
}
.kd-acc-item:last-child { margin-bottom: 0; }
.kd-acc-item:hover { border-color: rgba(255,255,255,0.12); }
.kd-acc-head {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px;
  cursor: pointer; transition: background 0.18s;
  -webkit-tap-highlight-color: transparent;
}
.kd-acc-head:active { background: rgba(255,255,255,0.03); }
.kd-acc-badge {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  font-size: 14px; font-weight: 900; flex-shrink: 0;
}
.kd-acc-badge-a { background: rgba(16,185,129,0.14); color: #10b981; border: 1px solid rgba(16,185,129,0.35); }
.kd-acc-badge-b { background: rgba(167,139,250,0.14); color: #a78bfa; border: 1px solid rgba(167,139,250,0.35); }
.kd-acc-yield {
  width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
}
.kd-acc-yield i { font-size: 10px; font-weight: 900; font-style: normal; }
.kd-acc-info { flex: 1; min-width: 0; }
.kd-acc-name { font-size: 13px; font-weight: 800; color: var(--text-primary); line-height: 1.2; }
.kd-acc-name span { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.kd-acc-sub { font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-acc-of-line { font-size: 10.5px; color: var(--text-muted); padding: 5px 12px 7px; border-top: 1px solid var(--border-color, rgba(255,255,255,0.08)); line-height: 1.5; }
.kd-acc-of-line b { color: var(--accent-primary, #22d3ee); font-weight: 700; }
.kd-acc-of-empty { color: var(--text-muted); opacity: 0.6; }
.kd-acc-minis { display: flex; gap: 8px; flex-shrink: 0; }
.kd-acc-mini { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.kd-acc-mv { font-size: 12px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.kd-acc-ml { font-size: 8px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2px; }
.kd-acc-chevron {
  flex-shrink: 0; color: var(--text-muted);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.kd-acc-item.kd-acc-open .kd-acc-chevron { transform: rotate(180deg); }
.kd-acc-body {
  max-height: 0; overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
  opacity: 0; padding: 0 14px 0;
}
.kd-acc-item.kd-acc-open .kd-acc-body {
  max-height: 2000px; opacity: 1; padding: 0 14px 14px;
}
.kd-acc-item.kd-acc-open .kd-acc-head { border-radius: 16px 16px 0 0; }

/* ── Onglets Ligne A/B — données partagées sur un même espace ── */
.kd-lp-wrap { display: flex; flex-direction: column; }
.kd-lp-tabs { display: flex; gap: 4px; background: rgba(148,163,184,0.10); padding: 4px; border-radius: 12px; margin-bottom: 10px; }
.kd-lp-tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  font: 700 12px var(--font-body); color: var(--text-secondary);
  padding: 8px 10px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s;
}
.kd-lp-tab:hover { color: var(--text-primary); }
.kd-lp-tab-active { background: var(--bg-primary); color: var(--text-primary); box-shadow: 0 2px 8px rgba(0,0,0,0.18); }
.kd-lp-tab[data-line="A"].kd-lp-tab-active { color: #10b981; }
.kd-lp-tab[data-line="B"].kd-lp-tab-active { color: #a78bfa; }
.kd-lp-tab-badge {
  width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 900; color: #fff; transition: opacity 0.2s;
}
.kd-lp-tab-badge-a { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.45); }
.kd-lp-tab-badge-b { background: #a78bfa; box-shadow: 0 0 8px rgba(167,139,250,0.45); }
.kd-lp-tab:not(.kd-lp-tab-active) .kd-lp-tab-badge { opacity: 0.5; }
.kd-lp-pane { display: block; }
.kd-lp-hidden { display: none !important; }

/* ── Yield KPI + Objectif (body uniquement) ── */
.kd-lp-yield-label {
  font-size: 8px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.3px; text-align: center;
}
.kd-lp-yield-kpi {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 10px 12px;
}
.kd-lp-yk-row { display: flex; align-items: center; gap: 0; justify-content: space-between; }
.kd-lp-yk-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1 1 0; min-width: 0; text-align: center; }
.kd-lp-yk-val { font-size: 14px; font-weight: 900; color: var(--text-primary); line-height: 1.2; white-space: nowrap; }
.kd-lp-yk-lab { font-size: 8px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.2px; margin-top: 2px; white-space: nowrap; }
.kd-lp-yk-sep { width: 1px; height: 28px; background: var(--border-color); flex-shrink: 0; margin: 0 4px; }
.kd-lp-yk-bar { height: 6px; border-radius: 3px; background: rgba(148,163,184,0.30); border: 1px solid rgba(148,163,184,0.20); margin-top: 8px; overflow: hidden; }
.kd-lp-yk-bar-fill { height: 100%; border-radius: 2px; transition: width 0.7s cubic-bezier(.2,.8,.2,1); }
/* Mobile : les KPIs en rangée compacte deviennent une grille structurée
   de cartes étiquetées (label au-dessus, valeur en dessous) — supprime
   les séparateurs verticaux qui se replient en désordre sur petit écran. */
@media (max-width: 639px) {
  .kd-lp-yield-kpi { padding: 10px; }
  .kd-lp-yk-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .kd-lp-yk-sep { display: none; }
  .kd-lp-yk-item {
    flex-direction: column-reverse;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    gap: 3px;
    background: rgba(148, 163, 184, 0.08);
    border: 1px solid var(--border-color);
    border-radius: 10px;
    padding: 8px 10px;
  }
  .kd-lp-yk-val { font-size: 16px; }
  .kd-lp-yk-lab { font-size: 9px; margin-top: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  .kd-lp-yk-bar { margin-top: 10px; }
}
.kd-lp-inner-head .kd-lp-yield {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
}
.kd-lp-inner-head .kd-lp-yield i { font-size: 13px; font-weight: 900; font-style: normal; }
.kd-lp-inner-head .kd-lp-of { flex: 1; min-width: 0; }
.kd-lp-inner-head .kd-lp-of-num { font-size: 12px; font-weight: 800; color: var(--text-primary); }
.kd-lp-inner-head .kd-lp-of-pcs { font-size: 11px; color: var(--text-muted); }
.kd-lp-inner-head .kd-lp-of-badge {
  display: inline-block; font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; margin-top: 2px; animation: kdPulse 1.8s infinite;
}
.kd-lp-inner-head .kd-lp-of-badge-a { color: #10b981; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.32); }
.kd-lp-inner-head .kd-lp-of-badge-b { color: #a78bfa; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.32); }
.kd-lp-badge {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  font-size: 15px; font-weight: 900; letter-spacing: 0.5px; flex-shrink: 0;
}
.kd-lp-a { background: rgba(16,185,129,0.14); color: #10b981; border: 1px solid rgba(16,185,129,0.40); box-shadow: 0 0 16px rgba(16,185,129,0.18); }
.kd-lp-b { background: rgba(167,139,250,0.14); color: #a78bfa; border: 1px solid rgba(167,139,250,0.40); box-shadow: 0 0 16px rgba(167,139,250,0.18); }
.kd-lp-yield {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  flex-shrink: 0;
}
.kd-lp-yield i {
  font-size: 13px; font-weight: 900; font-style: normal;
}
.kd-lp-a .kd-lp-yield i { color: #10b981; }
.kd-lp-b .kd-lp-yield i { color: #a78bfa; }
.kd-lp-of { min-width: 0; flex: 1; }
.kd-lp-of-title { font-size: 13px; font-weight: 900; color: var(--text-primary); }
.kd-lp-a .kd-lp-of-title { color: #10b981; }
.kd-lp-b .kd-lp-of-title { color: #a78bfa; }
.kd-lp-of-title span { font-weight: 600; color: var(--text-muted); font-size: 11px; margin-left: 4px; }
.kd-lp-of-num { font-size: 11px; font-weight: 700; color: var(--text-primary); }
.kd-lp-of-pcs { font-size: 10px; color: var(--text-muted); }
.kd-lp-of-badge {
  display: inline-block; font-size: 9px; font-weight: 800; padding: 2px 7px;
  border-radius: 999px; margin-top: 2px; animation: kdPulse 1.8s infinite;
}
.kd-lp-of-badge-a { color: #10b981; background: rgba(16,185,129,0.12); border: 1px solid rgba(16,185,129,0.32); }
.kd-lp-of-badge-b { color: #a78bfa; background: rgba(167,139,250,0.12); border: 1px solid rgba(167,139,250,0.32); }

.kd-lp-stats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.kd-lp-stat {
  text-align: center; padding: 8px 4px 6px; border-radius: 10px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.kd-lp-sv { font-size: 18px; font-weight: 900; line-height: 1; margin-bottom: 2px; }
.kd-lp-sv-a { color: #10b981; }
.kd-lp-sv-b { color: #a78bfa; }
.kd-lp-sl { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; }

.kd-lp-progress { }
.kd-lp-prog-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 3px; }
.kd-lp-prog-bar { height: 5px; border-radius: 3px; background: rgba(148,163,184,0.14); overflow: hidden; }
.kd-lp-prog-bar i { display: block; height: 100%; border-radius: 3px; transition: width 0.7s cubic-bezier(.2,.8,.2,1); }

.kd-lp-pf { }
.kd-lp-pf-empty { display: flex; align-items: center; justify-content: center; height: 60px; border-radius: 10px; background: rgba(148,163,184,0.06); border: 1px dashed rgba(148,163,184,0.20); }
.kd-lp-pf-empty span { font-size: 11px; font-weight: 600; color: var(--text-muted); }
.kd-lp-pf-head { display: flex; justify-content: space-between; font-size: 10px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 6px; }
.kd-lp-pf-note { font-size: 9px; font-weight: 600; color: var(--text-muted); font-style: italic; margin: -3px 0 5px; }
.kd-lp-line-chart { width: 100%; height: auto; display: block; }
.kd-lp-lc-line { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.kd-lp-lc-val { font-size: 7.5px; font-weight: 800; fill: var(--text-secondary); font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.kd-lp-lc-day { font-size: 7.5px; font-weight: 700; fill: var(--text-muted); font-family: var(--font-body); text-transform: uppercase; }
.kd-lc-ytic { font-size: 7px; font-weight: 700; fill: var(--text-muted); text-anchor: end; font-family: var(--font-body); font-variant-numeric: tabular-nums; }
.kd-lc-grid line { stroke: rgba(148,163,184,0.14); stroke-width: 1; stroke-dasharray: 2,3; }
.kd-lc-xguide { stroke: rgba(148,163,184,0.08); stroke-width: 1; }
.kd-lp-pf .kd-lc-dot { fill: currentColor; stroke: var(--bg-primary); stroke-width: 1.5; }
.kd-lp-pf .kd-lc-dot-today { fill: currentColor; stroke: var(--bg-primary); stroke-width: 2.5; filter: drop-shadow(0 0 4px currentColor); }
.kd-lp-pf .kd-lc-val-today { fill: currentColor; font-size: 9px; font-weight: 900; }
.kd-lp-pf .kd-lc-day-today { fill: currentColor; font-weight: 900; text-decoration: underline; text-underline-offset: 2px; }

/* ── KPIs secondaires (dashboard : grille kd-grid/kd-card retirée — Analyse de production déplacée vers Traçabilité) ── */

@media (max-width: 360px) {
  .kd-ligne { padding: 14px 12px 12px; }
  .kd-lg-badge { width: 40px; height: 40px; font-size: 17px; }
}
@media (min-width: 600px) {
  .kd-lignes-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .kd-lp-badge { width: 42px; height: 42px; font-size: 17px; }
  .kd-lp-yield { width: 58px; height: 58px; }
  .kd-lp-yield i { font-size: 15px; }
  .kd-lp-line-chart { max-height: 92px; }
}
@media (min-width: 900px) {
  .kd-lp-badge { width: 52px; height: 52px; font-size: 20px; }
  .kd-lp-yield { width: 80px; height: 80px; }
  .kd-lp-yield i { font-size: 18px; }
}

/* ════════════════════════════════════════════════════════════
   PANNEAU CONSOLIDÉ « VUE STOCK & FLUX » (1er plan du KPI)
   ════════════════════════════════════════════════════════════ */
.kd-sf {
  position: relative;
  background: var(--glass-card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-card-border);
  border-radius: 20px;
  padding: 16px 14px 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  animation: kdCardUp 0.55s cubic-bezier(.2,.8,.2,1) both;
}
.kd-sf::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(150deg, rgba(16,185,129,0.08), transparent 55%);
}
.kd-sf-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.kd-sf-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.kd-sf-ic {
  width: 34px; height: 34px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(16,185,129,0.14); color: #10b981; border: 1px solid rgba(16,185,129,0.4);
  box-shadow: 0 0 18px rgba(16,185,129,0.18);
}
.kd-sf-ic i { color: inherit; }
.kd-sf-title b { display: block; font-size: 16px; font-weight: 800; letter-spacing: 0.3px; }
.kd-sf-title span { display: block; font-size: 11px; color: var(--text-muted); font-weight: 600; margin-top: 1px; }
.kd-sf-rag {
  display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  font-size: 18px; font-weight: 800; color: #2dd4bf;
  background: rgba(45,212,191,0.1); border: 1px solid rgba(45,212,191,0.3);
  border-radius: 14px; padding: 9px 13px;
  position: relative; overflow: hidden;
  animation: kdRagGlow 30s ease-in-out infinite;
}
.kd-sf-rag::after {
  content: ''; position: absolute; top: 0; left: 0; width: 42%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.42), transparent);
  transform: translateX(-160%); pointer-events: none;
  animation: kdRagShine 28s ease-in-out infinite;
}
.kd-sf-rag-txt { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; position: relative; z-index: 1; }
.kd-sf-rag-lab { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; color: #2dd4bf; }
.kd-sf-rag-v { font-size: 17px; font-weight: 800; color: #2dd4bf; white-space: nowrap; }
.kd-sf-rag i { width: 9px; height: 9px; border-radius: 50%; background: #2dd4bf; position: relative; z-index: 1; animation: kdBlink 1.6s infinite; box-shadow: 0 0 0 0 rgba(45,212,191,0.6); }
@keyframes kdBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@keyframes kdRagGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(45,212,191,0); border-color: rgba(45,212,191,0.3); }
  50% { box-shadow: 0 0 18px 1px rgba(45,212,191,0.3); border-color: rgba(45,212,191,0.65); }
}
@keyframes kdRagShine {
  0% { transform: translateX(-160%); }
  55%, 100% { transform: translateX(320%); }
}
.kd-sf-rag, .kd-sf-rag i { animation-duration: 30s !important; }
.kd-sf-rag::after { animation-duration: 28s !important; }
.kd-sf-rag i { animation-duration: 1.6s !important; }
@media (prefers-reduced-motion: reduce) {
  .kd-sf-rag, .kd-sf-rag::after, .kd-sf-rag i { animation: none !important; }
  .skeleton { animation: none !important; background: var(--bg-tertiary) !important; }
}

.kd-sf-sec { margin-bottom: 14px; }
.kd-sf-sec:last-child { margin-bottom: 0; }
.kd-sf-lab {
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-secondary, #94a3b8); margin-bottom: 8px;
}

/* Zone 1 — Stock MP */
.kd-sf-kpi {
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 12px; padding: 10px 12px; margin-bottom: 14px;
}
.kd-ess-conso { margin-top: 6px; padding-top: 5px; border-top: 1px dashed var(--glass-border, rgba(148,163,184,0.18)); }
.kd-ess-conso-head { display: flex; align-items: baseline; gap: 5px; margin-bottom: 4px; }
.kd-ess-conso-lab { font-size: 7.5px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-ess-conso-val { font-size: 10.5px; font-weight: 900; color: var(--text-primary); white-space: nowrap; }
.kd-ess-conso-rot { font-size: 7.5px; font-weight: 700; color: #22d3ee; white-space: nowrap; }
.kd-ess-conso-rot b { font-size: 9px; }
/* ── Aujourd'hui — duo cartes dégradé ── */
.kd-ajd { margin-bottom: 14px; }
.kd-ajd-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kd-ajd-date { font-size: 11px; font-weight: 700; color: var(--text-secondary, #94a3b8); display: flex; align-items: center; gap: 5px; }
.kd-ajd-live { display: flex; align-items: center; gap: 5px; font-size: 9px; font-weight: 700; color: #10b981; text-transform: uppercase; letter-spacing: 0.4px; }
.kd-ajd-live i { width: 6px; height: 6px; border-radius: 50%; background: #10b981; box-shadow: 0 0 0 0 rgba(16,185,129,0.5); animation: kdBlink 1.6s infinite; }
.kd-ajd-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; max-width: 300px; margin: 0 auto; }
.kd-ajd-card {
  border-radius: 14px; padding: 12px 8px; display: flex; flex-direction: column; align-items: center; text-align: center;
  position: relative; overflow: hidden;
}
.kd-ajd-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.55; }
.kd-ajd-card--pcs { background: linear-gradient(135deg, rgba(16,185,129,0.15), rgba(34,211,238,0.1)); border: 1px solid rgba(16,185,129,0.35); }
.kd-ajd-card--pcs::before { background: linear-gradient(135deg, rgba(16,185,129,0.08), transparent 60%); }
.kd-ajd-card--pcs .kd-ajd-ic { color: #10b981; background: rgba(16,185,129,0.15); }
.kd-ajd-card--pcs .kd-ajd-num { color: #10b981; }
.kd-ajd-card--grm { background: linear-gradient(135deg, rgba(34,211,238,0.15), rgba(99,102,241,0.08)); border: 1px solid rgba(34,211,238,0.35); }
.kd-ajd-card--grm::before { background: linear-gradient(135deg, rgba(34,211,238,0.08), transparent 60%); }
.kd-ajd-card--grm .kd-ajd-ic { color: #22d3ee; background: rgba(34,211,238,0.15); }
.kd-ajd-card--grm .kd-ajd-num { color: #22d3ee; }
.kd-ajd-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; margin-bottom: 4px; position: relative; z-index: 1; }
.kd-ajd-num { font-size: 22px; font-weight: 900; line-height: 1; margin-bottom: 2px; position: relative; z-index: 1; }
.kd-ajd-lab { font-size: 9px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; position: relative; z-index: 1; }
/* ── Suivi objectif par ligne A/B ── */
.kd-rdt-lines { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--border-color); }
.kd-rdt-global { }
.kd-rdt-line-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 3px; }
.kd-rdt-line-lab { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; }
.kd-rdt-line-obj { font-size: 10px; font-weight: 600; color: var(--text-muted); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-rdt-line-pct { font-size: 11px; font-weight: 900; flex-shrink: 0; }
/* Zone 2.5 : carte rendement — donut + micro-KPI (pattern "Rendement de sciage") */
.kd-rdt-main { display: flex; align-items: center; gap: 14px; }
.kd-rdt-donut { width: 92px; height: 92px; flex-shrink: 0; position: relative; }
.kd-rdt-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kd-rdt-donut-hole { position: absolute; inset: 0; display: grid; place-items: center; }
.kd-rdt-donut-hole b { font-size: 20px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.kd-rdt-donut-hole i { font-style: normal; font-size: 9px; color: var(--text-muted); display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px; }
.kd-rdt-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.kd-rdt-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kd-rdt-row b { font-size: 15px; font-weight: 900; color: var(--text-primary); white-space: nowrap; }
.kd-rdt-row span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
@media (max-width: 639px) {
  .kd-rdt-donut { width: 80px; height: 80px; }
  .kd-rdt-donut-hole b { font-size: 17px; }
  .kd-rdt-row b { font-size: 14px; }
  .kd-rdt-main { gap: 12px; }
}
/* Chromage moderne : halo lumineux + écritures tabulaires attractives */
.kd-dash .kd-chrom,
.kd-dash .kd-chrom-soft { filter: drop-shadow(0 0 4px currentColor); }
.kd-rdt-donut-hole b,
.kd-lp-yk-hole b,
.kd-rdt-row b,
.kd-rt-hero b,
.kd-lp-mk b,
.kd-lp-yk-val,
.kd-lp-track-val,
.kd-lp-chip b,
.kd-lp-track-badge,
.kd-rt-day b {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}
@media (max-width: 639px) {
  .kd-dash .kd-chrom,
  .kd-dash .kd-chrom-soft { filter: drop-shadow(0 0 3px currentColor); }
}
/* Carte Stock & Rotation MP — héro + barre écoulement 7j (pattern V2) */
.kd-rt { display: flex; flex-direction: column; gap: 10px; }
.kd-rt-hero { display: flex; align-items: baseline; justify-content: center; gap: 8px; }
.kd-rt-hero b { font-size: 36px; font-weight: 900; line-height: 1; }
.kd-rt-hero span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; }
.kd-rt-mid { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.kd-rt-mid span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.kd-rt-mid b { font-size: 14px; font-weight: 900; color: var(--text-primary); }
.kd-rt-mid i { width: 1px; height: 14px; background: var(--border-color); display: inline-block; }
.kd-rt-flow { padding-top: 10px; border-top: 1px dashed var(--border-color); }
.kd-rt-flow-head { display: flex; align-items: baseline; gap: 6px; margin-bottom: 5px; }
.kd-rt-flow-lab { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; }
.kd-rt-flow-sp { flex: 1; }
.kd-rt-flow-badge { font-size: 10px; font-weight: 900; flex-shrink: 0; }
.kd-rt-bars { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; height: 34px; }
.kd-rt-bar { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; }
.kd-rt-bar i { display: block; width: 70%; min-height: 3px; border-radius: 3px 3px 2px 2px; opacity: 0.9; }
.kd-rt-bar em { font-style: normal; font-size: 7.5px; color: var(--text-muted); text-transform: uppercase; }
@media (max-width: 639px) {
  .kd-rt-hero b { font-size: 30px; }
}
/* Accordéon ligne — corps : donut + tracks OF/Objectif + chips (pattern Ligne A/B) */
.kd-lp-yk-main { display: flex; align-items: center; gap: 14px; }
.kd-lp-yk-donut { width: 76px; height: 76px; flex-shrink: 0; position: relative; }
.kd-lp-yk-donut svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.kd-lp-yk-hole { position: absolute; inset: 0; display: grid; place-items: center; }
.kd-lp-yk-hole b { font-size: 16px; font-weight: 900; color: var(--text-primary); line-height: 1; }
.kd-lp-yk-hole i { font-style: normal; font-size: 7.5px; color: var(--text-muted); display: block; text-align: center; text-transform: uppercase; letter-spacing: 0.4px; margin-top: 2px; }
.kd-lp-yk-side { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.kd-lp-mk { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.kd-lp-mk b { font-size: 16px; font-weight: 900; color: var(--text-primary); white-space: nowrap; }
.kd-lp-mk span { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
.kd-lp-tracks { margin-top: 12px; padding-top: 11px; border-top: 1px dashed var(--border-color); display: flex; flex-direction: column; gap: 10px; }
.kd-lp-track-head { display: flex; align-items: baseline; gap: 6px; }
.kd-lp-track-lab { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.3px; flex-shrink: 0; }
.kd-lp-track-sp { flex: 1; }
.kd-lp-track-val { font-size: 9.5px; font-weight: 700; color: var(--text-muted); }
.kd-lp-track-badge { font-size: 10px; font-weight: 900; border-radius: 6px; padding: 1px 6px; flex-shrink: 0; }
.kd-lp-obj-gap { font-size: 9px; font-weight: 700; color: var(--text-muted); margin-top: 4px; font-style: italic; }
.kd-lp-obj-empty { font-size: 10px; font-weight: 700; color: var(--text-muted); margin-top: 8px; padding: 6px 9px;
                   border: 1px dashed var(--border-color); border-radius: 9px; cursor: pointer; transition: color .15s, border-color .15s; }
.kd-lp-obj-empty:hover { color: var(--accent-primary); border-color: var(--accent-primary); }
.kd-lp-chips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.kd-lp-chip { background: rgba(148,163,184,0.07); border: 1px solid var(--border-color); border-radius: 10px; padding: 8px 6px; text-align: center; }
.kd-lp-chip b { display: block; font-size: 16px; font-weight: 900; color: var(--text-primary); }
.kd-lp-chip span { font-size: 8.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.4px; }
@media (max-width: 359px) {
  .kd-lp-yk-donut { width: 68px; height: 68px; }
}
.kd-lp-ctx { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 12px;
             background: rgba(148,163,184,0.08); border: 1px solid var(--border-color); border-radius: 9px; padding: 7px 9px; }
.kd-lp-ctx b { font-size: 11px; font-weight: 800; color: var(--text-primary); }
.kd-lp-ctx span { font-size: 9px; font-weight: 700; color: var(--text-muted); background: rgba(148,163,184,0.18);
                  padding: 2px 7px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.3px; white-space: nowrap; }
/* ── Accordion — grille compacte 3 colonnes ── */
.kd-acc-top { display: flex; align-items: center; gap: 8px; }
.kd-acc-head-stats { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: auto; }
.kd-acc-num { font-size: 13px; font-weight: 800; color: var(--text-primary); white-space: nowrap; }
.kd-acc-sep { width: 1px; height: 18px; background: var(--border-color, rgba(255,255,255,0.15)); }
.kd-acc-rdt-badge { font-size: 13px; font-weight: 900; margin-left: auto; }
.kd-acc-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 6px; }
.kd-acc-gc { text-align: center; padding: 5px 2px; background: var(--glass-bg, rgba(255,255,255,0.04)); border: 1px solid var(--glass-border, rgba(148,163,184,0.12)); border-radius: 8px; }
.kd-acc-gv { font-size: 12px; font-weight: 900; color: var(--text-primary); line-height: 1.2; }
.kd-acc-gl { font-size: 7px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.3px; margin-top: 1px; }
.kd-sf-ess { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 9px; }
.kd-weekly-chart { padding: 8px 12px 4px; }
.kd-weekly-chart svg { display: block; }
.kd-lc-gridline { stroke: rgba(148,163,184,0.14); stroke-width: 1; stroke-dasharray: 2,3; }
.kd-lc-base { stroke: rgba(148,163,184,0.24); stroke-width: 1; }
.kd-weekly-legend { display: flex; gap: 16px; justify-content: center; margin-top: 8px; }
.kd-weekly-legend span { font-size: 10px; font-weight: 700; color: var(--text-secondary); display: flex; align-items: center; gap: 5px; }
.kd-weekly-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.kd-weekly-legend .kd-wl-item { font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.kd-sf-ess-card {
  background: var(--glass-bg, rgba(255,255,255,0.4));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
  border-radius: 13px; padding: 12px 13px; min-width: 0;
  animation: kdCardUp 0.5s cubic-bezier(.2,.8,.2,1) both;
}
.kd-sf-ess-card:nth-child(1) { animation-delay: 0.08s; }
.kd-sf-ess-card:nth-child(2) { animation-delay: 0.14s; }
.kd-sf-ess-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kd-sf-ess-top b { font-size: 12px; font-weight: 800; }
.kd-sf-ess-qte {
  display: flex; align-items: baseline; gap: 3px;
  font-size: 9.5px; color: var(--text-muted); font-weight: 700;
  background: var(--glass-bg, rgba(148,163,184,0.12));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.25));
  border-radius: 99px; padding: 3px 9px; white-space: nowrap;
}
.kd-sf-ess-qte b { font-size: 16px; font-weight: 900; color: #10b981; line-height: 1; }
.kd-sf-ess-v { display: flex; align-items: baseline; gap: 4px; font-size: 24px; font-weight: 800; color: #10b981; margin-top: 4px; }
.kd-sf-ess-v small { font-size: 11px; color: var(--text-muted); font-weight: 600; }
.kd-sf-ess-d { font-size: 11px; color: var(--text-muted); border-top: 1px solid var(--glass-border, rgba(148,163,184,0.15)); padding-top: 5px; margin-top: 5px; }

.kd-sf-tab { width: 100%; border-collapse: collapse; }
.kd-sf-tab th {
  font-size: 8.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.7px;
  color: var(--text-muted); text-align: left; padding: 5px 6px;
  border-bottom: 1px solid var(--glass-border, rgba(148,163,184,0.18));
}
.kd-sf-tab td { font-size: 11px; padding: 6px 6px; border-bottom: 1px solid var(--glass-border, rgba(148,163,184,0.1)); }
.kd-sf-tab tr:last-child td { border-bottom: none; }
.kd-sf-tab td:last-child, .kd-sf-tab th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kd-sf-tab td b { font-weight: 700; }

/* Zone 2 — Conso 7j */
.kd-sf-conso-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.kd-sf-conso-t { font-size: 18px; font-weight: 800; color: #22d3ee; }
.kd-sf-conso-t small { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.kd-sf-rag--conso, .kd-sf-rag--conso::after, .kd-sf-rag--conso i { animation-duration: 30s !important; }
.kd-sf-rag--conso::after { animation-duration: 28s !important; }
.kd-sf-rag--conso i { animation-duration: 1.6s !important; }
.kd-sf-rag--conso { animation-delay: 15s !important; background: rgba(34,211,238,0.1); border-color: rgba(34,211,238,0.3); color: #22d3ee; }
.kd-sf-rag--conso::after { animation-delay: 15s !important; }
.kd-sf-rag--conso .kd-sf-rag-lab, .kd-sf-rag--conso .kd-sf-rag-v { color: #22d3ee; }
.kd-sf-rag--conso i { background: #22d3ee; animation-delay: 0s !important; }
.kd-sf-rag--jour, .kd-sf-rag--jour::after, .kd-sf-rag--jour i { animation-duration: 30s !important; }
.kd-sf-rag--jour::after { animation-duration: 28s !important; }
.kd-sf-rag--jour { animation-delay: 7.5s !important; background: rgba(168,162,158,0.12); border-color: rgba(168,162,158,0.35); color: #a8a29e; }
.kd-sf-rag--jour::after { animation-delay: 7.5s !important; }
.kd-sf-rag--jour .kd-sf-rag-lab, .kd-sf-rag--jour .kd-sf-rag-v { color: #d6d3d1; }
.kd-sf-rag--jour i { background: #d6d3d1; animation-delay: 0s !important; }
.kd-sf-rot {
  margin-left: auto; flex-shrink: 0; position: relative; z-index: 1;
  font-size: 10px; font-weight: 800; color: #fbbf24; letter-spacing: 0.3px; white-space: nowrap;
  background: rgba(251,191,36,0.1); border: 1px solid rgba(251,191,36,0.3);
  border-radius: 99px; padding: 4px 9px;
}

/* ===== LINE CHART PRO (conso 7j) ===== */
.kd-line-chart {
  width: 100%; height: auto; display: block;
}
.kd-lc-grid line {
  stroke: var(--border-color); stroke-width: 0.5; stroke-dasharray: 3,3; opacity: 0.5;
}
.kd-lc-area {
  fill: url(#kdLcGrad); opacity: 0.35;
}
.kd-lc-line {
  fill: none; stroke: #22d3ee; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.kd-lc-dot { fill: #22d3ee; stroke: var(--bg-primary); stroke-width: 2; }
.kd-lc-dot-today { fill: #fbbf24; stroke: var(--bg-primary); stroke-width: 2.5; filter: drop-shadow(0 0 4px rgba(251,191,36,0.5)); }
.kd-lc-val { font-size: 8px; font-weight: 800; fill: var(--text-secondary); text-anchor: middle; font-family: var(--font-body); }
.kd-lc-val-today { fill: #fbbf24; font-size: 9px; }
.kd-lc-day { font-size: 8px; font-weight: 700; fill: var(--text-muted); text-anchor: middle; font-family: var(--font-body); text-transform: uppercase; }
.kd-lc-day-today { fill: #fbbf24; font-weight: 900; }

/* ════════════ CHROMAGE SMART — pilules colorées KPI ════════════ */
.kd-chrom {
  display: inline-flex; align-items: center; gap: 2px;
  font-variant-numeric: tabular-nums;
  transition: color 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}
/* Glow subtil sur les pilules chromées (dark mode par défaut) */
[data-theme="dark"] .kd-chrom {
  box-shadow: 0 0 12px currentColor;
}

/* ════════════ LIGHT MODE — overrides KPI panneaux ════════════ */
[data-theme="light"] .kd-dash { color: var(--text-primary); }

[data-theme="light"] .kd-acc-item {
  background: rgba(255,255,255,0.82); backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 4px 14px rgba(0,0,0,0.04);
}
[data-theme="light"] .kd-acc-item:hover { border-color: rgba(0,0,0,0.14); }
[data-theme="light"] .kd-acc-head:active { background: rgba(0,0,0,0.02); }
[data-theme="light"] .kd-acc-badge-a {
  background: rgba(5,150,105,0.10); color: #047857; border-color: rgba(5,150,105,0.25);
}
[data-theme="light"] .kd-acc-badge-b {
  background: rgba(139,92,246,0.10); color: #7c3aed; border-color: rgba(139,92,246,0.25);
}
[data-theme="light"] .kd-acc-of-line { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .kd-acc-of-line b { color: #0891b2; }

[data-theme="light"] .kd-lp-yk-val { color: var(--text-primary); }
[data-theme="light"] .kd-lp-yk-lab { color: var(--text-muted); }
[data-theme="light"] .kd-lp-yk-sep { background: rgba(0,0,0,0.08); }
[data-theme="light"] .kd-lp-yk-bar { background: rgba(0,0,0,0.14); border-color: rgba(0,0,0,0.10); }

/* Pilules chromées : mode jour = plus opaque, bordure nette */
[data-theme="light"] .kd-chrom {
  font-weight: 900; text-shadow: none;
}
[data-theme="light"] [data-theme="dark"] .kd-chrom { box-shadow: none; }

/* Accordion body light */
[data-theme="light"] .kd-acc-body { border-color: rgba(0,0,0,0.05); }

/* Stats card numbers — light */
[data-theme="light"] .kd-lp-sv { color: var(--text-primary); }
[data-theme="light"] .kd-lp-sv-a { color: #047857; }
[data-theme="light"] .kd-lp-sv-b { color: #7c3aed; }
[data-theme="light"] .kd-lp-sl { color: var(--text-muted); }

/* Progress bar — light */
[data-theme="light"] .kd-lp-prog-bar { background: rgba(0,0,0,0.06); }
[data-theme="light"] .kd-lp-prog-head { color: var(--text-muted); }

/* Yield KPI row — light */
[data-theme="light"] .kd-lp-yield-kpi { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }

/* ── Stock & Rotation panel (kd-sf) — light ── */
[data-theme="light"] .kd-sf-kpi { border-color: rgba(0,0,0,0.06); }
[data-theme="light"] .kd-sf-ess-card {
  background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
[data-theme="light"] .kd-sf-ess-top b { color: var(--text-primary); }
[data-theme="light"] .kd-sf-ess-qte b { color: #047857; }
[data-theme="light"] .kd-sf-ess-v { color: #047857; }
[data-theme="light"] .kd-ess-conso-val { color: var(--text-primary); }
[data-theme="light"] .kd-ess-conso-lab { color: var(--text-muted); }

/* ── Rendement global section — light ── */
[data-theme="light"] .kd-rdt-line-lab { color: var(--text-muted); }
[data-theme="light"] .kd-rdt-line-obj { color: var(--text-primary); }

/* ── Weekly chart — light ── */
[data-theme="light"] .kd-weekly-legend span { color: var(--text-secondary); }
[data-theme="light"] .kd-weekly-chart svg text { fill: var(--text-muted); }

/* ── RAG badges — light ── */
[data-theme="light"] .kd-sf-rag-lab { color: #047857; }
[data-theme="light"] .kd-sf-rag-v { color: #047857; }
[data-theme="light"] .kd-sf-rag i { background: #059669; }

/* ── Health score — light ── */
[data-theme="light"] .kd-health-score-n { color: #047857; }
[data-theme="light"] .kd-health { background: linear-gradient(135deg, rgba(5,150,105,0.08), rgba(8,145,178,0.04)); border-color: rgba(5,150,105,0.22); }
[data-theme="light"] .kd-health-orb span { background: #059669; box-shadow: 0 0 12px rgba(5,150,105,0.3); }
[data-theme="light"] .kd-health-orb::before, [data-theme="light"] .kd-health-orb::after { border-color: #059669; }

/* ── Task rates — light ── */
[data-theme="light"] .kd-tr-rate { background: rgba(255,255,255,0.7); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .kd-tr-rate-bar { background: rgba(0,0,0,0.06); }
[data-theme="light"] .kd-tr-rate-big { color: var(--text-primary); }

/* ── Drying lots — light ── */
[data-theme="light"] .kd-sf-lot { background: rgba(255,255,255,0.65); border-color: rgba(0,0,0,0.08); }
[data-theme="light"] .kd-sf-temp { color: #e11d48; }

@media (min-width: 600px) {
  .kd-sf { padding: 18px 16px 16px; }
  .kd-sf-dry { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kd-line-chart { max-height: 110px; }
}
@media (min-width: 900px) {
  .kd-sf { padding: 20px 18px 18px; }
  .kd-sf-ess { grid-template-columns: repeat(3, 1fr); }
  .kd-sf-dry { grid-template-columns: repeat(3, 1fr); }
}

/* ════════════ FENÊTRE TÂCHES À VENIR & RÉALISATION (kd-tr) ════════════ */
.kd-tr-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.kd-tr-rate {
  background: var(--glass-card-bg, rgba(255,255,255,0.55));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
  border-radius: 14px; padding: 11px 12px; position: relative; overflow: hidden;
  animation: kdCardUp 0.45s cubic-bezier(.2,.8,.2,1) both;
}
.kd-tr-rate-lab { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.kd-tr-rate-lab b { color: var(--text-primary); font-size: 10px; letter-spacing: 0; }
.kd-tr-rate-big { display: flex; align-items: baseline; gap: 3px; font-size: 22px; font-weight: 800; margin-top: 2px; }
.kd-tr-rate-big small { font-size: 10px; color: var(--text-muted); font-weight: 600; }
.kd-tr-rate-bar { height: 6px; border-radius: 3px; background: rgba(148,163,184,0.15); margin-top: 7px; overflow: hidden; }
.kd-tr-rate-bar i { display: block; height: 100%; border-radius: 3px; }
.kd-tr-rate-t .kd-tr-rate-bar i { background: linear-gradient(90deg, #a78bfa, #60a5fa); }
.kd-tr-rate-p .kd-tr-rate-bar i { background: linear-gradient(90deg, #10b981, #2dd4bf); }

.kd-tr-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 12px 0 9px; }
.kd-tr-chip {
  font-size: 10px; font-weight: 700; padding: 5px 11px; border-radius: 99px; cursor: pointer;
  background: var(--glass-card-bg, rgba(255,255,255,0.5));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.25));
  color: var(--text-muted); transition: all 0.2s; user-select: none;
}
.kd-tr-chip-on { background: rgba(167,139,250,0.16); border-color: rgba(167,139,250,0.5); color: var(--text-primary); }

.kd-tr-day { font-size: 10px; font-weight: 800; color: var(--text-muted); margin: 9px 0 6px; text-transform: uppercase; letter-spacing: 1px; }
.kd-tr-day span { color: #10b981; }

.kd-tr-task {
  background: var(--glass-card-bg, rgba(255,255,255,0.5));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
  border-radius: 13px; padding: 10px 11px; margin-bottom: 7px;
  animation: kdCardUp 0.4s cubic-bezier(.2,.8,.2,1) both;
}
.kd-tr-task-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.kd-tr-task-title { font-size: 12.5px; font-weight: 800; }
.kd-tr-task-sub { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.kd-tr-task-badges { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.kd-tr-badge {
  font-size: 8.5px; font-weight: 800; padding: 3px 8px; border-radius: 99px; letter-spacing: 0.4px;
  text-transform: uppercase; white-space: nowrap;
}
.kd-tr-b-date { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.kd-tr-b-time { background: rgba(148,163,184,0.1); color: var(--text-muted); }
.kd-tr-b-pri-urg { background: rgba(239,68,68,0.13); color: #ef4444; border: 1px solid rgba(239,68,68,0.35); }
.kd-tr-b-pri-haut { background: rgba(251,191,36,0.13); color: #fbbf24; border: 1px solid rgba(251,191,36,0.35); }
.kd-tr-b-pri-moy { background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.3); }
.kd-tr-b-line { background: rgba(16,185,129,0.13); color: #10b981; border: 1px solid rgba(16,185,129,0.35); }
.kd-tr-b-state { background: rgba(34,211,238,0.11); color: #22d3ee; border: 1px solid rgba(34,211,238,0.3); }
.kd-tr-b-done { background: rgba(16,185,129,0.13); color: #10b981; border: 1px solid rgba(16,185,129,0.35); }

.kd-tr-sec-lab {
  font-size: 9px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--text-muted);
  font-weight: 700; margin: 14px 0 8px; display: flex; align-items: center; gap: 6px;
}
.kd-tr-sec-lab em { font-style: normal; width: 6px; height: 6px; border-radius: 50%; background: #a78bfa; display: inline-block; }

.kd-tr-of {
  background: var(--glass-card-bg, rgba(255,255,255,0.5));
  border: 1px solid var(--glass-border, rgba(148,163,184,0.2));
  border-radius: 13px; padding: 10px 11px; margin-bottom: 7px;
  animation: kdCardUp 0.4s cubic-bezier(.2,.8,.2,1) both;
}
.kd-tr-of-top { display: flex; justify-content: space-between; align-items: center; }
.kd-tr-of-no { font-size: 12.5px; font-weight: 800; }
.kd-tr-of-client { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.kd-tr-of-prog { text-align: right; }
.kd-tr-of-prog b { font-size: 15px; font-weight: 800; }
.kd-tr-of-prog span { font-size: 8.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; display: block; }
.kd-tr-of-mid { font-size: 10px; color: var(--text-muted); margin-top: 7px; display: flex; justify-content: space-between; gap: 8px; }
.kd-tr-of-mid span:last-child { color: #22d3ee; font-weight: 700; }
.kd-tr-of-bar { height: 6px; border-radius: 3px; background: rgba(148,163,184,0.15); margin-top: 5px; overflow: hidden; }
.kd-tr-of-bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #10b981, #2dd4bf); }
.kd-tr-of-tags { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.kd-tr-b-ess { background: rgba(148,163,184,0.1); color: var(--text-muted); }

.kd-tr-empty {
  font-size: 11px; color: var(--text-muted); text-align: center;
  padding: 13px 10px; border: 1px dashed var(--glass-border, rgba(148,163,184,0.3));
  border-radius: 11px; background: rgba(148,163,184,0.05);
}

@media (min-width: 600px) {
  .kd-tr-duo { gap: 12px; }
  .kd-tr-task, .kd-tr-of { padding: 12px; }
}

/* ════════════ MATRICE DE SCIAGE — dimensions standard H×B ════════════ */
.wip-mx-table {
  width: 100%; border-collapse: collapse;
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.wip-mx-table th, .wip-mx-table td {
  padding: 5px 4px; text-align: center;
  border: 1px solid var(--border-color, rgba(148,163,184,0.15));
  min-width: 48px;
}
.wip-mx-table thead th {
  background: var(--bg-secondary, rgba(148,163,184,0.06));
  font-weight: 800; font-size: 10px;
  color: var(--text-muted, #64748B);
  position: sticky; top: 0; z-index: 1;
}
.wip-mx-corner {
  text-align: left !important; padding-left: 8px !important;
  font-weight: 800; font-size: 10px; color: var(--text-muted);
}
.wip-mx-rowh {
  background: var(--bg-secondary, rgba(148,163,184,0.06));
  font-weight: 800; font-size: 11px; color: var(--text-primary);
  text-align: right; padding-right: 8px !important;
}
.wip-mx-table td { font-weight: 700; }
.wip-mx-table td i {
  display: block; font-style: normal;
  font-size: 8px; font-weight: 700; margin-top: 1px;
  text-transform: uppercase; letter-spacing: 0.3px;
  color: var(--text-muted, #64748B);
}
.wip-mx-table td b { font-size: 13px; font-weight: 900; display: inline; }
/* CC = centre — vert */
.wip-mx-cc { background: rgba(16,185,129,0.12); color: #059669; }
.wip-mx-cc i { color: #047857; }
/* SB = side board — bleu */
.wip-mx-sb { background: rgba(59,130,246,0.10); color: #2563EB; }
.wip-mx-sb i { color: #1D4ED8; }
/* SB/CC = mixte — violet */
.wip-mx-both { background: rgba(168,85,247,0.12); color: #7C3AED; font-weight: 900; }
.wip-mx-both i { color: #6D28D9; }
.wip-mx-hot { box-shadow: inset 0 0 0 1.5px rgba(168,85,247,0.45); }
/* Hors gamme / hors spec */
.wip-mx-off { color: var(--text-muted, #64748B); font-weight: 400; }
.wip-mx-off b { font-weight: 600; color: var(--text-secondary); }
.wip-mx-dash { font-size: 10px; color: var(--text-muted); }
/* Légende sous la matrice */
.wip-mx-legend {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 8px;
  border-top: 1px solid var(--border-color, rgba(148,163,184,0.12));
  font-size: 10px; color: var(--text-muted);
}
.wip-mx-legend span { display: flex; align-items: center; gap: 4px; }
.wip-mx-dot {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px;
}
.wip-mx-cc { background: #10b981; }
.wip-mx-sb { background: #3b82f6; }
.wip-mx-both { background: #a855f7; }
.wip-mx-off { background: rgba(148,163,184,0.25); }
/* Responsive compact on small screens */
@media (max-width: 500px) {
  .wip-mx-table { font-size: 10px; }
  .wip-mx-table th, .wip-mx-table td { padding: 3px 2px; min-width: 36px; }
  .wip-mx-table td b { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════
   AGENDA SMART — Vue calendrier du planning de production
   (OF + tâches triés par date, suivi progression & objectifs)
   ═══════════════════════════════════════════════════════════════ */

/* En-tête contrôle navigateur */
.ag-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 14px; flex-wrap: wrap;
}
.ag-toolbar-group { display: flex; align-items: center; gap: 6px; }
.ag-month-label {
  font-size: 15px; font-weight: 800; color: var(--text-primary);
  text-align: center; min-width: 140px;
}
.ag-nav-btn {
  width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border-color);
  background: var(--bg-secondary); color: var(--text-primary); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; transition: all 0.2s;
}
.ag-nav-btn:active { transform: scale(0.92); background: var(--accent-light); }
.ag-today-btn {
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--border-color);
  background: var(--accent-light); color: var(--brand-green); cursor: pointer;
  font-size: 12px; font-weight: 700; transition: all 0.2s;
}
.ag-today-btn:active { transform: scale(0.95); }

/* Jours de semaine */
.ag-weekdays, .ag-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
}
.ag-weekday {
  text-align: center; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.5px; color: var(--text-muted); padding: 6px 0;
}
.ag-weekday:first-child, .ag-day:nth-child(7n+1) { color: var(--danger); }

/* Cellules de jour */
.ag-day {
  position: relative; min-height: 48px; border-radius: 10px;
  border: 1px solid transparent; cursor: pointer;
  padding: 4px 5px; display: flex; flex-direction: column; align-items: flex-start;
  background: var(--bg-secondary); transition: all 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.ag-day:active { transform: scale(0.96); }
.ag-day-num { font-size: 12px; font-weight: 700; color: var(--text-primary); line-height: 1; }
.ag-muted .ag-day-num { color: var(--text-muted); opacity: 0.45; }
.ag-past { opacity: 0.55; }
.ag-today {
  border-color: var(--brand-green); background: rgba(5,150,105,0.12);
  box-shadow: 0 0 0 1px var(--brand-green);
}
.ag-today .ag-day-num { color: var(--brand-green); font-weight: 900; }
.ag-selected {
  border-color: var(--accent-primary); background: rgba(5,150,105,0.20);
}
.ag-has-events { background: rgba(59,130,246,0.06); }

/* Compteur & badges de statut */
.ag-day-count {
  position: absolute; top: 4px; right: 5px;
  min-width: 16px; height: 16px; border-radius: 99px;
  font-size: 9px; font-weight: 800; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 4px; background: rgba(59,130,246,0.85);
}
.ag-badges { display: flex; gap: 2px; flex-wrap: wrap; margin-top: auto; padding-top: 3px; }
.ag-badge-dot {
  width: 7px; height: 7px; border-radius: 50%; display: inline-block;
}

/* Barre de progression globale */
.ag-progress-bar { margin: 14px 0 6px; }
.ag-progress-track {
  height: 8px; border-radius: 6px; background: rgba(148,163,184,0.15);
  overflow: hidden; position: relative;
}
.ag-progress-fill {
  height: 100%; border-radius: 6px;
  background: linear-gradient(90deg, #059669, #10b981, #22d3ee);
  transition: width 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.ag-progress-label {
  font-size: 11px; font-weight: 700; color: var(--text-secondary);
  margin-top: 5px; text-align: right;
}
.ag-progress-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 10px;
}
.ag-stat {
  text-align: center; padding: 9px 4px; border-radius: 12px;
  background: var(--bg-secondary); border: 1px solid var(--border-color);
}
.ag-stat-num { font-size: 19px; font-weight: 900; line-height: 1; }
.ag-stat-label {
  font-size: 9px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.4px; margin-top: 3px;
}

/* Panneau latéral (aujourd'hui / à venir) */
.ag-sidebar-section { }
.ag-sidebar-title {
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-secondary); margin-bottom: 4px;
}
.ag-sidebar-date { font-size: 12px; font-weight: 700; color: var(--brand-green); margin-bottom: 8px; }
.ag-sidebar-item {
  padding: 8px 9px; border-radius: 10px; background: var(--bg-secondary);
  border-top: 1px solid var(--border-color); margin-bottom: 6px;
}
.ag-sidebar-item-date { font-size: 10px; font-weight: 700; color: var(--text-muted); }
.ag-sidebar-item-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-top: 2px; }
.ag-sidebar-item-meta { font-size: 10px; font-weight: 700; margin-top: 2px; }
.ag-empty-sm {
  font-size: 11px; color: var(--text-muted); text-align: center;
  padding: 12px 8px; border: 1px dashed var(--border-color); border-radius: 10px;
}

/* Détail du jour sélectionné */
.ag-detail-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px; flex-wrap: wrap; gap: 6px;
}
.ag-detail-date { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.ag-detail-count {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  background: var(--bg-secondary); border: 1px solid var(--border-color);
  border-radius: 99px; padding: 3px 9px;
}
.ag-detail-list { display: flex; flex-direction: column; gap: 8px; }
.ag-detail-item {
  padding: 10px 12px; border-radius: 12px; background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
.ag-detail-item-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px;
}
.ag-type-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 800; padding: 3px 8px; border-radius: 99px;
  text-transform: uppercase; letter-spacing: 0.4px;
}
.ag-status-dot { width: 9px; height: 9px; border-radius: 50%; }
.ag-detail-item-title { font-size: 13px; font-weight: 800; color: var(--text-primary); }
.ag-detail-item-meta {
  font-size: 10.5px; color: var(--text-secondary); margin-top: 3px; font-weight: 600;
}
.ag-detail-item-notes {
  font-size: 11px; color: var(--text-muted); margin-top: 5px;
  border-top: 1px dashed var(--border-color); padding-top: 5px;
}
.ag-empty { text-align: center; padding: 30px 12px; }
.ag-empty-icon { font-size: 30px; margin-bottom: 6px; }
.ag-empty-text { font-size: 12px; color: var(--text-muted); }

/* Légende */
.ag-legend { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; font-size: 11px; color: var(--text-secondary); }
.ag-legend span { display: flex; align-items: center; gap: 5px; font-weight: 600; }
.ag-legend .ag-badge-dot { width: 10px; height: 10px; }

/* Responsive — deux colonnes côté tablette/desktop */
@media (min-width: 640px) {
  .ag-layout { display: grid; grid-template-columns: 1fr 230px; gap: 16px; align-items: start; }
  .ag-main { min-width: 0; }
  .ag-day { min-height: 56px; }
}
@media (min-width: 900px) {
  .ag-layout { grid-template-columns: 1fr 280px; }
  .ag-day { min-height: 68px; }
  .ag-day-num { font-size: 14px; }
}

/* ── Ecran Rapports (modules/rapports.js — API 3002) ── */
.rp-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px;
}
.rp-status { font-size: 11px; color: var(--text-muted); }
.rp-status-ok { color: var(--success, #059669); }
.rp-status-error { color: var(--danger, #ef4444); }
.rp-offline {
  padding: 14px; border: 1px dashed var(--border-color);
  border-radius: var(--radius-sm); background: var(--glass-bg);
}
.rp-offline-title { font-weight: 700; font-size: 13px; color: var(--warning, #f59e0b); margin-bottom: 4px; }
.rp-offline-sub { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.rp-skeleton { padding: 12px 0; font-size: 12px; color: var(--text-muted); }
.rp-kpi-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 4px 0 12px; }
.rp-kpi {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 120px;
  padding: 10px 12px; background: var(--glass-bg);
  border: 1px solid var(--glass-border); border-radius: var(--radius-sm);
}
.rp-kpi b { font-size: 18px; font-weight: 800; color: var(--text-primary); letter-spacing: -0.01em; }
.rp-kpi i { font-style: normal; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.rp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rp-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.rp-foot td { background: var(--glass-card-bg); font-weight: 700; }
.rp-coverage { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.rp-cov {
  display: flex; align-items: center; gap: 6px; padding: 5px 10px;
  border-radius: 999px; font-size: 11px; background: var(--glass-bg); border: 1px solid var(--glass-border);
}
.rp-cov b { font-weight: 800; }
.rp-cov i { font-style: normal; color: var(--text-muted); }
.rp-cov-PIECES_SANS_GRUME, .rp-cov-GRUMES_SANS_PIECES { border-color: var(--warning, #f59e0b); }
.rp-cov-AUCUNE_DONNEE, .rp-cov-AUTRE { color: var(--text-muted); }
.rp-ok-banner {
  padding: 12px 14px; border-radius: var(--radius-sm); font-size: 12px;
  background: var(--success-bg, rgba(5,150,105,0.10)); color: var(--success, #059669);
  border: 1px solid var(--success, #059669);
}
.rp-cls-warn { color: var(--danger, #ef4444); font-weight: 700; }
.rp-section-title { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 6px; }
@media (max-width: 639px) {
  .rp-toolbar { flex-direction: column; align-items: stretch; }
  .rp-kpi { min-width: calc(50% - 8px); }
}

/* ── Ecran Traçabilité (trace-api.js — API 3002) ── */
.trace-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px; flex-wrap: wrap;
}
.trace-toolbar-status { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1 1 auto; }
.trace-toolbar-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ── Barre de génération de rapports (Traçabilité) ── */
.trace-report-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 14px;
  background: var(--glass-card-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
}
.trace-report-ico { font-size: 18px; line-height: 1; }
.trace-report-title { font-size: 12px; font-weight: 800; color: var(--text-primary); margin-right: 4px; }
.trace-report-field { display: flex; flex-direction: column; gap: 2px; }
.trace-report-lbl { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
.trace-report-input {
  font: inherit; font-size: 12px; color: var(--text-primary);
  padding: 6px 8px; min-width: 110px;
  background: var(--glass-bg); border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-sm);
}
.trace-report-input:focus-visible { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 1px; }
.trace-report-bar .btn { align-self: flex-end; }

/* ── Synthèses Traçabilité — 2 panneaux .kpi-card-v2 (système KPI/Dashboard) ── */
.trace-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; align-items: start; }
@media (max-width: 720px) { .trace-panels { grid-template-columns: minmax(0, 1fr); } }

/* Panneau : socle .kpi-card-v2 + layout colonne */
.trace-panel { display: flex; flex-direction: column; gap: 12px; cursor: default; }
.trace-panel.kpi-card-v2:active { transform: none; }

.trace-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.trace-panel-heads { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trace-panel-title { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; color: var(--text-primary); }
.trace-panel-sub { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

/* Hero rendement (bouton cliquable) */
.trace-panel-hero {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 12px; border-radius: var(--radius-sm);
  background: var(--glass-bg); border: 1px solid var(--border-color);
  transition: border-color .2s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.trace-panel-hero:hover { border-color: var(--accent-primary, #2563eb); transform: translateY(-1px); }
.trace-panel-hero:active { transform: translateY(0) scale(.995); }
.trace-panel-hero:focus-visible { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 2px; }
.trace-panel-hero-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.trace-panel-hero-l { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.trace-panel-hero-s { font-size: 10px; color: var(--text-muted); }
.trace-panel-hero .kpi-value { font-size: 26px; font-weight: 800; line-height: 1; }

/* Grille 4 cases */
.trace-panel-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trace-cell {
  display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 10px; border-radius: var(--radius-sm);
  background: var(--glass-bg); border: 1px solid var(--border-color);
  transition: border-color .2s ease, transform .18s cubic-bezier(.2,.7,.2,1);
}
.trace-cell:hover { border-color: var(--accent-primary, #2563eb); transform: translateY(-1px); }
.trace-cell:active { transform: translateY(0) scale(.995); }
.trace-cell:focus-visible { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 2px; }
.trace-cell-v { font-size: 20px; font-weight: 800; line-height: 1.05; color: var(--text-primary); }
.trace-cell-l { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.trace-cell-s { font-size: 10px; color: var(--text-muted); }

/* Traçabilité : grille de synthèse de production — cartes informatives (non cliquables) */
.trace-prod .trace-cell { cursor: default; }
.trace-prod .trace-cell:hover { border-color: var(--border-color); transform: none; }
@media (min-width: 600px) {
  .trace-prod .trace-panel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mini-indicateurs */
.trace-panel-mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trace-mini {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--glass-bg); border: 1px solid var(--border-color);
  transition: border-color .2s ease;
}
.trace-mini:hover { border-color: var(--accent-primary, #2563eb); }
.trace-mini:focus-visible { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 2px; }
.trace-mini-ic { font-size: 15px; line-height: 1; }
.trace-mini-l { font-size: 11px; color: var(--text-secondary); flex: 1; min-width: 0; }
.trace-mini-v { font-size: 13px; font-weight: 800; color: var(--text-primary); font-variant-numeric: tabular-nums; }

/* Lignes ateliers A/B */
.trace-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.trace-line {
  display: flex; flex-direction: column; gap: 4px; width: 100%; text-align: left; font: inherit; color: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  padding: 10px; border-radius: var(--radius-sm);
  background: var(--glass-bg); border: 1px solid var(--border-color);
  transition: border-color .2s ease, transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease;
}
.trace-line:hover { transform: translateY(-1px); border-color: var(--accent-primary, #2563eb); }
.trace-line:focus-visible { outline: 2px solid var(--accent-primary, #2563eb); outline-offset: 2px; }
.trace-line.is-leader { border-color: var(--accent-primary, #2563eb); box-shadow: inset 0 0 0 1px var(--accent-primary, #2563eb); }
.trace-line-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.trace-line-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-secondary); }
.trace-line-v { font-size: 24px; font-weight: 800; line-height: 1; color: var(--text-primary); }
.trace-line.is-leader .trace-line-v { color: var(--accent-primary, #2563eb); }
.trace-line-l { font-size: 10px; color: var(--text-muted); }
.trace-card-bar { height: 10px; border-radius: 999px; background: rgba(148,163,184,0.22); overflow: hidden; margin: 6px 0 2px; }
.trace-card-bar-fill { display: block; height: 100%; border-radius: 999px; min-width: 3px; background: var(--neutral-400, #94a3b8); transition: width .4s ease; }
.trace-line.is-leader .trace-card-bar-fill { background: linear-gradient(90deg, var(--accent-primary, #2563eb), var(--accent-secondary, #60A5FA)); }

/* Pied panneau ateliers */
.trace-panel-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--border-color); }
.trace-panel-foot .trace-panel-hero-meta { flex: 1; }
.trace-foot-v { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.trace-charts-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
@media (min-width: 900px) { .trace-charts-grid { grid-template-columns: 1fr 1fr; } }
.trace-chart-card {
  padding: 14px 16px; background: var(--glass-card-bg, var(--glass-bg));
  border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-soft);
}
.trace-chart-title { font-size: 12px; font-weight: 800; color: var(--text-secondary); margin-bottom: 10px; }
.trace-chart-sub { font-size: 11px; color: var(--text-muted); margin-bottom: 8px; }
.trace-bar-row { display: grid; grid-template-columns: 130px 1fr 88px; align-items: center; gap: 8px; margin-bottom: 6px; }
.trace-bar-label { font-size: 11px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-bar { height: 10px; background: var(--glass-card-bg); border-radius: 5px; overflow: hidden; }
.trace-bar-fill { height: 100%; background: var(--primary, #2563eb); border-radius: 5px; min-width: 2px; }
.trace-bar-val { font-size: 10px; font-variant-numeric: tabular-nums; color: var(--text-muted); text-align: right; white-space: nowrap; }

/* ── Bento — bloc explorateur de données (chips + tableur Excel v2) ── */
.trace-bento-block { margin-top: 16px; }

.trace-bento-chips { margin-bottom: 0; }
.trace-bento-table {
  margin-top: 12px;
  padding: 14px;
  background: var(--glass-card-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-card-border);
  border-radius: var(--radius-md);
  box-shadow: var(--glass-shadow);
  transition: box-shadow .3s ease, border-color .3s ease;
  overflow: hidden;
}
.trace-bento-table .data-excel {
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  box-shadow: none;
}
.trace-bento-table .data-excel-header {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background: var(--glass-bg);
  border-bottom: 1px solid var(--glass-border);
}
.trace-bento-table .data-tr-total {
  background: var(--glass-bg);
  border-top: 1px solid var(--glass-border);
}

/* Transition fluide au clic d'une carte KPI : halo temporaire autour du tableur */
.trace-bento-table.trace-bento-updated {
  border-color: var(--accent-primary, #2563eb);
  animation: traceBentoPulse .7s ease;
}
@keyframes traceBentoPulse {
  0% { box-shadow: 0 0 0 0 rgba(37,99,235,0.35), var(--shadow-soft-lg); }
  100% { box-shadow: 0 0 0 12px rgba(37,99,235,0), var(--shadow-soft-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .trace-panel-hero, .trace-cell, .trace-mini, .trace-line, .trace-card-bar-fill { transition: none; }
  .trace-bento-table { transition: none; }
  .trace-bento-table.trace-bento-updated { animation: none; box-shadow: 0 0 0 3px var(--accent-light, rgba(37,99,235,0.10)), var(--shadow-soft-lg); }
}
.trace-hit-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.trace-hit {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 8px 10px; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm); cursor: pointer; color: inherit; font: inherit;
}
.trace-hit:hover { border-color: var(--primary, #2563eb); }
.trace-hit-static { cursor: default; }
.trace-hit-ico { font-size: 16px; line-height: 1; }
.trace-hit-body { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.trace-hit-body b { font-size: 12px; color: var(--text-primary); }
.trace-hit-body i { font-style: normal; font-size: 10px; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trace-parcours { margin-top: 14px; padding: 12px 14px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-sm); }
.trace-parcours-title { font-size: 13px; font-weight: 800; color: var(--text-primary); margin-bottom: 10px; }
.trace-parcours-steps { display: flex; flex-direction: column; gap: 0; }
.trace-parcours-step {
  display: grid; grid-template-columns: 24px 120px 1fr; align-items: baseline; gap: 8px;
  padding: 6px 0; border-left: 2px solid var(--glass-border); margin-left: 11px; padding-left: 14px;
  position: relative;
}
.trace-parcours-step::before {
  content: ''; position: absolute; left: -6px; top: 12px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary, #2563eb); border: 2px solid var(--surface, #0f172a);
}
.trace-parcours-num { font-size: 10px; font-weight: 800; color: var(--primary, #2563eb); }
.trace-parcours-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); }
.trace-parcours-step b { font-size: 12px; color: var(--text-primary); }
.trace-parcours-step i { font-style: normal; font-size: 10px; color: var(--text-muted); grid-column: 3; }
.trace-parcours-arts { margin-top: 12px; }
.trace-parcours-arts > b { font-size: 11px; color: var(--text-secondary); }
.data-source-badge {
  font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 999px;
  border: 1px solid var(--glass-border); background: var(--glass-bg); color: var(--text-muted);
  white-space: nowrap;
}
.data-source-api { color: var(--success, #059669); border-color: var(--success, #059669); }
.data-source-offline { color: var(--warning, #f59e0b); border-color: var(--warning, #f59e0b); }
.data-source-none { opacity: 0.7; }
@media (max-width: 639px) {
  .trace-toolbar { flex-direction: column; align-items: stretch; }
  .trace-bar-row { grid-template-columns: 96px 1fr 72px; }
  .trace-parcours-step { grid-template-columns: 22px 1fr; }
  .trace-parcours-step i { grid-column: 2; }
}

/* ============================================================================
   TRAÇABILITÉ — « Analyse de production » (onglets)
   Rendu fidèle au mockup (palette slate/emerald/rose/amber) en CSS pur, scopé
   sous .trace-page : les variables de thème globales (:root) NE SONT PAS
   touchées. Aucune dépendance Tailwind.
   ============================================================================ */
.trace-page {
  --tp-bg: #f8fafc;
  --tp-surface: #ffffff;
  --tp-line: #f1f5f9;
  --tp-border: #e2e8f0;
  --tp-ink: #0f172a;
  --tp-ink2: #334155;
  --tp-muted: #64748b;
  --tp-faint: #94a3b8;
  --tp-blue: #2563eb;
  --tp-blue2: #60a5fa;
  --tp-emerald: #059669;
  --tp-rose: #f43f5e;
  --tp-amber: #d97706;
  --tp-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
  background: var(--tp-bg);
  color: var(--tp-ink);
  padding-bottom: 24px;
}

/* Barre d'état & synchro */
.tp-statusbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; margin-bottom: 16px;
  background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 16px;
  box-shadow: var(--tp-shadow);
}
.tp-status-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.tp-status-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tp-status-title { font-size: 13px; font-weight: 800; letter-spacing: -0.01em; color: var(--tp-ink); }
.tp-status-sub { font-size: 11px; color: var(--tp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-status-help { font-size: 11px; font-weight: 600; line-height: 1.3; color: var(--tp-amber); max-width: 340px; }
.tp-status-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tp-sync-warn { font-size: 11px; font-weight: 700; color: var(--tp-amber); }

/* Titre de vue */
.tp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tp-title { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0; color: var(--tp-ink); }
.tp-subtitle { font-size: 12px; color: var(--tp-muted); margin: 4px 0 0; }

/* Boutons */
.tp-sync-btn, .tp-pdf-btn {
  display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12px; font-weight: 700;
  padding: 8px 14px; border-radius: 10px; border: 1px solid var(--tp-ink);
  background: var(--tp-ink); color: #fff; cursor: pointer; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.tp-sync-btn:hover, .tp-pdf-btn:hover { opacity: 0.92; }
.tp-sync-btn:disabled { opacity: 0.6; cursor: default; }
.tp-sync-btn--danger { background: var(--tp-rose); border-color: var(--tp-rose); }
.tp-pdf-btn:focus-visible, .tp-sync-btn:focus-visible { outline: 2px solid var(--tp-blue); outline-offset: 2px; }

/* 4 KPI */
.tp-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) { .tp-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tp-kpi { padding: 14px 16px; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 14px; box-shadow: var(--tp-shadow); min-width: 0; }
.tp-kpi-l { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-kpi-v { font-size: 22px; font-weight: 800; line-height: 1.1; margin: 6px 0 2px; color: var(--tp-ink); font-variant-numeric: tabular-nums; }
.tp-kpi-v small { font-size: 12px; font-weight: 700; color: var(--tp-faint); }
.tp-kpi-v.is-ok { color: var(--tp-emerald); }
.tp-kpi-v.is-warn { color: var(--tp-amber); }
.tp-kpi-v.is-bad { color: var(--tp-rose); }
.tp-kpi-v.is-rose { color: var(--tp-rose); }
.tp-kpi-s { font-size: 11px; color: var(--tp-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Barre d'onglets */
.tp-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 16px; flex-wrap: wrap;
  background: var(--tp-line); border: 1px solid var(--tp-border); border-radius: 12px; }
.tp-tab { font: inherit; font-size: 12px; font-weight: 700; padding: 8px 14px; border: 0; border-radius: 9px;
  background: transparent; color: var(--tp-ink2); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; }
.tp-tab:hover { color: var(--tp-ink); }
.tp-tab.is-active { background: var(--tp-surface); color: var(--tp-ink); box-shadow: var(--tp-shadow); }
.tp-tab:focus-visible { outline: 2px solid var(--tp-blue); outline-offset: 2px; }

/* Panneaux */
.tp-panel { display: none; }
.tp-panel.is-active { display: block; }

/* Cartes */
.tp-card { padding: 16px; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 16px; box-shadow: var(--tp-shadow); margin-bottom: 16px; }
.tp-card:last-child { margin-bottom: 0; }
.tp-card-title { font-size: 13px; font-weight: 800; color: var(--tp-ink); margin: 0 0 12px; }
.tp-card-sub { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tp-muted); margin: 16px 0 8px; }
.tp-sec-head { margin-bottom: 10px; }
.tp-sec-title { font-size: 13px; font-weight: 800; color: var(--tp-ink); margin: 0; }
.tp-empty { font-size: 12px; color: var(--tp-muted); padding: 8px 0; }

/* Synthèse & Ateliers */
.tp-synth-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px; }
@media (max-width: 820px) { .tp-synth-grid { grid-template-columns: 1fr; } }
.tp-synth-grid .tp-card { margin-bottom: 0; }
.tp-minigrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 560px) { .tp-minigrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tp-mini { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; min-width: 0;
  background: var(--tp-line); border: 1px solid var(--tp-border); border-radius: 12px; }
.tp-mini-l { font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tp-faint); }
.tp-mini-v { font-size: 15px; font-weight: 800; color: var(--tp-ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-mini-v.is-rose { color: var(--tp-rose); }

.tp-flux { display: flex; flex-direction: column; gap: 0; }
.tp-flux-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0;
  font-size: 12px; color: var(--tp-ink2); border-bottom: 1px dashed var(--tp-border); }
.tp-flux-row:last-child { border-bottom: 0; }
.tp-flux-row b { color: var(--tp-ink); font-variant-numeric: tabular-nums; }

.tp-lines { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 12px; }
.tp-line { padding: 12px; border-radius: 12px; background: var(--tp-line); border: 1px solid var(--tp-border); }
.tp-line.is-leader { background: #eff6ff; border-color: #dbeafe; }
.tp-line-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.tp-line-top b { font-size: 13px; font-weight: 800; color: var(--tp-ink); }
.tp-line-pct { font-size: 12px; font-weight: 800; color: var(--tp-blue); }
.tp-line:not(.is-leader) .tp-line-pct { color: var(--tp-ink2); }
.tp-line-sub { font-size: 11px; color: var(--tp-muted); }

.tp-ecart { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 12px;
  border-radius: 12px; background: #ecfdf5; border: 1px solid #d1fae5; }
.tp-ecart-l { font-size: 11px; font-weight: 600; color: #047857; }
.tp-ecart-v { font-size: 18px; font-weight: 800; color: var(--tp-emerald); font-variant-numeric: tabular-nums; }

/* Graphe rendement par OF */
.tp-chart-sub { font-size: 12px; color: var(--tp-muted); margin-bottom: 10px; }
.tp-bar-row { display: grid; grid-template-columns: 170px 1fr 64px; align-items: center; gap: 10px; margin-bottom: 7px; }
.tp-bar-label { font-size: 11px; color: var(--tp-ink2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-bar { height: 9px; background: var(--tp-line); border-radius: 5px; overflow: hidden; }
.tp-bar-fill { display: block; height: 100%; background: var(--tp-blue); border-radius: 5px; min-width: 3px; transition: width 0.4s ease; }
.tp-bar-val { font-size: 11px; font-weight: 700; color: var(--tp-ink); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .tp-bar-row { grid-template-columns: 110px 1fr 54px; } }

/* Onglet « Tables de données » */
.tp-chips { margin-bottom: 12px; }
.tp-table { padding: 14px; background: var(--tp-surface); border: 1px solid var(--tp-border); border-radius: 16px; box-shadow: var(--tp-shadow); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease; }
.tp-table .data-excel { border: 0; border-radius: 12px; background: transparent; box-shadow: none; }
.tp-table.trace-bento-updated { border-color: var(--tp-blue); animation: traceBentoPulse 0.7s ease; }

/* Onglet « Périodes & Rapports » */
.tp-reportbar { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .tp-bar-fill { transition: none; }
  .tp-table.trace-bento-updated { animation: none; }
}