* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background: #f0f2f5; color: #333; }

/* ====== Login Screen — Futuristic ====== */
.login-screen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 20% 30%, #1a237e 0%, transparent 60%),
              radial-gradient(ellipse at 80% 70%, #ff6f00 0%, transparent 55%),
              linear-gradient(135deg, #05070f 0%, #0a1128 50%, #05070f 100%);
  overflow: hidden;
}
.login-screen::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,171,0,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,171,0,0.06) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 40%, transparent 75%);
  animation: gridDrift 30s linear infinite;
}
.login-screen::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(0,0,0,0.7) 100%);
  pointer-events: none;
}
@keyframes gridDrift {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 48px 48px, 48px 48px; }
}

#loginParticles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 3;
}
.login-screen .orb { z-index: 0; }
.login-box { z-index: 4 !important; }

/* Floating energy orbs */
.login-screen .orb {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55;
  animation: orbFloat 14s ease-in-out infinite;
}
.login-screen .orb.o1 { width: 340px; height: 340px; background: #ff6f00; top: 8%; left: 10%; }
.login-screen .orb.o2 { width: 420px; height: 420px; background: #1e88e5; bottom: 5%; right: 8%; animation-delay: -5s; }
.login-screen .orb.o3 { width: 220px; height: 220px; background: #ffab00; top: 55%; left: 48%; animation-delay: -9s; }
@keyframes orbFloat {
  0%,100% { transform: translate(0,0) scale(1); }
  33% { transform: translate(40px,-30px) scale(1.08); }
  66% { transform: translate(-30px,25px) scale(0.95); }
}

.login-box {
  position: relative; z-index: 2;
  width: 420px; padding: 44px 40px 36px;
  border-radius: 20px; text-align: center;
  background: linear-gradient(145deg, rgba(18,22,44,0.85), rgba(10,14,28,0.85));
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border: 1px solid rgba(255,171,0,0.25);
  box-shadow:
    0 30px 80px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.04) inset,
    0 0 60px rgba(255,111,0,0.15);
  animation: boxPulse 4s ease-in-out infinite;
}
@keyframes boxPulse {
  0%,100% { box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 60px rgba(255,111,0,0.15); }
  50%     { box-shadow: 0 30px 80px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset, 0 0 80px rgba(30,136,229,0.28); }
}
.login-box::before {
  content: ""; position: absolute; inset: -1px; border-radius: 20px; padding: 1px;
  background: linear-gradient(135deg, #ffab00, transparent 35%, transparent 65%, #1e88e5);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

.login-box .logo {
  font-family: 'Orbitron', sans-serif;
  font-size: 30px; font-weight: 900; letter-spacing: 3px;
  color: #fff; margin-bottom: 6px;
  text-shadow: 0 0 20px rgba(255,171,0,0.6), 0 0 40px rgba(255,111,0,0.35);
}
.login-box .logo span {
  background: linear-gradient(135deg, #ffab00, #ff6f00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-box .subtitle {
  font-size: 11px; letter-spacing: 4px; text-transform: uppercase;
  color: #8a94b8; margin-bottom: 32px;
  font-family: 'Orbitron', sans-serif; font-weight: 500;
}

.login-box .form-group { text-align: left; margin-bottom: 18px; }
.login-box .form-group label {
  display: block; font-size: 10px; font-weight: 700; letter-spacing: 2px;
  color: #ffab00; margin-bottom: 6px; text-transform: uppercase;
  font-family: 'Orbitron', sans-serif;
}
.login-box .form-group input {
  width: 100%; padding: 12px 16px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,171,0,0.25);
  border-radius: 10px;
  font-size: 14px; color: #fff; letter-spacing: 1px;
  transition: all 0.3s ease;
  font-family: 'Segoe UI', sans-serif;
}
.login-box .form-group input::placeholder { color: #5a6688; }
.login-box .form-group input:focus {
  outline: none;
  border-color: #ffab00;
  background: rgba(0,0,0,0.6);
  box-shadow: 0 0 0 3px rgba(255,171,0,0.15), 0 0 18px rgba(255,171,0,0.35);
}

.login-box .btn-login {
  width: 100%; padding: 14px; margin-top: 10px;
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #ff6f00 0%, #ffab00 50%, #ff6f00 100%);
  background-size: 200% 100%;
  color: #0a0e1c; border: none; border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: 14px; font-weight: 900; letter-spacing: 3px; text-transform: uppercase;
  cursor: pointer; transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(255,111,0,0.45), 0 0 0 1px rgba(255,171,0,0.5) inset;
}
.login-box .btn-login:hover {
  background-position: 100% 0;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255,111,0,0.6), 0 0 40px rgba(255,171,0,0.5), 0 0 0 1px rgba(255,255,255,0.3) inset;
}
.login-box .btn-login:active { transform: translateY(0); }
.login-box .btn-login::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  transition: left 0.6s;
}
.login-box .btn-login:hover::after { left: 100%; }

.login-error {
  color: #ff5252; font-size: 11px; margin-top: 10px; display: none;
  letter-spacing: 1px; font-family: 'Orbitron', sans-serif; font-weight: 600;
  text-shadow: 0 0 10px rgba(255,82,82,0.6);
}

.login-box > div[style*="margin-top:16px"] {
  color: #6a7499 !important; font-size: 10px !important;
  letter-spacing: 1.5px; text-transform: uppercase;
  font-family: 'Orbitron', sans-serif; font-weight: 500;
}
.login-hidden { display: none !important; }

/* User badge in header */
.user-badge { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.1); padding: 4px 12px; border-radius: 20px; }
.user-avatar { width: 28px; height: 28px; border-radius: 50%; background: #ffab00; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 12px; color: #1a237e; }
.user-name { font-size: 12px; color: white; font-weight: 500; }
.user-role { font-size: 10px; color: rgba(255,255,255,0.7); }
.btn-logout { background: rgba(255,255,255,0.15); color: white; border: none; padding: 6px 10px; border-radius: 6px; font-size: 11px; cursor: pointer; }
.btn-logout:hover { background: rgba(255,255,255,0.25); }

/* Admin / Supervision */
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
.admin-card { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.admin-card h3 { font-size: 14px; color: #1a237e; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.admin-user-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid #f0f0f0; }
.admin-user-row:last-child { border: none; }
.admin-user-info { display: flex; align-items: center; gap: 10px; }
.admin-user-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: white; }
.role-badge { padding: 2px 8px; border-radius: 10px; font-size: 10px; font-weight: 600; }
.role-badge.role-admin { background: #c62828; color: white; }
.role-badge.role-commercial { background: #1565c0; color: white; }
.role-badge.role-technicien { background: #2e7d32; color: white; }
.role-badge.role-poseur { background: #e65100; color: white; }
.role-badge.role-auditeur { background: #6a1b9a; color: white; }
.role-badge.role-telepro { background: #00838f; color: white; }
.online-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.online-dot.on { background: #2e7d32; box-shadow: 0 0 6px rgba(46,125,50,0.5); animation: pulse-green 2s infinite; }
.online-dot.off { background: #ccc; }
@keyframes pulse-green { 0%,100%{box-shadow:0 0 4px rgba(46,125,50,0.4)} 50%{box-shadow:0 0 10px rgba(46,125,50,0.7)} }
.admin-log-item { padding: 8px 0; border-bottom: 1px solid #f0f0f0; font-size: 12px; }
.admin-log-item .log-time { color: #888; font-size: 11px; }
.admin-log-item .log-user { font-weight: 600; color: #1a237e; }
.connected-user-card { display:inline-flex; align-items:center; gap:10px; background:linear-gradient(135deg,#e8f5e9,#f1f8e9); border:1px solid #c8e6c9; border-radius:12px; padding:10px 16px; margin:4px; }
.connected-user-card .cu-avatar { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; color:white; }
.connected-user-card .cu-info { font-size:12px; }
.connected-user-card .cu-name { font-weight:700; font-size:13px; color:#1b5e20; }
.connected-user-card .cu-duration { color:#558b2f; font-size:11px; }
.session-row { display:flex; align-items:center; gap:12px; padding:8px 10px; border-bottom:1px solid #f0f0f0; font-size:12px; }
.session-row:hover { background:#f5f5f5; }
.session-row .sr-avatar { width:28px; height:28px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:11px; color:white; flex-shrink:0; }
.session-row .sr-name { font-weight:600; min-width:70px; }
.session-row .sr-time { color:#666; }
.session-row .sr-duration { font-weight:600; color:#1a237e; min-width:80px; text-align:right; }
.session-row .sr-active { color:#2e7d32; font-weight:700; }
.manip-row { display:flex; align-items:center; gap:10px; padding:7px 10px; border-bottom:1px solid #f0f0f0; font-size:12px; }
.manip-row:hover { background:#fafafa; }
.manip-row .mr-time { color:#999; font-size:11px; min-width:115px; }
.manip-row .mr-user { font-weight:600; color:#1a237e; min-width:70px; }
.manip-row .mr-cat { display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:600; }
.cat-connexion { background:#e3f2fd; color:#1565c0; }
.cat-contacts { background:#fff3e0; color:#e65100; }
.cat-bureaux { background:#f3e5f5; color:#6a1b9a; }
.cat-agenda { background:#e8f5e9; color:#2e7d32; }
.cat-devis { background:#fce4ec; color:#c62828; }
.cat-précarité { background:#fff8e1; color:#f57f17; }
.cat-système { background:#eceff1; color:#455a64; }
.no-data-msg { text-align:center; padding:20px; color:#999; font-size:13px; }

/* Header */
.header { background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #000 100%); color: white; padding: 14px 28px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 4px 20px rgba(0,0,0,0.3); position: sticky; top: 0; z-index: 100; border-bottom: 1px solid rgba(245,158,11,0.2); }
.header h1 { font-size: 20px; font-weight: 600; }
.header h1 span { color: #ffab00; }
.header-right { display: flex; align-items: center; gap: 16px; }
.header-right select { padding: 6px 12px; border-radius: 6px; border: none; font-size: 13px; background: rgba(255,255,255,0.15); color: white; cursor: pointer; }
.header-right select option { color: #333; background: white; }
.btn-add { background: #ffab00; color: #1a237e; border: none; padding: 8px 16px; border-radius: 6px; font-weight: 600; cursor: pointer; font-size: 13px; transition: all 0.2s; }
.btn-add:hover { background: #ffc107; transform: translateY(-1px); }

/* Navigation tabs */
.nav-tabs { background: white; display: flex; border-bottom: 2px solid #e0e0e0; padding: 0 24px; overflow-x: auto; }
.nav-tab { padding: 12px 20px; cursor: pointer; font-size: 13px; font-weight: 500; color: #666; border-bottom: 3px solid transparent; transition: all 0.2s; white-space: nowrap; }
.nav-tab:hover { color: #1a237e; background: #f5f5f5; }
.nav-tab.active { color: #1a237e; border-bottom-color: #1a237e; font-weight: 600; }
.nav-tab .badge { background: #e3f2fd; color: #1565c0; padding: 2px 8px; border-radius: 10px; font-size: 11px; margin-left: 6px; }

/* KPI Cards */
.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; padding: 20px 24px; }
.kpi-card { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.kpi-card .kpi-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 700; margin: 4px 0; }
.kpi-card .kpi-sub { font-size: 11px; color: #888; }
.kpi-card.blue .kpi-value { color: #1565c0; }
.kpi-card.green .kpi-value { color: #2e7d32; }
.kpi-card.orange .kpi-value { color: #e65100; }
.kpi-card.purple .kpi-value { color: #6a1b9a; }
.kpi-card.teal .kpi-value { color: #00695c; }
.kpi-card.red .kpi-value { color: #c62828; }

/* Content area */
.content { padding: 0 24px 24px; }

/* Pipeline view */
.pipeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; }
.pipeline-col { background: #f5f5f5; border-radius: 10px; min-height: 400px; }
.pipeline-header { padding: 12px; border-radius: 10px 10px 0 0; color: white; font-weight: 600; font-size: 13px; display: flex; justify-content: space-between; align-items: center; }
.pipeline-header .count { background: rgba(255,255,255,0.3); padding: 2px 8px; border-radius: 10px; font-size: 11px; }
.pipeline-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; min-height: 50px; }
.pipe-card { background: white; border-radius: 8px; padding: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); cursor: pointer; transition: all 0.2s; border-left: 3px solid transparent; }
.pipe-card:hover { box-shadow: 0 3px 8px rgba(0,0,0,0.15); transform: translateY(-1px); }
.pipe-card .name { font-weight: 600; font-size: 13px; }
.pipe-card .info { font-size: 11px; color: #888; margin-top: 4px; }
.pipe-card .tags { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.pipe-card .tag { padding: 2px 6px; border-radius: 4px; font-size: 10px; font-weight: 500; }
.tag-chaud { background: #ffebee; color: #c62828; }
.tag-tiede { background: #fff3e0; color: #e65100; }
.tag-froid { background: #e3f2fd; color: #1565c0; }
.tag-particulier { background: #e8f5e9; color: #2e7d32; }
.tag-tertiaire { background: #ede7f6; color: #6a1b9a; }

/* Table view */
.table-container { background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 16px; overflow-x: auto; }
.toolbar { padding: 12px 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #eee; flex-wrap: wrap; }
.toolbar input[type="text"] { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; width: 250px; }
.toolbar select { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: white; }
table { width: 100%; border-collapse: collapse; }
th { background: #f5f5f5; padding: 10px 12px; text-align: left; font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #e0e0e0; position: sticky; top: 0; cursor: pointer; white-space: nowrap; }
th:hover { background: #eee; }
td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; font-size: 13px; white-space: nowrap; }
tr:hover { background: #f8f9fa; }
.status-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.status-prospect { background: #e3f2fd; color: #1565c0; }
.status-rdv { background: #fff3e0; color: #e65100; }
.status-audit { background: #fce4ec; color: #c62828; }
.status-devis { background: #ede7f6; color: #6a1b9a; }
.status-chantier { background: #e8f5e9; color: #2e7d32; }
.priority-chaud { color: #c62828; font-weight: 600; }
.priority-tiede { color: #e65100; font-weight: 600; }
.priority-froid { color: #1565c0; }
.actions-cell button { background: none; border: none; cursor: pointer; padding: 4px; font-size: 14px; border-radius: 4px; }
.actions-cell button:hover { background: #eee; }

/* Dashboard charts area */
.dashboard-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-top: 16px; }
.chart-card { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.chart-card h3 { font-size: 14px; color: #333; margin-bottom: 12px; }
.bar-chart { display: flex; flex-direction: column; gap: 8px; }
.bar-row { display: flex; align-items: center; gap: 8px; }
.bar-label { width: 80px; font-size: 12px; color: #666; text-align: right; }
.bar-track { flex: 1; height: 24px; background: #f0f0f0; border-radius: 4px; overflow: hidden; position: relative; }
.bar-fill { height: 100%; border-radius: 4px; display: flex; align-items: center; padding-left: 8px; font-size: 11px; color: white; font-weight: 600; transition: width 0.5s; }
.bar-value { font-size: 12px; width: 40px; text-align: right; font-weight: 600; }
.donut-container { display: flex; justify-content: center; align-items: center; flex-direction: column; }
.legend { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.legend-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }

/* Bureau stats */
.bureau-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 16px; }
.bureau-card { background: white; border-radius: 10px; padding: 16px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.bureau-card h3 { font-size: 15px; margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.bureau-card .stat-row { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.bureau-card .stat-row:last-child { border: none; }

/* Devis styles */
.devis-form { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 16px; }
.devis-section-title { font-size: 13px; font-weight: 600; color: #1a237e; margin-top: 16px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #e0e0e0; }
.devis-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.devis-info-block { background: #f5f5f5; padding: 12px; border-radius: 8px; }
.devis-info-block .label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
.devis-info-block .value { font-size: 13px; font-weight: 500; margin-top: 2px; }
.devis-lines { margin: 16px 0; }
.devis-lines table { width: 100%; border-collapse: collapse; }
.devis-lines table th { background: #f5f5f5; padding: 10px; text-align: left; font-size: 12px; color: #666; border-bottom: 2px solid #e0e0e0; }
.devis-lines table td { padding: 10px; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.devis-lines table tbody tr:nth-child(even) { background: #fafafa; }
.devis-lines table tbody tr:hover { background: #f5f5f5; }
.devis-lines table input { width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.devis-lines table select { width: 100%; padding: 6px; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
.btn-remove-line { background: #c62828; color: white; border: none; padding: 4px 8px; border-radius: 4px; cursor: pointer; font-size: 11px; }
.btn-remove-line:hover { background: #d32f2f; }
.devis-totals { background: #f5f5f5; padding: 12px; border-radius: 8px; margin: 16px 0; text-align: right; }
.devis-totals-row { display: flex; justify-content: flex-end; gap: 32px; margin: 8px 0; font-size: 13px; }
.devis-totals-row .label { font-weight: 500; min-width: 150px; text-align: right; }
.devis-totals-row .value { font-weight: 600; min-width: 120px; text-align: right; }
.devis-aides { background: #e8f5e9; padding: 12px; border-radius: 8px; margin: 16px 0; }
.devis-aides-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.devis-history { margin-top: 16px; }
.devis-history-item { background: white; border: 1px solid #e0e0e0; border-radius: 8px; padding: 12px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; }
.devis-history-item .info { flex: 1; }
.devis-history-item .actions button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 4px; margin-left: 8px; }

/* Modal */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 200; justify-content: center; align-items: flex-start; padding-top: 60px; }
.modal-overlay.show { display: flex; }
.modal { background: white; border-radius: 12px; width: 520px; max-height: 80vh; overflow-y: auto; box-shadow: 0 8px 32px rgba(0,0,0,0.2); }
.modal-header { padding: 16px 20px; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; }
.modal-header h2 { font-size: 16px; }
.modal-close { background: none; border: none; font-size: 20px; cursor: pointer; color: #999; padding: 4px; }
.modal-body { padding: 20px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #555; margin-bottom: 4px; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; font-family: inherit; }
.form-group textarea { height: 60px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-footer { padding: 12px 20px; border-top: 1px solid #eee; display: flex; justify-content: flex-end; gap: 8px; }
.btn { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; }
.btn-primary { background: #1a237e; color: white; }
.btn-primary:hover { background: #283593; }
.btn-secondary { background: #e0e0e0; color: #333; }
.btn-secondary:hover { background: #d0d0d0; }
.btn-danger { background: #c62828; color: white; }
.btn-danger:hover { background: #d32f2f; }
.btn-generate-devis { background: #ffab00; color: #1a237e; font-weight: 600; padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.btn-generate-devis:hover { background: #ffc107; }

/* Historique */
.historique { margin-top: 16px; }
.historique-item { display: flex; gap: 12px; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
.historique-date { color: #888; min-width: 80px; font-size: 11px; }
.historique-text { flex: 1; }

/* PAC Catalogue */
.pac-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 16px; }
.pac-filters select, .pac-filters input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: white; }
.pac-filters input { width: 200px; }
.pac-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.pac-card { background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.2s; border: 2px solid transparent; }
.pac-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
.pac-card-header { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.pac-brand { font-weight: 700; font-size: 15px; color: #1a237e; }
.pac-type-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.pac-type-aireau { background: #e3f2fd; color: #1565c0; }
.pac-type-airair { background: #fff3e0; color: #e65100; }
.pac-type-geothermie { background: #e8f5e9; color: #2e7d32; }
.pac-type-hybride { background: #fce4ec; color: #c62828; }
.pac-type-ecs { background: #ede7f6; color: #6a1b9a; }
.pac-card-body { padding: 0 16px 14px; }
.pac-model { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #333; }
.pac-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pac-spec { font-size: 12px; display: flex; justify-content: space-between; padding: 4px 8px; background: #f8f9fa; border-radius: 4px; }
.pac-spec .spec-label { color: #888; }
.pac-spec .spec-value { font-weight: 600; color: #333; }
.pac-card-footer { padding: 10px 16px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f0f0; }
.pac-price { font-weight: 700; color: #2e7d32; font-size: 14px; }
.pac-cop { font-size: 12px; color: #1565c0; font-weight: 600; }
.pac-btn-devis { background: #ffab00; color: #1a237e; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.pac-btn-devis:hover { background: #ffc107; }
.pac-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.pac-summary-card { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center; }
.pac-summary-card .count { font-size: 24px; font-weight: 700; color: #1a237e; }
.pac-summary-card .label { font-size: 11px; color: #888; margin-top: 4px; }

/* Isolants Catalogue */
.iso-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 16px; }
.iso-filters select, .iso-filters input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: white; }
.iso-filters input { width: 200px; }
.iso-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.iso-card { background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.2s; }
.iso-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
.iso-card-header { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.iso-brand { font-weight: 700; font-size: 15px; color: #1a237e; }
.iso-pose-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.iso-pose-ite { background: #e3f2fd; color: #1565c0; }
.iso-pose-iti { background: #fff3e0; color: #e65100; }
.iso-pose-combles { background: #e8f5e9; color: #2e7d32; }
.iso-pose-sol { background: #ede7f6; color: #6a1b9a; }
.iso-pose-toiture { background: #fce4ec; color: #c62828; }
.iso-pose-plancher { background: #f3e5f5; color: #7b1fa2; }
.iso-card-body { padding: 0 16px 14px; }
.iso-model { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #333; }
.iso-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.iso-spec { font-size: 12px; display: flex; justify-content: space-between; padding: 4px 8px; background: #f8f9fa; border-radius: 4px; }
.iso-spec .spec-label { color: #888; }
.iso-spec .spec-value { font-weight: 600; color: #333; }
.iso-card-footer { padding: 10px 16px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f0f0; }
.iso-perf { display: flex; gap: 8px; align-items: center; }
.iso-lambda { font-size: 12px; font-weight: 600; color: #1565c0; }
.iso-resist { font-size: 12px; font-weight: 600; color: #2e7d32; }
.iso-prix { font-weight: 700; color: #2e7d32; font-size: 14px; }
.iso-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.iso-summary-card { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center; }
.iso-summary-card .count { font-size: 24px; font-weight: 700; color: #1a237e; }
.iso-summary-card .label { font-size: 11px; color: #888; margin-top: 4px; }

/* Équipements Catalogue */
.eq-filters { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 16px; }
.eq-filters select, .eq-filters input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: white; }
.eq-filters input { width: 200px; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; margin-top: 16px; }
.eq-card { background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; transition: all 0.2s; }
.eq-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.12); transform: translateY(-2px); }
.eq-card-header { padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
.eq-brand { font-weight: 700; font-size: 15px; color: #1a237e; }
.eq-cat-badge { padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.eq-cat-ballonthermo { background: #e3f2fd; color: #1565c0; }
.eq-cat-ballonsolaire { background: #fff8e1; color: #f57f17; }
.eq-cat-vmc { background: #e8f5e9; color: #2e7d32; }
.eq-cat-vmr { background: #fce4ec; color: #c62828; }
.eq-card-body { padding: 0 16px 14px; }
.eq-model { font-size: 14px; font-weight: 600; margin-bottom: 8px; color: #333; }
.eq-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.eq-spec { font-size: 12px; display: flex; justify-content: space-between; padding: 4px 8px; background: #f8f9fa; border-radius: 4px; }
.eq-spec .spec-label { color: #888; }
.eq-spec .spec-value { font-weight: 600; color: #333; }
.eq-card-footer { padding: 10px 16px; background: #f8f9fa; display: flex; justify-content: space-between; align-items: center; border-top: 1px solid #f0f0f0; }
.eq-prix { font-weight: 700; color: #2e7d32; font-size: 14px; }
.eq-energy { font-size: 12px; font-weight: 600; color: #1565c0; }
.eq-btn-devis { background: #ffab00; color: #1a237e; border: none; padding: 6px 12px; border-radius: 6px; font-weight: 600; font-size: 12px; cursor: pointer; transition: all 0.2s; }
.eq-btn-devis:hover { background: #ffc107; }
.eq-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-top: 16px; }
.eq-summary-card { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center; }
.eq-summary-card .count { font-size: 24px; font-weight: 700; color: #1a237e; }
.eq-summary-card .label { font-size: 11px; color: #888; margin-top: 4px; }

/* Agenda */
.agenda-toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; padding: 16px; background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); margin-top: 16px; }
.agenda-toolbar select, .agenda-toolbar input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 6px; font-size: 13px; background: white; }
.agenda-toolbar .btn { margin-left: auto; }
.agenda-nav { display: flex; align-items: center; gap: 12px; }
.agenda-nav button { background: #e0e0e0; border: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: 600; }
.agenda-nav button:hover { background: #d0d0d0; }
.agenda-nav .month-label { font-size: 16px; font-weight: 700; color: #1a237e; min-width: 180px; text-align: center; }
.agenda-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 16px; }
.agenda-summary-card { background: white; border-radius: 10px; padding: 14px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); text-align: center; }
.agenda-summary-card .count { font-size: 24px; font-weight: 700; color: #1a237e; }
.agenda-summary-card .label { font-size: 11px; color: #888; margin-top: 4px; }
.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-top: 16px; background: white; border-radius: 10px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow: hidden; }
.cal-header { background: #1a237e; color: white; padding: 10px 4px; text-align: center; font-size: 12px; font-weight: 600; }
.cal-day { min-height: 100px; padding: 6px; border: 1px solid #f0f0f0; background: white; cursor: pointer; transition: background 0.15s; position: relative; }
.cal-day:hover { background: #f5f5ff; }
.cal-day.other-month { background: #fafafa; color: #ccc; }
.cal-day.today { background: #e3f2fd; border-color: #1565c0; }
.cal-day .day-num { font-size: 12px; font-weight: 600; color: #333; margin-bottom: 4px; }
.cal-day.other-month .day-num { color: #ccc; }
.cal-day.today .day-num { color: #1565c0; }
.cal-event { padding: 2px 5px; margin: 1px 0; border-radius: 3px; font-size: 10px; font-weight: 500; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cal-event.type-audit { background: #fff3e0; color: #e65100; border-left: 3px solid #e65100; }
.cal-event.type-pose { background: #e8f5e9; color: #2e7d32; border-left: 3px solid #2e7d32; }
.cal-event.type-rdv { background: #e3f2fd; color: #1565c0; border-left: 3px solid #1565c0; }
.cal-event.type-sav { background: #fce4ec; color: #c62828; border-left: 3px solid #c62828; }
.agenda-list { margin-top: 16px; }
.agenda-list-item { background: white; border-radius: 8px; padding: 14px 16px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; gap: 16px; align-items: center; transition: all 0.2s; }
.agenda-list-item:hover { box-shadow: 0 3px 10px rgba(0,0,0,0.12); }
.agenda-list-item .date-block { min-width: 60px; text-align: center; padding: 8px; border-radius: 8px; background: #f5f5f5; }
.agenda-list-item .date-block .day { font-size: 22px; font-weight: 700; color: #1a237e; line-height: 1; }
.agenda-list-item .date-block .month { font-size: 10px; color: #888; text-transform: uppercase; }
.agenda-list-item .event-info { flex: 1; }
.agenda-list-item .event-title { font-weight: 600; font-size: 14px; }
.agenda-list-item .event-meta { font-size: 12px; color: #666; margin-top: 4px; }
.agenda-list-item .event-type { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.event-type-audit { background: #fff3e0; color: #e65100; }
.event-type-pose { background: #e8f5e9; color: #2e7d32; }
.event-type-rdv { background: #e3f2fd; color: #1565c0; }
.event-type-sav { background: #fce4ec; color: #c62828; }
.agenda-list-item .event-actions button { background: none; border: none; cursor: pointer; font-size: 14px; padding: 4px; border-radius: 4px; }
.agenda-list-item .event-actions button:hover { background: #eee; }
.agenda-view-toggle { display: flex; gap: 4px; background: #e0e0e0; border-radius: 6px; padding: 2px; }
.agenda-view-toggle button { padding: 6px 14px; border: none; border-radius: 5px; font-size: 12px; font-weight: 600; cursor: pointer; background: transparent; color: #666; }
.agenda-view-toggle button.active { background: white; color: #1a237e; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

/* Précarité */
.preca-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px; }
.preca-form-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.preca-result-card { background: white; border-radius: 10px; padding: 20px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.preca-result-hidden { display: none; }
.preca-result-box { padding: 20px; border-radius: 10px; text-align: center; margin-top: 16px; }
.preca-bleu { background: linear-gradient(135deg, #0288d1, #0277bd); color: white; }
.preca-jaune { background: linear-gradient(135deg, #fbc02d, #f9a825); color: #333; }
.preca-violet { background: linear-gradient(135deg, #7b1fa2, #6a1b9a); color: white; }
.preca-rose { background: linear-gradient(135deg, #e91e63, #c2185b); color: white; }
.preca-category { font-size: 28px; font-weight: 800; margin: 8px 0; }
.preca-label { font-size: 14px; font-weight: 600; opacity: 0.9; }
.preca-detail { font-size: 12px; opacity: 0.85; margin-top: 4px; }
.preca-aides-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.preca-aide-item { background: #f8f9fa; border-radius: 8px; padding: 12px; border-left: 4px solid #1a237e; }
.preca-aide-item .aide-label { font-size: 11px; color: #888; text-transform: uppercase; }
.preca-aide-item .aide-value { font-size: 16px; font-weight: 700; color: #1a237e; margin-top: 2px; }
.preca-aide-item .aide-detail { font-size: 11px; color: #666; margin-top: 2px; }
.preca-bareme { margin-top: 16px; }
.preca-bareme table { width: 100%; border-collapse: collapse; font-size: 12px; }
.preca-bareme th { background: #f5f5f5; padding: 8px; text-align: center; border: 1px solid #e0e0e0; font-size: 11px; }
.preca-bareme td { padding: 8px; text-align: center; border: 1px solid #e0e0e0; }
.preca-bareme tr.active-row { background: #e3f2fd; font-weight: 600; }
.preca-history { margin-top: 24px; }
.preca-history-item { background: white; border-radius: 8px; padding: 12px 16px; margin-bottom: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; justify-content: space-between; align-items: center; }
.preca-history-item .info { flex: 1; }
.preca-history-item .category-badge { padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 700; }
.badge-bleu { background: #0288d1; color: white; }
.badge-jaune { background: #fbc02d; color: #333; }
.badge-violet { background: #7b1fa2; color: white; }
.badge-rose { background: #e91e63; color: white; }

/* Section visibility */
.section { display: none; }
.section.active { display: block; }

/* Responsive */
@media (max-width: 768px) {
  .pipeline { grid-template-columns: 1fr; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .devis-info-grid { grid-template-columns: 1fr; }
  .devis-aides-row { grid-template-columns: 1fr; }
  .pac-grid { grid-template-columns: 1fr; }
  .pac-filters { flex-direction: column; }
  .pac-filters input { width: 100%; }
  .iso-grid { grid-template-columns: 1fr; }
  .iso-filters { flex-direction: column; }
  .iso-filters input { width: 100%; }
  .eq-grid { grid-template-columns: 1fr; }
  .eq-filters { flex-direction: column; }
  .eq-filters input { width: 100%; }
  .calendar-grid { font-size: 10px; }
  .cal-day { min-height: 60px; }
  .agenda-toolbar { flex-direction: column; }
  .preca-container { grid-template-columns: 1fr; }
  .preca-aides-grid { grid-template-columns: 1fr; }
}

#navTabs.nav-tabs{position:fixed!important;left:0!important;top:0!important;width:240px!important;height:100vh!important;flex-direction:column!important;background:linear-gradient(180deg,#0a0a0a 0%,#1a1a1a 50%,#000 100%)!important;border-right:1px solid rgba(245,158,11,0.2)!important;padding:24px 12px!important;gap:4px!important;overflow-y:auto!important;box-shadow:4px 0 24px rgba(0,0,0,0.15)!important;z-index:100!important;border:none!important;}
#navTabs .nav-tab{color:#cbd5e1!important;text-align:left!important;padding:12px 16px!important;border-radius:8px!important;border:none!important;background:transparent!important;font-size:14px!important;transition:all 0.2s!important;}
#navTabs .nav-tab:hover{background:rgba(255,255,255,0.05)!important;color:#fff!important;}
#navTabs .nav-tab.active{background:linear-gradient(90deg,#f59e0b 0%,#d97706 100%)!important;color:#fff!important;box-shadow:0 4px 12px rgba(245,158,11,0.3)!important;}
#appContainer .header,#appContainer .section,#appContainer>.container{margin-left:240px!important;}
@media(max-width:768px){#navTabs.nav-tabs{width:60px!important;padding:12px 6px!important;}#navTabs .nav-tab{font-size:0!important;padding:12px!important;}#appContainer .header,#appContainer .section,#appContainer>.container{margin-left:60px!important;}}

#bureauFilter{display:none!important;}

/* Dashboard modern styling */
.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;padding:24px 28px;}
.kpi-card{background:linear-gradient(135deg,#ffffff 0%,#f8fafc 100%);border-radius:16px;padding:24px;box-shadow:0 4px 16px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04);border:1px solid rgba(0,0,0,0.04);position:relative;overflow:hidden;transition:all 0.3s cubic-bezier(0.4,0,0.2,1);}
.kpi-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f59e0b,#d97706);}
.kpi-card:hover{transform:translateY(-4px);box-shadow:0 12px 32px rgba(0,0,0,0.1);}
.kpi-label{font-size:11px;color:#64748b;text-transform:uppercase;letter-spacing:1px;font-weight:600;}
.kpi-value{font-size:32px;font-weight:800;margin:8px 0;letter-spacing:-0.02em;}
.kpi-sub{font-size:12px;color:#94a3b8;}
.chart-card{background:linear-gradient(135deg,#ffffff 0%,#fafafa 100%)!important;border-radius:16px!important;padding:24px!important;box-shadow:0 4px 16px rgba(0,0,0,0.06)!important;border:1px solid rgba(0,0,0,0.04)!important;}
.chart-card h3{font-size:15px!important;font-weight:700!important;color:#0f172a!important;margin-bottom:16px!important;}
.dashboard-grid{gap:20px!important;padding:0 28px 28px 28px;}
.header h1{font-weight:700!important;letter-spacing:-0.02em!important;}
.header h1 span{background:linear-gradient(90deg,#f59e0b,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ==== AGENDA KILLER DESIGN ==== */
#sec-agenda .content{padding:0 28px 28px!important;}
.agenda-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin:24px 0;}
.agenda-summary > *{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fff;border-radius:14px;padding:20px;border:1px solid rgba(245,158,11,0.15);box-shadow:0 4px 16px rgba(0,0,0,0.08);position:relative;overflow:hidden;transition:all .3s cubic-bezier(.4,0,.2,1);}
.agenda-summary > *::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,#f59e0b,#fbbf24);}
.agenda-summary > *:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(0,0,0,0.2);border-color:rgba(245,158,11,0.4);}
.agenda-summary .big,.agenda-summary strong,.agenda-summary .count{font-size:30px!important;font-weight:800!important;background:linear-gradient(90deg,#f59e0b,#fbbf24);-webkit-background-clip:text;background-clip:text;color:transparent;letter-spacing:-0.02em;}

.agenda-toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:linear-gradient(135deg,#fff,#fafafa);border:1px solid rgba(0,0,0,0.06);border-radius:14px;padding:14px 18px;margin-bottom:20px;box-shadow:0 2px 8px rgba(0,0,0,0.04);}
.agenda-nav{display:flex;align-items:center;gap:8px;}
.agenda-nav button{width:38px;height:38px;border-radius:10px;border:1px solid #e2e8f0;background:#fff;cursor:pointer;font-size:16px;color:#334155;transition:all .2s;display:flex;align-items:center;justify-content:center;}
.agenda-nav button:hover{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;transform:scale(1.05);box-shadow:0 4px 12px rgba(245,158,11,0.3);}
.month-label{font-size:22px;font-weight:800;color:#0f172a;letter-spacing:-0.02em;min-width:200px;text-align:center;text-transform:capitalize;}
.agenda-view-toggle{display:flex;background:#f1f5f9;border-radius:10px;padding:3px;}
.agenda-view-toggle button{padding:8px 16px;border-radius:8px;border:none;background:transparent;cursor:pointer;font-size:13px;font-weight:600;color:#64748b;transition:all .2s;}
.agenda-view-toggle button.active{background:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,0.08);}
.agenda-toolbar select{padding:9px 12px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;font-size:13px;color:#334155;cursor:pointer;transition:all .2s;}
.agenda-toolbar select:hover{border-color:#f59e0b;}
.agenda-toolbar .btn-primary{background:linear-gradient(135deg,#f59e0b,#d97706)!important;border:none!important;padding:10px 20px!important;border-radius:10px!important;font-weight:600!important;box-shadow:0 4px 12px rgba(245,158,11,0.3)!important;transition:all .2s!important;}
.agenda-toolbar .btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(245,158,11,0.4)!important;}

#agendaCalendarView{background:#fff;border-radius:16px;overflow:hidden;box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.05);}
#agendaCalendarView table{width:100%;border-collapse:collapse;}
#agendaCalendarView thead th{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fff;padding:14px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;border:none;}
#agendaCalendarView td{border:1px solid #f1f5f9;height:110px;vertical-align:top;padding:8px;transition:all .2s;cursor:pointer;position:relative;background:#fff;}
#agendaCalendarView td:hover{background:linear-gradient(135deg,#fffbeb,#fef3c7);}
#agendaCalendarView td.other-month{background:#fafafa;color:#cbd5e1;}
#agendaCalendarView td.today{background:linear-gradient(135deg,#fef3c7,#fde68a)!important;box-shadow:inset 0 0 0 2px #f59e0b;}
#agendaCalendarView td.today .day-num{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;font-weight:800;}
#agendaCalendarView .day-num{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:8px;font-size:13px;font-weight:600;color:#0f172a;margin-bottom:4px;}
#agendaCalendarView .event-pill{display:block;padding:3px 8px;margin:2px 0;border-radius:6px;font-size:11px;font-weight:600;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:pointer;transition:all .15s;box-shadow:0 1px 2px rgba(0,0,0,0.08);}
#agendaCalendarView .event-pill:hover{transform:translateX(2px);box-shadow:0 2px 6px rgba(0,0,0,0.15);}
#agendaCalendarView .event-pill.type-rdv{background:linear-gradient(135deg,#f59e0b,#d97706);}
#agendaCalendarView .event-pill.type-devis{background:linear-gradient(135deg,#3b82f6,#2563eb);}
#agendaCalendarView .event-pill.type-installation{background:linear-gradient(135deg,#10b981,#059669);}
#agendaCalendarView .event-pill.type-visite{background:linear-gradient(135deg,#8b5cf6,#7c3aed);}
#agendaCalendarView .event-pill.type-relance{background:linear-gradient(135deg,#ec4899,#db2777);}
#agendaCalendarView .event-pill.type-autre{background:linear-gradient(135deg,#64748b,#475569);}
#agendaCalendarView .event-more{font-size:10px;color:#94a3b8;font-weight:600;padding:2px 8px;}

#agendaListView{background:#fff;border-radius:16px;padding:8px;box-shadow:0 4px 24px rgba(0,0,0,0.06);border:1px solid rgba(0,0,0,0.05);}
#agendaListView .event-row{display:flex;align-items:center;gap:16px;padding:16px;border-radius:12px;margin:4px 0;transition:all .2s;cursor:pointer;border-left:4px solid transparent;}
#agendaListView .event-row:hover{background:linear-gradient(135deg,#fffbeb,#fef3c7);transform:translateX(4px);}
#agendaListView .event-row.type-rdv{border-left-color:#f59e0b;}
#agendaListView .event-row.type-devis{border-left-color:#3b82f6;}
#agendaListView .event-row.type-installation{border-left-color:#10b981;}
#agendaListView .event-row.type-visite{border-left-color:#8b5cf6;}
#agendaListView .event-row.type-relance{border-left-color:#ec4899;}

#eventModal .modal{border-radius:20px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,0.25);border:1px solid rgba(255,255,255,0.1);}
#eventModal .modal-header{background:linear-gradient(135deg,#0a0a0a,#1a1a1a);color:#fff;padding:20px 28px;border-bottom:1px solid rgba(245,158,11,0.2);}
#eventModal .modal-header h2,#eventModal .modal-header h3{color:#fff!important;font-weight:700!important;}
#eventModal .modal-close{color:#fff!important;opacity:.7;transition:opacity .2s;}
#eventModal .modal-close:hover{opacity:1;}
#eventModal .modal-body{padding:24px 28px;}
#eventModal .modal-footer{padding:16px 28px;background:#fafafa;border-top:1px solid #f1f5f9;}
#eventModal .btn-primary{background:linear-gradient(135deg,#f59e0b,#d97706)!important;border:none!important;box-shadow:0 4px 12px rgba(245,158,11,0.3)!important;}

@media(max-width:768px){.agenda-toolbar{flex-direction:column;align-items:stretch;}#agendaCalendarView td{height:70px;font-size:11px;}.month-label{min-width:auto;}}

/* Agenda 4-view toggle */
.agenda-day-grid{background:#111;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden}
.agenda-day-hour{display:grid;grid-template-columns:70px 1fr;border-bottom:1px solid #1f1f1f;min-height:50px}
.agenda-day-hour:last-child{border-bottom:none}
.agenda-day-hour .hr{padding:8px 10px;color:#777;font-size:11px;font-weight:600;border-right:1px solid #1f1f1f;background:#0a0a0a}
.agenda-day-hour .slot{padding:4px 8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.agenda-day-hour .slot:hover{background:#161616}
.agenda-week-grid{display:grid;grid-template-columns:60px repeat(7,1fr);gap:1px;background:#2a2a2a;border:1px solid #2a2a2a;border-radius:12px;overflow:hidden}
.agenda-week-grid>div{background:#111;padding:6px 4px;min-height:42px;font-size:11px}
.agenda-week-grid .wk-head{background:#0a0a0a;color:#f59e0b;font-weight:700;text-align:center;padding:10px 4px;font-size:12px;text-transform:uppercase;letter-spacing:.5px}
.agenda-week-grid .wk-hr{background:#0a0a0a;color:#777;font-weight:600;text-align:center;padding:8px 4px}
.agenda-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.agenda-year-month{background:#111;border:1px solid #2a2a2a;border-radius:12px;padding:12px;cursor:pointer;transition:all .2s}
.agenda-year-month:hover{border-color:#f59e0b;transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.15)}
.agenda-year-month h4{margin:0 0 10px 0;color:#f59e0b;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.agenda-year-mini{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;font-size:10px}
.agenda-year-mini .d{aspect-ratio:1;display:flex;align-items:center;justify-content:center;color:#888;border-radius:3px}
.agenda-year-mini .d.has{background:#f59e0b;color:#000;font-weight:700}
.agenda-year-mini .d.today{outline:2px solid #f59e0b}
.agenda-year-mini .wd{color:#555;font-weight:600;font-size:9px;text-align:center}

/* Toggle active orange */
.agenda-view-toggle button{background:#1a1a1a;color:#ccc;border:1px solid #2a2a2a;padding:8px 18px;border-radius:8px;font-weight:600;font-size:13px;cursor:pointer;transition:all .2s;margin-right:6px}
.agenda-view-toggle button:hover{background:#232323;color:#f59e0b;border-color:#f59e0b}
.agenda-view-toggle button.active{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;border-color:transparent;box-shadow:0 4px 12px rgba(245,158,11,.35)}

/* ===== Agenda dark override v3 ===== */
#sec-agenda .agenda-toolbar{background:#111!important;border:1px solid #2a2a2a!important;box-shadow:none!important;color:#eee}
#sec-agenda .agenda-toolbar input, #sec-agenda .agenda-toolbar select{background:#1a1a1a!important;border:1px solid #2a2a2a!important;color:#eee!important}
#sec-agenda .agenda-nav button{background:#1a1a1a!important;color:#eee!important;border:1px solid #2a2a2a!important;transition:all .2s}
#sec-agenda .agenda-nav button:hover{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;border-color:transparent!important}
#sec-agenda .agenda-nav .month-label{color:#f59e0b!important;text-transform:capitalize;letter-spacing:.3px}
#sec-agenda .agenda-summary-card{background:#111!important;border:1px solid #2a2a2a!important;box-shadow:none!important;color:#eee!important;transition:all .2s}
#sec-agenda .agenda-summary-card:hover{border-color:#f59e0b!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.15)!important}
#sec-agenda .agenda-summary-card h3, #sec-agenda .agenda-summary-card h4, #sec-agenda .agenda-summary-card .count{color:#f59e0b!important}
#sec-agenda .agenda-summary-card .label, #sec-agenda .agenda-summary-card span{color:#aaa!important}
#sec-agenda .calendar-grid{background:#2a2a2a!important;border:1px solid #2a2a2a!important;border-radius:12px;overflow:hidden}
#sec-agenda .calendar-grid > *{background:#111!important;color:#ddd!important;border-color:#1a1a1a!important}
#sec-agenda .calendar-grid .weekday, #sec-agenda .calendar-grid .day-header{background:#0a0a0a!important;color:#f59e0b!important;font-weight:700!important;text-transform:uppercase;letter-spacing:.5px;font-size:11px}
#sec-agenda .calendar-grid .calendar-day{min-height:90px;padding:6px!important}
#sec-agenda .calendar-grid .calendar-day .day-number{color:#eee!important;font-weight:600}
#sec-agenda .calendar-grid .calendar-day.other-month{opacity:.35}
#sec-agenda .calendar-grid .calendar-day.today{background:rgba(245,158,11,.08)!important;border:1px solid #f59e0b!important}
#sec-agenda .calendar-grid .calendar-day:hover{background:#161616!important;cursor:pointer}
#sec-agenda .agenda-list{background:#111!important;border:1px solid #2a2a2a!important;border-radius:12px;color:#eee}
#sec-agenda .agenda-list-item{background:#0a0a0a!important;border-bottom:1px solid #1f1f1f!important;color:#eee!important}
#sec-agenda .agenda-list-item:hover{background:#161616!important}
/* Hour labels bright */
.agenda-day-hour .hr{color:#fff!important;background:#0a0a0a!important;font-size:13px!important;font-weight:700!important;letter-spacing:.5px}
.agenda-week-grid .wk-hr{color:#fff!important;background:#0a0a0a!important;font-size:12px!important;font-weight:700!important}
.agenda-week-grid .wk-head{color:#f59e0b!important;font-size:12px!important;font-weight:700!important}

/* Pipeline dark theme */
#sec-pipeline .pipeline-col{background:#111!important;border:1px solid #2a2a2a!important;transition:all .2s}
#sec-pipeline .pipeline-col:hover{border-color:#f59e0b!important}
#sec-pipeline .pipeline-header{background:linear-gradient(135deg,#0a0a0a 0%,#1a1a1a 100%)!important;color:#f59e0b!important;border-bottom:2px solid #f59e0b!important;text-transform:uppercase;letter-spacing:.5px}
#sec-pipeline .pipeline-header .count{background:#f59e0b!important;color:#000!important;font-weight:700}
#sec-pipeline .pipeline-cards .deal-card,#sec-pipeline .pipeline-cards >div{background:#0a0a0a!important;border:1px solid #2a2a2a!important;color:#eee!important;border-radius:8px!important;padding:10px!important;cursor:pointer;transition:all .2s}
#sec-pipeline .pipeline-cards >div:hover{border-color:#f59e0b!important;transform:translateY(-2px);box-shadow:0 8px 24px rgba(245,158,11,.15)!important}
#sec-pipeline .pipeline-cards >div *{color:inherit!important}
#sec-pipeline h1,#sec-pipeline h2,#sec-pipeline h3{color:#f59e0b!important}
#sec-pipeline{background:transparent}

/* Pipeline text whiter */
#sec-pipeline, #sec-pipeline *{color:#fff!important}
#sec-pipeline .pipeline-header, #sec-pipeline .pipeline-header *{color:#f59e0b!important}
#sec-pipeline .pipeline-header .count{color:#000!important}
#sec-pipeline .pipeline-cards >div{color:#fff!important}
#sec-pipeline .pipeline-cards >div .muted, #sec-pipeline .pipeline-cards >div small, #sec-pipeline .pipeline-cards >div .meta{color:#bbb!important}
#sec-pipeline h1,#sec-pipeline h2,#sec-pipeline h3{color:#f59e0b!important}

/* Contacts dark + orange */
#sec-contacts, #sec-contacts *{color:#fff!important}
#sec-contacts h1,#sec-contacts h2,#sec-contacts h3,#sec-contacts th{color:#f59e0b!important}
#sec-contacts .card,#sec-contacts table,#sec-contacts .panel,#sec-contacts .toolbar,#sec-contacts >div>div{background:#111!important;border:1px solid #2a2a2a!important;box-shadow:none!important;color:#fff!important}
#sec-contacts table{border-collapse:separate;border-spacing:0;width:100%;border-radius:10px;overflow:hidden}
#sec-contacts thead tr,#sec-contacts thead th{background:#0a0a0a!important;color:#f59e0b!important;text-transform:uppercase;letter-spacing:.5px;font-weight:700;font-size:11px;border-bottom:2px solid #f59e0b!important}
#sec-contacts tbody tr{background:#0a0a0a!important;transition:all .15s}
#sec-contacts tbody tr:nth-child(even){background:#141414!important}
#sec-contacts tbody tr:hover{background:rgba(245,158,11,.1)!important}
#sec-contacts tbody td{color:#fff!important;border-bottom:1px solid #1f1f1f!important;padding:10px!important}
#sec-contacts input,#sec-contacts select,#sec-contacts textarea{background:#1a1a1a!important;border:1px solid #2a2a2a!important;color:#fff!important;border-radius:6px}
#sec-contacts input::placeholder{color:#777!important}
#sec-contacts input:focus,#sec-contacts select:focus,#sec-contacts textarea:focus{border-color:#f59e0b!important;outline:none;box-shadow:0 0 0 2px rgba(245,158,11,.2)}
#sec-contacts label{color:#bbb!important;font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
#sec-contacts .btn-primary{background:linear-gradient(135deg,#f59e0b,#d97706)!important;color:#fff!important;border:none!important;box-shadow:0 4px 12px rgba(245,158,11,.3)}
#sec-contacts .btn{background:#1a1a1a!important;color:#eee!important;border:1px solid #2a2a2a!important}
#sec-contacts .btn:hover{border-color:#f59e0b!important;color:#f59e0b!important}
#sec-contacts .badge,#sec-contacts .tag,#sec-contacts .chip{background:#f59e0b!important;color:#000!important;font-weight:700}

/* Header clock widget v2 - futuristic */
#headerClock{display:inline-flex;align-items:center;gap:14px;background:linear-gradient(135deg,#0a0a0a 0%,#161616 100%);border:1px solid rgba(245,158,11,.4);border-radius:10px;padding:8px 18px;box-shadow:0 0 18px rgba(245,158,11,.25),inset 0 0 14px rgba(245,158,11,.05);font-family:"Orbitron","Segoe UI",-apple-system,sans-serif;margin-right:14px;position:relative;overflow:hidden}
#headerClock::before{content:"";position:absolute;top:-2px;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);box-shadow:0 0 8px #f59e0b}
#headerClock::after{content:"";position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);width:60%;height:1px;background:linear-gradient(90deg,transparent,#f59e0b,transparent);box-shadow:0 0 8px #f59e0b}
#headerClock .hc-time{font-size:22px;font-weight:700;color:#f59e0b;letter-spacing:3px;font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 8px rgba(245,158,11,.7),0 0 18px rgba(245,158,11,.35);font-family:"Orbitron","Courier New",monospace}
#headerClock .hc-time .sep{color:#fff;animation:hcBlink 1s steps(2,start) infinite;text-shadow:0 0 6px #fff}
#headerClock .hc-time .ss{font-size:15px;color:#fff;letter-spacing:2px;text-shadow:0 0 6px #fff,0 0 14px #fff,0 0 24px rgba(255,255,255,.85),0 0 36px rgba(255,255,255,.55);margin-left:2px;font-weight:900}
#headerClock .hc-divider{width:1px;height:30px;background:linear-gradient(180deg,transparent,rgba(245,158,11,.5),transparent)}
#headerClock .hc-date{display:flex;flex-direction:column;line-height:1.2;align-items:center;text-align:center}
#headerClock .hc-day{font-size:11px;font-weight:900;color:#f59e0b;text-transform:uppercase;letter-spacing:2px;text-shadow:0 0 6px rgba(245,158,11,.5);text-align:center;width:100%}
#headerClock .hc-full{font-size:12px;font-weight:900;color:#fff;text-transform:uppercase;letter-spacing:1.2px;font-family:"Orbitron","Courier New",monospace;text-shadow:0 0 4px rgba(255,255,255,.3)}
@keyframes hcBlink{50%{opacity:.15}}
@media(max-width:680px){#headerClock{padding:6px 12px;gap:8px}#headerClock .hc-time{font-size:16px;letter-spacing:2px}#headerClock .hc-day,#headerClock .hc-full{font-size:9px}}

.connected-user-card { position: relative; }
.btn-force-disconnect {
  margin-top: 8px;
  padding: 6px 10px;
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s;
}
.btn-force-disconnect:hover {
  background: linear-gradient(135deg, #ff5a47, #d0432d);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(231,76,60,0.4);
}

/* Statuts contacts - fond orange gradient pour lisibilite */
.status-badge, .status-badge.status-prospect, .status-badge.status-rdv, .status-badge.status-audit, .status-badge.status-devis, .status-badge.status-chantier, .status-badge.status-termine, .status-badge.status-annule, .status-badge.status-refuse {
  background: linear-gradient(135deg, #ff8c00, #ff6b1a, #e85d04) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  padding: 5px 12px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(255,140,0,0.6) !important;
  box-shadow: 0 2px 6px rgba(255,107,26,0.35), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.25) !important;
  letter-spacing: 0.3px !important;
  display: inline-block !important;
}
.status-badge.status-termine { background: linear-gradient(135deg, #ff9a3c, #ff7f00, #d94f00) !important; }
.status-badge.status-annule, .status-badge.status-refuse { background: linear-gradient(135deg, #ffb174, #e76f2a, #b94d00) !important; }

/* Supervision KPI banner */
.supervision-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.sup-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #1a1d24, #23272f);
  border: 1px solid rgba(255,140,0,0.25);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: transform .2s, box-shadow .2s;
}
.sup-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,140,0,0.2);
}
.sup-kpi-icon {
  font-size: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff8c00, #e85d04);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(255,107,26,0.35);
}
.sup-kpi-green .sup-kpi-icon {
  background: linear-gradient(135deg, #43a047, #2e7d32);
  box-shadow: 0 2px 8px rgba(67,160,71,0.35);
}
.sup-kpi-body { flex: 1; }
.sup-kpi-label {
  font-size: 11px;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}
.sup-kpi-val {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  margin-top: 2px;
}

/* Supervision tabs */
.sup-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid rgba(255,140,0,0.2);
  margin-bottom: 16px;
}
.sup-tab {
  background: transparent;
  border: none;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
}
.sup-tab:hover { color: #ff8c00; background: rgba(255,140,0,0.05); }
.sup-tab.active {
  color: #fff;
  background: linear-gradient(180deg, rgba(255,140,0,0.15), transparent);
  border-bottom-color: #ff8c00;
}
.sup-tab-content { animation: fadeIn 0.2s ease; }
@keyframes fadeIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }

@media (max-width: 1024px) {
  .supervision-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ====== Dashboard Animated Scene ====== */
.anim-scene-card { margin-bottom: 16px; padding: 20px; }
.anim-scene-card h3 { margin-bottom: 12px; }
.anim-stage {
  position: relative; width: 100%; height: 220px; overflow: hidden;
  border-radius: 12px;
  background: linear-gradient(to bottom, #87ceeb 0%, #b3e0f2 55%, #d4edda 55%, #a8d5b0 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,0.08);
}
.anim-stage .sky-gradient {
  position: absolute; inset: 0 0 45% 0;
  background: linear-gradient(to bottom, rgba(135,206,235,0.4), transparent);
  pointer-events: none;
}
.anim-stage .ground {
  position: absolute; bottom: 0; left: 0; right: 0; height: 45%;
  background: linear-gradient(to bottom, #9fd4a8, #6fb17a);
  box-shadow: inset 0 4px 8px rgba(0,0,0,0.1);
}
.anim-stage .ground::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: repeating-linear-gradient(90deg, #5a9166 0 12px, transparent 12px 18px);
}

/* Sun */
.anim-stage .sun {
  position: absolute; top: 10px; right: 30px; font-size: 38px;
  animation: sunPulse 3s ease-in-out infinite;
  filter: drop-shadow(0 0 12px rgba(255,200,0,0.8));
}
@keyframes sunPulse {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%     { transform: scale(1.1) rotate(15deg); }
}

/* Clouds */
.anim-stage .cloud { position: absolute; font-size: 28px; opacity: 0.85; top: 15px; }
.anim-stage .c1 { animation: cloudDrift 25s linear infinite; }
.anim-stage .c2 { top: 40px; font-size: 22px; animation: cloudDrift 32s linear infinite; animation-delay: -10s; }
.anim-stage .c3 { top: 25px; font-size: 24px; animation: cloudDrift 28s linear infinite; animation-delay: -18s; }
@keyframes cloudDrift {
  from { left: -80px; }
  to   { left: 105%; }
}

/* Houses */
.anim-stage .house  { position: absolute; bottom: 48%; left: 48%; font-size: 44px; filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.2)); }
.anim-stage .house2 { position: absolute; bottom: 48%; left: 72%; font-size: 38px; filter: drop-shadow(2px 4px 4px rgba(0,0,0,0.2)); }
.anim-stage .pump   { position: absolute; bottom: 42%; left: 55%; font-size: 22px; animation: pumpVibe 0.6s ease-in-out infinite; }
.anim-stage .solar  { position: absolute; bottom: 60%; left: 50%; font-size: 20px; animation: sunPulse 2s ease-in-out infinite; }
@keyframes pumpVibe {
  0%,100% { transform: translate(0,0); }
  25%     { transform: translate(1px,-1px); }
  75%     { transform: translate(-1px,1px); }
}

/* Characters */
.anim-stage .char {
  position: absolute; bottom: 8%;
  display: flex; flex-direction: column; align-items: center;
  font-size: 32px; line-height: 1;
}
.anim-stage .char .label {
  font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: #fff; background: rgba(0,0,0,0.55); padding: 2px 8px; border-radius: 10px;
  margin-bottom: 4px; white-space: nowrap;
}
.anim-stage .char .emoji { filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.25)); }
.anim-stage .char .prop {
  position: absolute; font-size: 18px; top: 18px; right: -12px;
}

/* Prospection — bounce + phone shake */
.anim-stage .char-phone { left: 4%; animation: bounceSmall 1.4s ease-in-out infinite; }
.anim-stage .char-phone .phone-icon {
  animation: phoneShake 0.5s ease-in-out infinite;
  filter: drop-shadow(0 0 6px rgba(255,200,0,0.9));
}
@keyframes phoneShake {
  0%,100% { transform: rotate(-12deg); }
  50%     { transform: rotate(12deg); }
}
@keyframes bounceSmall {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}

/* Auditor — walks back & forth */
.anim-stage .char-auditor {
  animation: auditorWalk 10s ease-in-out infinite;
}
.anim-stage .char-auditor .emoji { animation: walkBob 0.4s ease-in-out infinite; }
@keyframes auditorWalk {
  0%   { left: 22%; transform: scaleX(1); }
  45%  { left: 60%; transform: scaleX(1); }
  50%  { left: 60%; transform: scaleX(-1); }
  95%  { left: 22%; transform: scaleX(-1); }
  100% { left: 22%; transform: scaleX(1); }
}
@keyframes walkBob {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}

/* Builder — hammering */
.anim-stage .char-builder { left: 78%; }
.anim-stage .char-builder .emoji { animation: bounceSmall 0.6s ease-in-out infinite; }
.anim-stage .char-builder .hammer {
  animation: hammerSwing 0.6s ease-in-out infinite;
  transform-origin: bottom left;
}
@keyframes hammerSwing {
  0%,100% { transform: rotate(-30deg); }
  50%     { transform: rotate(40deg); }
}

/* Robot — rolling in with wrench */
.anim-stage .char-robot {
  animation: robotRoll 12s ease-in-out infinite;
}
.anim-stage .char-robot .wrench { animation: wrenchSpin 1.5s linear infinite; }
@keyframes robotRoll {
  0%   { left: -8%; }
  20%  { left: 40%; }
  40%  { left: 40%; }
  60%  { left: 88%; }
  100% { left: 105%; }
}
@keyframes wrenchSpin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Truck — crossing back */
.anim-stage .truck {
  position: absolute; bottom: 10%; font-size: 32px;
  animation: truckDrive 18s linear infinite;
  filter: drop-shadow(2px 3px 3px rgba(0,0,0,0.25));
}
@keyframes truckDrive {
  0%   { left: 110%; transform: scaleX(-1); }
  100% { left: -10%; transform: scaleX(-1); }
}

/* Sparks */
.anim-stage .spark { position: absolute; font-size: 14px; animation: sparkTwinkle 1.8s ease-in-out infinite; }
.anim-stage .s1 { top: 55%; left: 30%; }
.anim-stage .s2 { top: 30%; left: 55%; animation-delay: -0.6s; }
.anim-stage .s3 { top: 45%; left: 82%; animation-delay: -1.2s; }
@keyframes sparkTwinkle {
  0%,100% { opacity: 0; transform: scale(0.6); }
  50%     { opacity: 1; transform: scale(1.3); }
}

@media (max-width: 768px) {
  .anim-stage { height: 180px; }
  .anim-stage .char { font-size: 24px; }
  .anim-stage .house { font-size: 34px; }
}

/* ====== Transitions entre onglets ====== */
.section.active {
  animation: sectionEnter 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes sectionEnter {
  0%   { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(4px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: none; filter: none; }
}
.section.active > .content > * {
  animation: childSlide 0.6s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}
.section.active > .content > *:nth-child(1) { animation-delay: 0.05s; }
.section.active > .content > *:nth-child(2) { animation-delay: 0.12s; }
.section.active > .content > *:nth-child(3) { animation-delay: 0.19s; }
.section.active > .content > *:nth-child(4) { animation-delay: 0.26s; }
.section.active > .content > *:nth-child(5) { animation-delay: 0.33s; }
@keyframes childSlide {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}

/* Nav tab : glow + shimmer sur l'actif */
#navTabs .nav-tab {
  position: relative; overflow: hidden; transition: all 0.3s ease;
}
#navTabs .nav-tab:hover {
  background: rgba(245,158,11,0.08) !important;
  transform: translateX(2px);
}
#navTabs .nav-tab.active {
  animation: tabGlow 2.5s ease-in-out infinite;
}
@keyframes tabGlow {
  0%,100% { box-shadow: 0 4px 12px rgba(245,158,11,0.3) !important; }
  50%     { box-shadow: 0 6px 22px rgba(245,158,11,0.55), 0 0 30px rgba(245,158,11,0.2) !important; }
}
#navTabs .nav-tab.active::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
  0%   { left: -100%; }
  50%  { left: 120%; }
  100% { left: 120%; }
}

/* ====== AGENDA — Embellissement ====== */
#sec-agenda .content {
  background: transparent;
}

/* Summary cards colorées */
.agenda-summary { gap: 14px; margin-bottom: 16px; }
.agenda-summary-card {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #fff 0%, #fafbff 100%);
  border-radius: 14px; padding: 18px 14px;
  box-shadow: 0 4px 16px rgba(26,35,126,0.08), 0 0 0 1px rgba(26,35,126,0.04);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.agenda-summary-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 4px;
  background: linear-gradient(90deg, #1a237e, #f59e0b);
}
.agenda-summary-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(26,35,126,0.18), 0 0 0 1px rgba(245,158,11,0.3);
}
.agenda-summary-card:hover::before {
  animation: barSlide 0.6s ease;
}
@keyframes barSlide {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}
.agenda-summary-card .count {
  background: linear-gradient(135deg, #1a237e, #3949ab);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 32px; font-weight: 800;
}

/* Toolbar agenda */
.agenda-toolbar {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 16px rgba(26,35,126,0.08) !important;
  padding: 14px 18px !important;
  border: 1px solid rgba(26,35,126,0.06);
}
.agenda-nav button {
  background: linear-gradient(135deg, #eef0ff, #e0e4ff) !important;
  color: #1a237e; border-radius: 10px !important;
  transition: all 0.2s;
}
.agenda-nav button:hover {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  color: white !important;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 14px rgba(26,35,126,0.35);
}
.agenda-nav .month-label {
  font-family: 'Orbitron', sans-serif;
  background: linear-gradient(135deg, #1a237e, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-size: 18px !important;
  letter-spacing: 1px;
}

.agenda-view-toggle { display: inline-flex; background: #eef0ff; border-radius: 10px; padding: 3px; gap: 2px; }
.agenda-view-toggle button {
  background: transparent; border: none; padding: 7px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 600; color: #5a6688; cursor: pointer;
  transition: all 0.25s;
}
.agenda-view-toggle button:hover { color: #1a237e; }
.agenda-view-toggle button.active {
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: white;
  box-shadow: 0 3px 10px rgba(26,35,126,0.35);
}

/* Calendrier */
#agendaCalendarView {
  margin-top: 16px;
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 8px 30px rgba(26,35,126,0.1);
  background: white;
}
.cal-header {
  background: linear-gradient(135deg, #1a237e 0%, #3949ab 100%) !important;
  padding: 14px 4px !important;
  letter-spacing: 1.5px; text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,0.1);
}
.cal-day {
  min-height: 110px !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  border: 1px solid #f0f2ff !important;
}
.cal-day:hover {
  background: linear-gradient(135deg, #fff9e6, #fff3d0) !important;
  transform: scale(1.03); z-index: 5;
  box-shadow: 0 8px 20px rgba(245,158,11,0.25);
  border-color: #f59e0b !important;
}
.cal-day.today {
  background: linear-gradient(135deg, #e8ecff, #c5cbff) !important;
  border: 2px solid #1a237e !important;
  box-shadow: inset 0 0 0 2px rgba(245,158,11,0.3);
}
.cal-day.today::before {
  content: "●"; position: absolute; top: 4px; right: 6px;
  color: #f59e0b; font-size: 10px;
  animation: todayPulse 1.5s ease-in-out infinite;
}
@keyframes todayPulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(1.5); }
}
.cal-day .day-num {
  font-family: 'Orbitron', sans-serif;
  font-size: 13px !important; font-weight: 700 !important;
}

/* Évènements */
.cal-event {
  padding: 3px 7px !important; margin: 2px 0 !important;
  border-radius: 5px !important; font-size: 10px !important;
  font-weight: 600 !important;
  transition: all 0.2s !important;
  position: relative; overflow: hidden;
}
.cal-event:hover {
  transform: translateX(3px) scale(1.03);
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  z-index: 10;
}
.cal-event.type-audit { background: linear-gradient(135deg, #fff3e0, #ffe0b2) !important; border-left: 3px solid #e65100 !important; }
.cal-event.type-pose  { background: linear-gradient(135deg, #e8f5e9, #c8e6c9) !important; border-left: 3px solid #2e7d32 !important; }
.cal-event.type-rdv   { background: linear-gradient(135deg, #e3f2fd, #bbdefb) !important; border-left: 3px solid #1565c0 !important; }
.cal-event.type-sav   { background: linear-gradient(135deg, #fce4ec, #f8bbd0) !important; border-left: 3px solid #c62828 !important; }

/* Liste d'agenda */
.agenda-list-item {
  background: linear-gradient(135deg, #fff 0%, #fafbff 100%) !important;
  border-radius: 12px !important;
  border-left: 4px solid transparent;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.agenda-list-item:hover {
  transform: translateX(6px);
  border-left-color: #f59e0b;
  box-shadow: 0 8px 24px rgba(26,35,126,0.12) !important;
}
.agenda-list-item .date-block {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  color: white !important;
  box-shadow: 0 3px 10px rgba(26,35,126,0.3);
}
.agenda-list-item .date-block .day {
  color: white !important;
  font-family: 'Orbitron', sans-serif;
}
.agenda-list-item .date-block .month {
  color: rgba(255,255,255,0.8) !important;
  font-family: 'Orbitron', sans-serif;
}

/* ====== Sous-onglets Matériel ====== */
.materiel-subtabs {
  display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap;
  background: white; border-radius: 14px; padding: 8px;
  box-shadow: 0 4px 16px rgba(26,35,126,0.08);
}
.mat-subtab {
  flex: 1; min-width: 180px;
  background: transparent; border: none; cursor: pointer;
  padding: 12px 20px; border-radius: 10px;
  font-size: 14px; font-weight: 700; color: #5a6688;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; overflow: hidden;
}
.mat-subtab:hover {
  background: rgba(245,158,11,0.08);
  color: #1a237e;
  transform: translateY(-2px);
}
.mat-subtab.active {
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: white;
  box-shadow: 0 6px 16px rgba(26,35,126,0.35);
  transform: translateY(-2px);
}
.mat-subtab.active::after {
  content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 3s ease-in-out infinite;
}
.mat-panel { animation: sectionEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1); }

/* ====== Carte de France animée ====== */
.france-map-card {
  padding: 20px !important;
  margin-bottom: 16px;
  background: linear-gradient(135deg, #ffffff 0%, #f8f9ff 100%);
  overflow: hidden;
}
.france-legend {
  display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 14px;
  font-size: 12px; font-weight: 600;
}
.france-legend .leg-item {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(26,35,126,0.05);
  padding: 5px 12px; border-radius: 20px;
}
.france-legend .leg-dot {
  width: 10px; height: 10px; border-radius: 50%;
  box-shadow: 0 0 8px currentColor;
}

.france-stage {
  display: grid; grid-template-columns: 1fr 220px; gap: 20px;
  align-items: center;
}
.france-svg {
  width: 100%; max-width: 500px; height: auto;
  filter: drop-shadow(0 10px 20px rgba(26,35,126,0.15));
}
.france-path {
  filter: drop-shadow(0 4px 8px rgba(26,35,126,0.1));
  transition: all 0.3s;
}
.france-svg .pulse {
  transform-origin: center;
  transform-box: fill-box;
  animation: cityPulse 2.2s ease-in-out infinite;
}
@keyframes cityPulse {
  0%   { transform: scale(1);   opacity: 0.4; }
  100% { transform: scale(2.4); opacity: 0; }
}
.france-svg .city { cursor: pointer; transition: all 0.2s; }
.france-svg .city:hover { transform: scale(1.15); transform-origin: center; transform-box: fill-box; }
.france-svg .flow-lines path {
  animation: flowDash 1.5s linear infinite;
}
@keyframes flowDash {
  to { stroke-dashoffset: -16; }
}
.france-svg .flow-dot {
  filter: drop-shadow(0 0 6px currentColor);
}

.france-counters {
  display: flex; flex-direction: column; gap: 10px;
}
.fc-item {
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px;
  align-items: center;
  background: linear-gradient(135deg, rgba(26,35,126,0.03), rgba(245,158,11,0.03));
  padding: 10px 14px; border-radius: 12px;
  border-left: 3px solid #1a237e;
  transition: all 0.3s;
}
.fc-item:hover {
  transform: translateX(4px);
  border-left-color: #f59e0b;
  box-shadow: 0 6px 16px rgba(26,35,126,0.1);
}
.fc-icon { font-size: 22px; }
.fc-label { font-size: 11px; color: #5a6688; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.fc-val {
  font-family: 'Orbitron', sans-serif;
  font-size: 20px; font-weight: 800;
  background: linear-gradient(135deg, #1a237e, #f59e0b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

@media (max-width: 900px) {
  .france-stage { grid-template-columns: 1fr; }
  .france-counters { flex-direction: row; flex-wrap: wrap; }
  .fc-item { flex: 1 1 calc(50% - 10px); }
}

/* ====== Carte Leaflet France ====== */
.france-leaflet {
  width: 100%; height: 440px;
  border-radius: 16px; overflow: hidden;
  position: relative;
  background: #eef3fb;
  box-shadow: 0 12px 40px rgba(26,35,126,0.18), 0 0 0 1px rgba(26,35,126,0.08);
}
.france-leaflet::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: 16px;
  box-shadow: inset 0 0 70px rgba(255,255,255,0.35);
}
.france-leaflet .leaflet-tile-container img {
  filter: saturate(1.2) contrast(1.05) brightness(1.02);
}
.france-leaflet .leaflet-control-container { display: none; }
.france-leaflet .leaflet-pane { z-index: 1; }
.lp-icon { background: transparent !important; border: none !important; }
.lp-pin { position: relative; width: 40px; height: 40px; }
.lp-pulse {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.35;
  animation: lpPulse 2.4s ease-out infinite;
}
.lp-pin::before {
  content: ""; position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--c);
  opacity: 0.2; filter: blur(8px);
  animation: lpPulse 2.4s ease-out infinite;
  animation-delay: -0.6s;
}
@keyframes lpPulse {
  0%   { transform: scale(0.4); opacity: 0.65; }
  100% { transform: scale(2.6); opacity: 0; }
}
.lp-dot {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.5), var(--c) 60%);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px;
  border: 2.5px solid white;
  box-shadow:
    0 4px 12px rgba(0,0,0,0.35),
    0 0 18px var(--c),
    inset 0 -2px 4px rgba(0,0,0,0.15),
    inset 0 2px 4px rgba(255,255,255,0.4);
  z-index: 2;
  transition: transform 0.25s ease;
}
.lp-pin:hover .lp-dot { transform: translate(-50%,-50%) scale(1.2); }
.lp-label {
  position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 10px; font-weight: 700; letter-spacing: 0.3px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(4px);
  color: #1a237e;
  padding: 3px 10px; border-radius: 12px;
  margin-top: 6px;
  border: 1px solid rgba(26,35,126,0.08);
  box-shadow: 0 4px 12px rgba(26,35,126,0.15);
}
.fr-flow-line {
  animation: flowDashLeaflet 1.5s linear infinite;
}
@keyframes flowDashLeaflet {
  to { stroke-dashoffset: -20; }
}

.france-stage { grid-template-columns: 1fr 220px; }
@media (max-width: 900px) {
  .france-leaflet { height: 320px; }
}

/* ====== IA Génie Climatique ====== */
#sec-ia .content {
  background: linear-gradient(135deg, #0a0e1c 0%, #141a2e 100%);
  color: #e0e4ff;
  border-radius: 16px; padding: 24px;
  min-height: 80vh;
  position: relative; overflow: hidden;
}
#sec-ia .content::before {
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(41,121,255,0.15), transparent 60%),
    radial-gradient(ellipse at 80% 100%, rgba(255,109,0,0.12), transparent 60%);
  pointer-events:none;
}
.ia-header {
  display: flex; gap: 18px; align-items: center;
  padding-bottom: 18px; border-bottom: 1px solid rgba(255,255,255,0.08);
  position: relative; z-index: 2;
}
.ia-avatar {
  position: relative; width: 68px; height: 68px;
  display: flex; align-items: center; justify-content: center;
}
.ia-avatar-inner {
  position: relative; z-index: 2;
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, #2979ff, #ff6d00);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
  box-shadow: 0 6px 20px rgba(41,121,255,0.5), inset 0 -3px 6px rgba(0,0,0,0.2), inset 0 3px 6px rgba(255,255,255,0.3);
  border: 2px solid rgba(255,255,255,0.15);
}
.ia-avatar-pulse {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(41,121,255,0.5), transparent 65%);
  animation: iaAvatarPulse 2.5s ease-out infinite;
}
@keyframes iaAvatarPulse {
  0%   { transform: scale(0.8); opacity: 0.7; }
  100% { transform: scale(1.7); opacity: 0; }
}
.ia-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 24px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #64b5f6, #ffab00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0;
}
.ia-status {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; color: #8ce0a4; font-weight: 600;
  margin-top: 4px;
}
.ia-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 8px #00e676;
  animation: iaDot 1.4s ease-in-out infinite;
}
@keyframes iaDot { 50%{opacity:0.4} }
.ia-subtitle { font-size: 11px; color: #8a94b8; margin-top: 2px; letter-spacing: 0.5px; }

.ia-quick-actions {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0; position: relative; z-index: 2;
}
.ia-qa {
  background: rgba(255,255,255,0.06);
  color: #e0e4ff; border: 1px solid rgba(255,171,0,0.25);
  padding: 8px 14px; border-radius: 20px;
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: all 0.25s;
  backdrop-filter: blur(6px);
}
.ia-qa:hover {
  background: linear-gradient(135deg, rgba(41,121,255,0.25), rgba(255,109,0,0.25));
  border-color: #ffab00;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(255,171,0,0.25);
}

.ia-chat {
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px;
  max-height: 55vh; overflow-y: auto;
  position: relative; z-index: 2;
  backdrop-filter: blur(6px);
}
.ia-chat::-webkit-scrollbar { width: 8px; }
.ia-chat::-webkit-scrollbar-thumb { background: rgba(255,171,0,0.3); border-radius: 4px; }

.ia-msg {
  display: flex; gap: 10px; margin-bottom: 14px;
  animation: iaMsgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iaMsgIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:none} }
.ia-msg-bot { align-items: flex-start; }
.ia-msg-user { flex-direction: row-reverse; }
.ia-msg-avatar {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #2979ff, #ff6d00);
  font-size: 18px;
  box-shadow: 0 3px 10px rgba(41,121,255,0.4);
}
.ia-msg-user .ia-msg-avatar { background: linear-gradient(135deg, #7e57c2, #3949ab); }
.ia-msg-bubble {
  max-width: 75%;
  padding: 12px 16px; border-radius: 14px;
  font-size: 13.5px; line-height: 1.55;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.06);
  color: #e8ecff;
}
.ia-msg-bot .ia-msg-bubble {
  border-top-left-radius: 4px;
  background: linear-gradient(135deg, rgba(41,121,255,0.15), rgba(255,255,255,0.05));
  border-color: rgba(41,121,255,0.25);
}
.ia-msg-user .ia-msg-bubble {
  border-top-right-radius: 4px;
  background: linear-gradient(135deg, rgba(255,109,0,0.25), rgba(170,0,255,0.15));
  border-color: rgba(255,109,0,0.35);
}
.ia-msg-bubble strong { color: #ffab00; }
.ia-msg-bubble a { color: #64b5f6; }

.ia-typing .ia-msg-bubble { display: flex; gap: 4px; padding: 14px 18px; }
.ia-typing .dot {
  width: 7px; height: 7px; border-radius: 50%; background: #ffab00;
  animation: iaDotBounce 1.2s ease-in-out infinite;
}
.ia-typing .dot:nth-child(2) { animation-delay: 0.15s; }
.ia-typing .dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes iaDotBounce {
  0%,60%,100% { transform: translateY(0); opacity: 0.5; }
  30%         { transform: translateY(-6px); opacity: 1; }
}

.ia-input-zone {
  display: flex; gap: 8px; margin-top: 14px;
  position: relative; z-index: 2;
}
.ia-input {
  flex: 1; padding: 14px 18px;
  background: rgba(0,0,0,0.4);
  border: 1px solid rgba(255,171,0,0.3);
  border-radius: 12px;
  color: white; font-size: 14px;
  outline: none; transition: all 0.25s;
}
.ia-input:focus {
  border-color: #ffab00;
  box-shadow: 0 0 0 3px rgba(255,171,0,0.15), 0 0 20px rgba(255,171,0,0.25);
  background: rgba(0,0,0,0.55);
}
.ia-input::placeholder { color: #5a6688; }
.ia-send {
  width: 52px; height: 52px; border-radius: 12px; border: none; cursor: pointer;
  background: linear-gradient(135deg, #2979ff, #ff6d00);
  color: white;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.25s;
  box-shadow: 0 6px 18px rgba(41,121,255,0.45);
}
.ia-send:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px rgba(255,109,0,0.5);
}

.ia-header { justify-content: space-between; }
.ia-settings-btn {
  background: rgba(255,171,0,0.15);
  color: #ffab00;
  border: 1px solid rgba(255,171,0,0.4);
  padding: 10px 16px; border-radius: 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.25s;
}
.ia-settings-btn:hover {
  background: #ffab00; color: #0a0e1c;
  box-shadow: 0 6px 18px rgba(255,171,0,0.5);
  transform: translateY(-2px);
}

/* ===== Restrictions modal ===== */
.restr-item {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 8px;
  background: #f5f7ff; cursor: pointer;
  transition: all 0.2s; font-size: 13px;
  border: 1px solid transparent;
}
.restr-item:hover {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-color: #ff6d00;
}
.restr-item input { cursor: pointer; accent-color: #ff6d00; }
.restr-item input:checked + span { font-weight: 700; color: #c62828; text-decoration: line-through; }

/* ===== Supervision temps réel ===== */
.connected-user-card {
  position: relative; overflow: hidden;
}
.connected-user-card::before {
  content: "●"; position: absolute; top: 8px; right: 38px;
  color: #00e676; font-size: 14px;
  animation: supLivePulse 1.4s ease-in-out infinite;
}
@keyframes supLivePulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: 0.4; transform: scale(1.4); }
}
.online-dot.on {
  background: #00e676;
  box-shadow: 0 0 0 3px rgba(0,230,118,0.2), 0 0 10px rgba(0,230,118,0.6);
  animation: supLivePulse 1.6s ease-in-out infinite;
}
#connectedUsersPanel {
  position: relative;
}
#connectedUsersPanel::after {
  content: "🟢 LIVE";
  position: absolute; top: -30px; right: 0;
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  color: #00e676;
  animation: supLivePulse 2s ease-in-out infinite;
}
.btn-restrict {
  transition: all 0.25s;
}
.btn-restrict:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,109,0,0.4);
}
.btn-force-disconnect {
  background: linear-gradient(135deg, #c62828, #ef5350);
  color: white; border: none;
  padding: 6px 12px; border-radius: 6px;
  font-size: 11px; font-weight: 700; cursor: pointer;
  transition: all 0.25s;
}
.btn-force-disconnect:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(198,40,40,0.5);
}

/* ====== SUPERVISION — Dark futuriste ====== */
#sec-supervision {
  position: relative;
  background: linear-gradient(135deg, #0a0e1c 0%, #141a2e 55%, #0a0e1c 100%);
  min-height: 100vh;
  overflow: hidden;
}
#supervisionParticles {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 1;
}
#sec-supervision .sup-grid-bg {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,171,0,0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,171,0,0.05) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  animation: gridDrift 40s linear infinite;
  pointer-events: none;
}
.sup-content {
  position: relative; z-index: 5;
  color: #e0e4ff;
  background: transparent !important;
  padding: 24px !important;
}

.sup-header-bar {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;
  padding: 20px 24px; margin-bottom: 20px;
  background: linear-gradient(135deg, rgba(10,14,28,0.7), rgba(20,26,46,0.7));
  border: 1px solid rgba(255,171,0,0.2);
  border-radius: 16px;
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 40px rgba(255,171,0,0.08);
  position: relative; overflow: hidden;
}
.sup-header-bar::before {
  content: ""; position: absolute; inset: -1px; border-radius: 16px; padding: 1px;
  background: linear-gradient(135deg, #ffab00, transparent 35%, transparent 65%, #2979ff);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.sup-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 26px; font-weight: 900; letter-spacing: 3px;
  background: linear-gradient(135deg, #ffab00, #ff6d00, #ffab00);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin: 0;
  animation: supTitleShine 4s ease-in-out infinite;
  text-shadow: 0 0 40px rgba(255,171,0,0.4);
}
@keyframes supTitleShine {
  0%,100% { background-position: 0% 0; }
  50%     { background-position: 100% 0; }
}
.sup-subtitle {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #8a94b8; margin-top: 4px;
  font-family: 'Orbitron', sans-serif; font-weight: 500;
}
.sup-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: linear-gradient(135deg, rgba(0,230,118,0.15), rgba(0,230,118,0.05));
  border: 1px solid rgba(0,230,118,0.4);
  border-radius: 24px;
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 2px;
  color: #00e676;
  box-shadow: 0 0 20px rgba(0,230,118,0.3), inset 0 0 10px rgba(0,230,118,0.05);
}
.sup-live-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #00e676;
  box-shadow: 0 0 14px #00e676, 0 0 0 4px rgba(0,230,118,0.2);
  animation: supLivePulse 1.4s ease-in-out infinite;
}

/* Adapter tous les contenus existants au dark */
#sec-supervision h2, #sec-supervision h3, #sec-supervision h4 { color: #ffab00 !important; }
#sec-supervision p, #sec-supervision label { color: #b8c0e0; }
#sec-supervision .content > *:not(.sup-header-bar) {
  background: rgba(10,14,28,0.5) !important;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 16px !important;
  margin-bottom: 14px !important;
  color: #e0e4ff;
  box-shadow: 0 6px 24px rgba(0,0,0,0.3);
}
#sec-supervision table { color: #e0e4ff !important; background: transparent !important; }
#sec-supervision table th { background: linear-gradient(135deg, #2979ff, #1a237e) !important; color: white !important; border-bottom: 2px solid rgba(255,171,0,0.3) !important; }
#sec-supervision table td { color: #c8cff0 !important; border-bottom: 1px solid rgba(255,255,255,0.05) !important; }
#sec-supervision table tr:hover td { background: rgba(255,171,0,0.05) !important; }
#sec-supervision input, #sec-supervision select {
  background: rgba(0,0,0,0.4) !important;
  border: 1px solid rgba(255,171,0,0.25) !important;
  color: #e0e4ff !important;
  padding: 8px 12px; border-radius: 8px;
}
#sec-supervision input:focus, #sec-supervision select:focus {
  border-color: #ffab00 !important;
  box-shadow: 0 0 0 3px rgba(255,171,0,0.15) !important;
  outline: none;
}

/* Cartes user connecté */
#sec-supervision .connected-user-card {
  background: linear-gradient(135deg, rgba(41,121,255,0.15), rgba(10,14,28,0.6)) !important;
  border: 1px solid rgba(41,121,255,0.3) !important;
  backdrop-filter: blur(8px);
  transition: all 0.3s;
  border-radius: 12px !important;
}
#sec-supervision .connected-user-card:hover {
  transform: translateY(-3px);
  border-color: #ffab00 !important;
  box-shadow: 0 10px 30px rgba(255,171,0,0.25);
}
#sec-supervision .cu-name { color: #fff !important; }
#sec-supervision .cu-duration { color: #8ce0a4 !important; }

/* Admin user rows */
#sec-supervision .admin-user-row {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 10px !important;
  padding: 12px 16px !important;
  margin-bottom: 8px !important;
  transition: all 0.2s;
}
#sec-supervision .admin-user-row:hover {
  background: rgba(255,171,0,0.08) !important;
  border-color: rgba(255,171,0,0.3) !important;
  transform: translateX(3px);
}

/* Session/manip rows */
#sec-supervision .session-row, #sec-supervision .manip-row {
  background: rgba(255,255,255,0.02) !important;
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
  color: #c8cff0;
}
#sec-supervision .session-row:hover, #sec-supervision .manip-row:hover {
  background: rgba(255,171,0,0.06) !important;
}

/* KPI grid */
#sec-supervision .supervision-kpi-grid {
  background: transparent !important; border: none !important; padding: 0 !important;
}
#sec-supervision .supervision-kpi-card {
  background: linear-gradient(135deg, rgba(41,121,255,0.1), rgba(255,109,0,0.08)) !important;
  border: 1px solid rgba(255,171,0,0.2) !important;
  color: #fff !important;
  transition: all 0.3s;
}
#sec-supervision .supervision-kpi-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(255,171,0,0.25);
  border-color: #ffab00 !important;
}

/* Boutons */
#sec-supervision .btn-primary {
  background: linear-gradient(135deg, #ffab00, #ff6d00) !important;
  color: #0a0e1c !important;
  font-weight: 800 !important;
  box-shadow: 0 4px 14px rgba(255,109,0,0.4);
}
#sec-supervision .btn-secondary {
  background: rgba(255,255,255,0.08) !important;
  color: #e0e4ff !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
#sec-supervision .btn-danger {
  background: linear-gradient(135deg, #c62828, #ef5350) !important;
}

/* Hide the old H2 title since we have the new header */
#sec-supervision .sup-content > h2:first-of-type,
#sec-supervision .sup-content > p:nth-child(2) { display: none; }

/* LIVE badge "🟢 LIVE" existant : adapter couleur sur fond sombre */
#sec-supervision #connectedUsersPanel::after {
  color: #00e676;
  text-shadow: 0 0 10px #00e676;
}

/* ====== Supervision — ajustements lisibilité ====== */
/* Masquer canvas particules */
#supervisionParticles { display: none !important; }

/* LIVE badge plus discret */
.sup-live-badge {
  padding: 6px 12px !important;
  font-size: 9px !important;
  letter-spacing: 1.5px !important;
}
.sup-live-dot {
  width: 7px !important; height: 7px !important;
  box-shadow: 0 0 8px #00e676, 0 0 0 3px rgba(0,230,118,0.18) !important;
}

/* Noms utilisateur plus lisibles partout */
#sec-supervision .cu-name,
#sec-supervision .admin-user-row .admin-user-info > div > div:first-child,
#sec-supervision .sr-name,
#sec-supervision .mr-user,
#sec-supervision table td:first-child {
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-shadow: 0 0 8px rgba(255,171,0,0.2);
}

/* Panneaux bas (sessions/manipulations) plus clairs */
#sec-supervision .content > *:not(.sup-header-bar) {
  background: rgba(255,255,255,0.96) !important;
  color: #1a237e !important;
  border: 1px solid rgba(26,35,126,0.08) !important;
  backdrop-filter: none !important;
}
#sec-supervision h3, #sec-supervision h4 { color: #1a237e !important; }
#sec-supervision p, #sec-supervision label { color: #555 !important; }
#sec-supervision table td:first-child {
  color: #1a237e !important; text-shadow: none !important;
}
#sec-supervision table td { color: #333 !important; }
#sec-supervision table tr:hover td { background: #fff3e0 !important; }
#sec-supervision input, #sec-supervision select {
  background: #fff !important;
  border: 1px solid #ddd !important;
  color: #333 !important;
}

/* Connected user card — garder dark car c'est le live */
#sec-supervision .connected-user-card {
  background: linear-gradient(135deg, #1a237e, #283593) !important;
  color: white !important;
  border: 1px solid rgba(255,171,0,0.4) !important;
}
#sec-supervision .connected-user-card .cu-name {
  color: #fff !important;
  text-shadow: 0 0 12px rgba(255,171,0,0.5);
}
#sec-supervision .connected-user-card .cu-duration { color: #8ce0a4 !important; }
#sec-supervision .connected-user-card > div[style*="color:#666"] {
  color: rgba(255,255,255,0.75) !important;
}

/* Session/manip rows clairs */
#sec-supervision .session-row, #sec-supervision .manip-row {
  background: #fafbff !important;
  border-bottom: 1px solid #eef !important;
  color: #333 !important;
}
#sec-supervision .session-row:hover, #sec-supervision .manip-row:hover {
  background: #fff3e0 !important;
}
#sec-supervision .sr-time, #sec-supervision .mr-time { color: #888 !important; }
#sec-supervision .sr-duration { color: #1a237e !important; font-weight: 600; }
#sec-supervision .sr-active { color: #00c853 !important; }

/* Admin user rows clairs */
#sec-supervision .admin-user-row {
  background: #fff !important;
  border: 1px solid #eef !important;
}
#sec-supervision .admin-user-row .admin-user-info > div > div:first-child {
  color: #1a237e !important; text-shadow: none !important;
}

/* ============================================
   DESIGN SYSTEM PREMIUM — Sections restantes
============================================ */
#sec-pipeline, #sec-contacts, #sec-bureaux, #sec-devis,
#sec-precarite, #sec-historique, #sec-calculette, #sec-geoportail {
  background: linear-gradient(135deg, #f0f4ff 0%, #fef8f3 100%);
  min-height: calc(100vh - 60px);
  padding-bottom: 30px;
  position: relative;
}
#sec-pipeline::before, #sec-contacts::before, #sec-bureaux::before, #sec-devis::before,
#sec-precarite::before, #sec-historique::before, #sec-calculette::before, #sec-geoportail::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(ellipse at 20% 0%, rgba(41,121,255,0.06), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(255,109,0,0.04), transparent 50%);
  z-index: 0;
}
#sec-pipeline .content, #sec-contacts .content, #sec-bureaux .content,
#sec-devis .content, #sec-precarite .content, #sec-historique .content,
#sec-calculette .content, #sec-geoportail .content {
  position: relative; z-index: 1;
}

#sec-pipeline h2:first-child, #sec-contacts h2:first-child, #sec-bureaux h2:first-child,
#sec-devis h2:first-child, #sec-precarite h2:first-child, #sec-historique h2:first-child,
#sec-calculette h2:first-child, #sec-geoportail h2:first-child {
  font-family: 'Orbitron', sans-serif;
  font-size: 26px; font-weight: 900; letter-spacing: 2px;
  background: linear-gradient(135deg, #1a237e, #ff6d00);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  margin: 16px 0 8px 0;
}

.chart-card, .kpi-card {
  background: linear-gradient(135deg, #ffffff 0%, #fafbff 100%) !important;
  border-radius: 14px !important;
  box-shadow: 0 6px 24px rgba(26,35,126,0.08), 0 0 0 1px rgba(26,35,126,0.04) !important;
  border: none !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; overflow: hidden;
}
.chart-card::before, .kpi-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 3px;
  background: linear-gradient(90deg, #1a237e, #ff6d00);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.chart-card:hover, .kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(26,35,126,0.14), 0 0 0 1px rgba(255,171,0,0.3) !important;
}
.chart-card:hover::before, .kpi-card:hover::before { transform: scaleX(1); }

.chart-card h3, .chart-card h4 {
  color: #1a237e; font-weight: 700; font-size: 14px; letter-spacing: 0.5px;
  position: relative; padding-left: 14px;
}
.chart-card h3::before, .chart-card h4::before {
  content: ""; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 16px;
  background: linear-gradient(180deg, #ff6d00, #ffab00);
  border-radius: 2px;
}

/* CONTACTS — tableau premium */
#sec-contacts table {
  background: white; border-radius: 12px; overflow: hidden;
  box-shadow: 0 4px 16px rgba(26,35,126,0.08);
}
#sec-contacts table th {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  color: white !important;
  padding: 14px 12px !important;
  font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase;
  font-family: 'Orbitron', sans-serif; font-weight: 600;
}
#sec-contacts table td {
  padding: 12px !important;
  border-bottom: 1px solid #f0f2ff !important;
  transition: all 0.2s;
}
#sec-contacts table tr:hover td {
  background: linear-gradient(90deg, rgba(255,171,0,0.05), rgba(255,171,0,0.02));
}
.status-badge {
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}

/* Inputs universels premium */
#sec-contacts input, #sec-contacts select,
#sec-devis input, #sec-devis select, #sec-devis textarea,
#sec-precarite input, #sec-precarite select,
#sec-geoportail input, #sec-geoportail select,
#sec-bureaux input, #sec-bureaux select {
  border: 1px solid #e0e4ff !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  transition: all 0.2s !important;
  background: white !important;
}
#sec-contacts input:focus, #sec-contacts select:focus,
#sec-devis input:focus, #sec-devis select:focus, #sec-devis textarea:focus,
#sec-precarite input:focus, #sec-precarite select:focus,
#sec-geoportail input:focus, #sec-geoportail select:focus,
#sec-bureaux input:focus, #sec-bureaux select:focus {
  border-color: #ff6d00 !important;
  box-shadow: 0 0 0 3px rgba(255,109,0,0.1) !important;
  outline: none !important;
}

/* BUREAUX — cartes */
#sec-bureaux .bureau-card {
  background: linear-gradient(135deg, #ffffff, #fafbff) !important;
  border-radius: 14px !important;
  padding: 20px !important;
  box-shadow: 0 6px 20px rgba(26,35,126,0.08);
  border: 1px solid rgba(26,35,126,0.05);
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  position: relative; overflow: hidden;
}
#sec-bureaux .bureau-card::before {
  content: ""; position: absolute; top: 0; left: 0; width: 6px; height: 100%;
  background: linear-gradient(180deg, #1a237e, #ff6d00);
  transition: width 0.3s;
}
#sec-bureaux .bureau-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(26,35,126,0.15);
}
#sec-bureaux .bureau-card:hover::before { width: 10px; }

/* DEVIS */
#sec-devis .devis-history-item {
  background: linear-gradient(135deg, #ffffff, #fafbff) !important;
  border-radius: 12px !important;
  border-left: 4px solid #1a237e !important;
  transition: all 0.3s;
}
#sec-devis .devis-history-item:hover {
  transform: translateX(6px);
  border-left-color: #ff6d00 !important;
  box-shadow: 0 8px 24px rgba(26,35,126,0.12);
}

/* PRECARITE — résultat premium */
#sec-precarite .result-card,
#sec-precarite div[style*="background:linear-gradient"] {
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(26,35,126,0.3) !important;
  position: relative; overflow: hidden;
}

/* HISTORIQUE — items */
#sec-historique .historique-item,
#sec-historique div[id*="historique"] > div {
  background: white !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  margin-bottom: 8px !important;
  box-shadow: 0 3px 12px rgba(26,35,126,0.06);
  border-left: 3px solid #1a237e !important;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
#sec-historique .historique-item:hover,
#sec-historique div[id*="historique"] > div:hover {
  transform: translateX(4px);
  border-left-color: #ff6d00 !important;
  box-shadow: 0 6px 18px rgba(26,35,126,0.1);
}

/* CALCULETTE CEE — sous-onglets */
#sec-calculette .calc-subtab {
  transition: all 0.25s !important;
  position: relative; overflow: hidden;
}
#sec-calculette .calc-subtab:hover {
  background: linear-gradient(135deg, #ff6d00, #ffab00) !important;
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(255,109,0,0.4);
}
#sec-calculette .calc-subtab.active {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  color: white !important;
  box-shadow: 0 4px 14px rgba(26,35,126,0.4);
}

/* SIMULATEUR GEO */
#sec-geoportail .scenario-card,
#sec-geoportail div[class*="scenario"] {
  background: linear-gradient(135deg, #ffffff, #f8f9ff) !important;
  border-radius: 12px !important;
  border-left: 4px solid #1a237e !important;
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
#sec-geoportail .scenario-card:hover {
  transform: translateX(6px) scale(1.01);
  border-left-color: #ff6d00 !important;
  box-shadow: 0 10px 28px rgba(26,35,126,0.15);
}

/* PIPELINE — colonnes */
#sec-pipeline .pipeline-col {
  background: linear-gradient(135deg, #ffffff, #fafbff) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(26,35,126,0.06) !important;
  transition: all 0.25s;
}
#sec-pipeline .pipeline-col:hover {
  box-shadow: 0 8px 24px rgba(26,35,126,0.1);
}
#sec-pipeline .pipeline-col-header {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  color: white !important;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 1px;
  border-radius: 14px 14px 0 0;
}

/* Boutons primary premium pour ces sections */
#sec-pipeline .btn-primary, #sec-contacts .btn-primary, #sec-bureaux .btn-primary,
#sec-devis .btn-primary, #sec-precarite .btn-primary, #sec-calculette .btn-primary,
#sec-geoportail .btn-primary, #sec-historique .btn-primary {
  background: linear-gradient(135deg, #1a237e, #3949ab) !important;
  color: white !important;
  border: none !important;
  padding: 10px 20px !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1) !important;
  box-shadow: 0 4px 14px rgba(26,35,126,0.3) !important;
}
#sec-pipeline .btn-primary:hover, #sec-contacts .btn-primary:hover, #sec-bureaux .btn-primary:hover,
#sec-devis .btn-primary:hover, #sec-precarite .btn-primary:hover, #sec-calculette .btn-primary:hover,
#sec-geoportail .btn-primary:hover, #sec-historique .btn-primary:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, #ff6d00, #ffab00) !important;
  box-shadow: 0 8px 22px rgba(255,109,0,0.45) !important;
}

/* IA — page plein dark pour éviter le vide blanc en bas */
#sec-ia {
  background: linear-gradient(135deg, #0a0e1c 0%, #141a2e 100%);
  min-height: calc(100vh - 60px);
  padding-bottom: 30px;
}
#sec-ia .content {
  min-height: auto !important;
  margin-bottom: 0 !important;
}

/* Force lisibilit\u00e9 sessions/manipulations */
#sec-supervision #sessionHistoryPanel *,
#sec-supervision #manipHistoryPanel *,
#sec-supervision #adminUserStats * {
  color: #1a237e !important;
}
#sec-supervision #sessionHistoryPanel .sr-time,
#sec-supervision #manipHistoryPanel .mr-time {
  color: #666 !important;
}
#sec-supervision #sessionHistoryPanel .sr-duration { color: #1a237e !important; font-weight: 700 !important; }
#sec-supervision #sessionHistoryPanel .sr-active { color: #00c853 !important; }
#sec-supervision #manipHistoryPanel .mr-cat { color: white !important; }
#sec-supervision #manipHistoryPanel .mr-user,
#sec-supervision #sessionHistoryPanel .sr-name { color: #1a237e !important; font-weight: 700 !important; }
#sec-supervision #manipHistoryPanel .mr-row > div:last-child { color: #444 !important; }
#sec-supervision .session-row, #sec-supervision .manip-row {
  background: white !important;
  padding: 10px 14px !important;
  margin-bottom: 6px !important;
  border-radius: 8px !important;
  border: 1px solid #eef !important;
  border-bottom: 1px solid #eef !important;
}

/* Supervision : retirer aussi le grid de fond */
#sec-supervision .sup-grid-bg { display: none !important; }
#sec-supervision { background: linear-gradient(135deg, #f0f4ff 0%, #fef8f3 100%) !important; }
.sup-header-bar {
  background: linear-gradient(135deg, #ffffff, #fafbff) !important;
  border: 1px solid rgba(26,35,126,0.1) !important;
  box-shadow: 0 6px 24px rgba(26,35,126,0.08) !important;
}
.sup-title {
  text-shadow: none !important;
}
.sup-subtitle { color: #666 !important; }

/* ===== Modal permissions ===== */
.preset-zone {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  padding: 12px 14px; border-radius: 10px;
  margin-bottom: 12px;
}
.btn-preset {
  background: white; border: 1px solid #ff6d00;
  color: #ff6d00; padding: 8px 14px; border-radius: 8px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  transition: all 0.2s;
}
.btn-preset:hover {
  background: linear-gradient(135deg, #ff6d00, #ffab00);
  color: white; transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255,109,0,0.4);
}
.perm-list {
  display: flex; flex-direction: column; gap: 6px;
  max-height: 50vh; overflow-y: auto;
}
.perm-row {
  display: grid; grid-template-columns: 160px 1fr;
  gap: 12px; align-items: center;
  background: #f8f9ff; padding: 10px 14px; border-radius: 8px;
  transition: all 0.2s;
}
.perm-row:hover { background: #eef0ff; }
.perm-label { font-weight: 700; color: #1a237e; font-size: 13px; }
.perm-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 12px;
}
.pc {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; color: #555;
}
.pc input[type=radio] { accent-color: #ff6d00; cursor: pointer; }
.pc-quota {
  padding: 4px 8px; border: 1px solid #ddd;
  border-radius: 6px; font-size: 12px;
}

/* ===== Formulaire contact enrichi ===== */
.form-section {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: #1a237e; text-transform: uppercase;
  margin: 18px 0 10px 0; padding-bottom: 6px;
  border-bottom: 2px solid #ff6d00;
}
.form-section:first-child { margin-top: 0; }

.travaux-multi {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;
}
.travaux-chk {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px; background: #f5f7ff;
  border-radius: 8px; cursor: pointer;
  font-size: 12px; color: #333;
  transition: all 0.2s; border: 1px solid transparent;
}
.travaux-chk:hover {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border-color: #ff6d00;
}
.travaux-chk input { accent-color: #ff6d00; cursor: pointer; }
.travaux-chk input:checked ~ span {
  font-weight: 700; color: #1a237e;
}
.travaux-chk:has(input:checked) {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-color: #1a237e;
  box-shadow: 0 3px 8px rgba(26,35,126,0.15);
}

@media (max-width: 768px) {
  .travaux-multi { grid-template-columns: 1fr 1fr; }
}

/* ===== Liens rapides Contacts ===== */
.contact-quick-links {
  display: flex; gap: 12px; flex-wrap: wrap;
  background: linear-gradient(135deg, #ffffff, #fafbff);
  padding: 14px 18px; border-radius: 14px;
  box-shadow: 0 4px 16px rgba(26,35,126,0.08);
  margin-bottom: 14px; align-items: center;
}
.cql-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  color: #1a237e; text-transform: uppercase;
  margin-right: 8px;
}
.cql-btn {
  display: flex; align-items: center; gap: 10px;
  background: white;
  border: 1px solid rgba(26,35,126,0.1);
  border-radius: 12px; padding: 10px 16px;
  cursor: pointer; font-family: inherit;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  text-align: left;
}
.cql-btn:hover {
  transform: translateY(-3px);
  border-color: #ff6d00;
  box-shadow: 0 10px 24px rgba(255,109,0,0.2);
  background: linear-gradient(135deg, #fff, #fff9e6);
}
.cql-icon {
  font-size: 26px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
.cql-name {
  font-size: 13px; font-weight: 700; color: #1a237e;
}
.cql-desc {
  font-size: 10px; color: #888; margin-top: 1px;
}

/* ===== Fiche détail contact enrichie ===== */
.detail-section {
  background: linear-gradient(135deg, #ffffff, #fafbff);
  border-radius: 12px; padding: 16px 18px;
  margin-bottom: 12px;
  border-left: 4px solid #1a237e;
  box-shadow: 0 3px 12px rgba(26,35,126,0.06);
  transition: all 0.25s;
}
.detail-section:hover {
  border-left-color: #ff6d00;
  box-shadow: 0 6px 18px rgba(26,35,126,0.1);
}
.detail-section h4 {
  font-family: 'Orbitron', sans-serif;
  font-size: 12px; font-weight: 700; letter-spacing: 1.5px;
  color: #1a237e; text-transform: uppercase;
  margin: 0 0 12px 0;
  padding-bottom: 6px; border-bottom: 1px solid #eef;
}
.detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px;
}
.detail-field { padding: 4px 0; }
.detail-field-full { grid-column: 1 / -1; }
.detail-field > strong {
  display: block; font-size: 10px; color: #888;
  text-transform: uppercase; letter-spacing: 1px;
  font-weight: 700; margin-bottom: 3px;
}
.detail-field > div {
  font-size: 13px; color: #1a237e; font-weight: 500;
}
.detail-link {
  display: inline-block; color: white !important;
  padding: 4px 12px; border-radius: 6px;
  font-size: 11px; text-decoration: none;
  font-weight: 600;
  transition: all 0.2s;
}
.detail-link:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.2); }

.detail-travaux {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.trav-chip {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1a237e;
  padding: 6px 12px; border-radius: 20px;
  font-size: 12px; font-weight: 600;
  border: 1px solid #90caf9;
}

.detail-notes {
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  padding: 10px 14px; border-radius: 8px;
  font-size: 13px; color: #333;
  line-height: 1.5;
}

.dpe-badge {
  display: inline-block; padding: 4px 14px;
  border-radius: 6px; font-weight: 800;
  font-size: 14px; letter-spacing: 1px;
}
.dpe-a { background: #0b8236; color: white; }
.dpe-b { background: #33a852; color: white; }
.dpe-c { background: #aed136; color: #333; }
.dpe-d { background: #fff200; color: #333; }
.dpe-e { background: #f5a623; color: white; }
.dpe-f { background: #ef5923; color: white; }
.dpe-g { background: #d0021b; color: white; }

.detail-actions {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;
}
.det-act-btn {
  display: flex; align-items: center; gap: 8px;
  background: white;
  border: 1px solid rgba(26,35,126,0.15);
  border-radius: 10px; padding: 12px 14px;
  cursor: pointer; font-size: 13px;
  color: #1a237e; font-weight: 600;
  transition: all 0.25s;
}
.det-act-btn span { font-size: 20px; }
.det-act-btn:hover {
  background: linear-gradient(135deg, #fff, #fff9e6);
  border-color: #ff6d00;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(255,109,0,0.2);
}

@media (max-width: 640px) {
  .detail-grid, .detail-actions { grid-template-columns: 1fr; }
}

/* ===== Banner RDV en attente ===== */
.pending-banner {
  display: flex; align-items: center; gap: 14px;
  background: linear-gradient(135deg, #fff3e0, #ffe0b2);
  border: 2px solid #ff6d00;
  border-radius: 12px; padding: 14px 18px;
  margin-bottom: 14px;
  box-shadow: 0 6px 20px rgba(255,109,0,0.2);
  animation: pbPulse 2s ease-in-out infinite;
}
@keyframes pbPulse {
  0%,100% { box-shadow: 0 6px 20px rgba(255,109,0,0.2); }
  50%     { box-shadow: 0 8px 28px rgba(255,109,0,0.45); }
}
.pb-icon {
  font-size: 28px;
  animation: pbBounce 1.3s ease-in-out infinite;
}
@keyframes pbBounce {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%     { transform: translateY(-4px) rotate(5deg); }
}
.pb-info { flex: 1; }
.pb-title { font-size: 14px; font-weight: 700; color: #1a237e; }
.pb-sub { font-size: 12px; color: #c77000; margin-top: 2px; }
.pb-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 18px; color: #c77000; font-weight: 700;
  padding: 6px 10px; border-radius: 6px;
  transition: all 0.2s;
}
.pb-close:hover { background: rgba(0,0,0,0.08); color: #c62828; }

/* Devis aides summary */
.devis-aides-summary {
  margin-top: 12px; border-radius: 10px; overflow: hidden;
  border: 2px solid #1a237e;
}
.das-item {
  display: flex; justify-content: space-between; padding: 8px 14px;
  font-size: 13px; font-weight: 600;
}
.das-total { background: #f5f7ff; color: #1a237e; }
.das-aide { background: #e8f5e9; color: #2e7d32; }
.das-reste {
  background: linear-gradient(135deg, #ff6d00, #ffab00);
  color: white; font-size: 15px; font-weight: 800;
}

/* Devis quick select */
.devis-quick-select {
  background: linear-gradient(135deg, #fafbff, #fff);
  border: 1px solid #e0e4ff;
  border-radius: 12px; padding: 16px;
  margin-bottom: 14px;
  display: flex; flex-wrap: wrap; gap: 16px;
}
.dqs-group {
  flex: 1; min-width: 200px;
  display: flex; flex-direction: column; gap: 4px;
}
.dqs-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #1a237e;
  margin-bottom: 4px; padding-bottom: 4px;
  border-bottom: 2px solid #ff6d00;
}
.dqs-chk {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 8px;
  cursor: pointer; font-size: 12px; color: #333;
  transition: all 0.2s; border: 1px solid transparent;
}
.dqs-chk:hover { background: #fff3e0; border-color: #ff6d00; }
.dqs-chk input { accent-color: #ff6d00; cursor: pointer; }
.dqs-chk:has(input:checked) {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  border-color: #1a237e;
  font-weight: 700; color: #1a237e;
  box-shadow: 0 2px 6px rgba(26,35,126,0.15);
}

/* Onglets fiches CEE devis */
.devis-fiche-tabs {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.dft-btn {
  flex: 1; min-width: 120px;
  padding: 10px 12px; border-radius: 10px;
  border: 1px solid #e0e4ff; background: white;
  cursor: pointer; text-align: center;
  font-size: 12px; font-weight: 700; color: #1a237e;
  transition: all 0.25s;
  line-height: 1.3;
}
.dft-btn small { font-weight: 400; color: #888; font-size: 10px; }
.dft-btn:hover { border-color: #ff6d00; background: #fff9e6; }
.dft-btn.dft-active {
  background: linear-gradient(135deg, #1a237e, #3949ab);
  color: white; border-color: transparent;
  box-shadow: 0 4px 14px rgba(26,35,126,0.35);
}
.dft-btn.dft-active small { color: rgba(255,255,255,0.8); }

/* Panels fiches */
.devis-fiche-panel {
  background: linear-gradient(135deg, #fafbff, #fff);
  border: 1px solid #e0e4ff; border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.dfp-title {
  font-size: 14px; font-weight: 800; color: #1a237e;
  margin-bottom: 2px;
}
.dfp-subtitle {
  font-size: 10px; color: #888; margin-bottom: 12px;
  letter-spacing: 0.5px;
}

/* Travaux 174 */
.d174-travaux { margin-top: 10px; }
.d174-trav-title {
  font-size: 11px; font-weight: 700; color: #1a237e;
  margin-bottom: 8px;
}
.d174-trav-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.d174-col-title {
  font-size: 10px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; color: #ff6d00;
  margin-bottom: 4px; padding-bottom: 3px; border-bottom: 1px solid #ffe0b2;
}
.d174-chk {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 8px; border-radius: 6px;
  cursor: pointer; font-size: 12px; color: #333;
  transition: all 0.2s; border: 1px solid transparent;
}
.d174-chk:hover { background: #fff3e0; }
.d174-chk input { accent-color: #ff6d00; }
.d174-chk:has(input:checked) {
  background: #e3f2fd; border-color: #1a237e;
  font-weight: 700; color: #1a237e;
}

/* Resultats */
.d174-result { margin-top: 12px; }
.dfp-status {
  padding: 8px 12px; border-radius: 8px;
  font-size: 12px; font-weight: 700;
  margin-bottom: 8px;
}
.dfp-ok { background: #e8f5e9; color: #1b5e20; border-left: 3px solid #2e7d32; }
.dfp-err { background: #ffebee; color: #c62828; border-left: 3px solid #c62828; }
.dfp-warn-txt { background: #fff3e0; color: #e65100; border-left: 3px solid #ff6d00; }
.dfp-warn { background: #fff3e0; color: #e65100; padding: 8px 12px; border-radius: 8px; font-size: 12px; margin-bottom: 8px; border-left: 3px solid #ff6d00; }
.dfp-ok-box { background: #e8f5e9; color: #1b5e20; padding: 6px 12px; border-radius: 8px; font-size: 11px; font-weight: 600; margin-bottom: 8px; }
.dfp-detail {
  background: #f5f7ff; border-radius: 10px; padding: 12px;
  border: 1px solid #e0e4ff;
}
.dfp-detail-title {
  font-size: 11px; font-weight: 800; color: #1a237e;
  letter-spacing: 1px; text-transform: uppercase;
  margin-bottom: 8px; padding-bottom: 4px;
  border-bottom: 1px solid #e0e4ff;
}
.dfp-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.dfp-table td { padding: 4px 8px; border-bottom: 1px solid #eef; }
.dfp-table td:first-child { color: #666; }
.dfp-table td:last-child { text-align: right; color: #1a237e; }
.dfp-formula {
  margin-top: 10px; padding: 8px 12px;
  background: #e8ecff; border-radius: 6px;
  font-size: 12px; color: #1a237e; text-align: center;
}
.dfp-euros {
  margin-top: 8px; padding: 10px 14px;
  background: linear-gradient(135deg, #ff6d00, #ffab00);
  border-radius: 8px; text-align: center;
  font-size: 14px; color: white;
}
.dfp-big { font-size: 22px; font-weight: 900; }