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

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

:root {
  --bg:        #0f1117;
  --bg2:       rgba(22,24,32,0.85);
  --bg3:       rgba(28,30,39,0.85);
  --border:    #2a2d3a;
  --muted:     #8892a4;
  --text:      #ffffff;
  --text-dim:  #b8c4d4;
  --blue:      #4A90D9;
  --blue-dim:  rgba(74,144,217,0.15);
  --green:     #2ECC71;
  --orange:    #F39C12;
  --orange-dim:rgba(243,156,18,0.12);
  --red:       #E74C3C;
  --cyan:      #00D4FF;
  --cyan-dim:  rgba(0,212,255,0.1);
  --font:      'JetBrains Mono', monospace;
}

html, body { width:100%; height:100%; background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; line-height:1.5; overflow:hidden; -webkit-font-smoothing:antialiased; }

#hc-bg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='104'%3E%3Cpolygon points='30,2 58,17 58,47 30,62 2,47 2,17' fill='none' stroke='%231E7FD4' stroke-opacity='0.55' stroke-width='1'/%3E%3Cpolygon points='60,54 88,69 88,99 60,114 32,99 32,69' fill='none' stroke='%231E7FD4' stroke-opacity='0.55' stroke-width='1'/%3E%3Cpolygon points='0,54 28,69 28,99 0,114 -28,99 -28,69' fill='none' stroke='%231E7FD4' stroke-opacity='0.55' stroke-width='1'/%3E%3C/svg%3E");
  background-size:60px 104px;
}
body::after { content:''; position:fixed; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.03) 2px,rgba(0,0,0,0.03) 4px); pointer-events:none; z-index:0; }

/* ─── VIEWS ─── */
.view { position:fixed; inset:0; display:none; flex-direction:column; z-index:1; opacity:0; transition:opacity 0.3s ease; }
.view.active { display:flex; opacity:1; }

/* ─── LOGO ─── */
.logo { font-size:28px; font-weight:700; letter-spacing:0.18em; color:#fff; display:inline-block; position:relative; overflow:hidden; user-select:none; }
.logo-sm { font-size:15px; font-weight:700; letter-spacing:0.18em; color:#fff; display:inline-block; position:relative; overflow:hidden; user-select:none; }
.logo span, .logo-sm span { color:var(--blue); }
.logo::after, .logo-sm::after { content:''; position:absolute; top:-10%; left:-80%; width:60%; height:120%; background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,0.55) 40%,rgba(74,144,217,0.8) 50%,rgba(255,255,255,0.55) 60%,transparent 80%); transform:skewX(-15deg); animation:sweep 1.6s cubic-bezier(0.25,0.46,0.45,0.94) 0.3s forwards; pointer-events:none; }
@keyframes sweep { 0%{left:-80%} 100%{left:140%} }

/* ─── LOGIN ─── */
#view-login { align-items:center; justify-content:center; }
.login-box { display:flex; flex-direction:column; align-items:center; gap:0; }
.login-logo-wrap { margin-bottom:14px; }
.login-logo-wrap .logo { font-size:42px; letter-spacing:0.22em; }
.login-line { width:0; height:1px; background:linear-gradient(90deg,transparent,var(--blue),transparent); margin:0 auto 18px; animation:lineExpand 0.8s ease 1.2s both; }
@keyframes lineExpand { from{width:0;opacity:0} to{width:320px;opacity:1} }
.login-sub { font-size:11px; letter-spacing:0.22em; color:var(--text-dim); text-transform:uppercase; margin-bottom:48px; animation:fadeUp 0.6s ease 1s both; }
@keyframes fadeUp { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }
.login-form { display:flex; flex-direction:column; gap:14px; width:320px; animation:fadeUp 0.6s ease 1.3s both; }
.login-field { display:flex; flex-direction:column; gap:6px; }
.login-field label { font-size:9px; letter-spacing:0.2em; color:var(--text-dim); text-transform:uppercase; }
.login-field input { background:rgba(22,24,32,0.85); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:13px; padding:11px 14px; outline:none; transition:border-color 0.2s; }
.login-field input:focus { border-color:var(--blue); }
.login-field input::placeholder { color:var(--muted); }
.login-submit { margin-top:6px; padding:13px; background:transparent; border:1px solid var(--blue); color:var(--blue); font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.2em; text-transform:uppercase; cursor:pointer; transition:background 0.2s,color 0.2s; }
.login-submit:hover { background:var(--blue); color:#0f1117; }
.login-error { font-size:10px; color:var(--red); letter-spacing:0.1em; text-align:center; min-height:14px; }
.login-corner { position:absolute; top:24px; left:24px; font-size:10px; color:var(--muted); letter-spacing:0.12em; }

/* ─── HEADER COMMUN ─── */
.app-header { display:flex; align-items:center; justify-content:space-between; padding:12px 22px; border-bottom:1px solid rgba(74,144,217,0.25); background:rgba(10,11,16,0.72); flex-shrink:0; position:relative; z-index:10; }
.header-left { display:flex; align-items:center; gap:18px; }
.header-right { display:flex; align-items:center; gap:20px; font-size:11px; color:var(--text-dim); }
.user-badge { color:var(--text); font-weight:500; letter-spacing:0.08em; }
.user-badge::before { content:'▸ '; color:var(--blue); }
#live-clock { font-size:13px; font-weight:500; color:var(--cyan); letter-spacing:0.1em; min-width:72px; text-align:right; }
.logout-btn { background:transparent; border:1px solid var(--border); color:var(--muted); font-family:var(--font); font-size:9px; letter-spacing:0.12em; padding:4px 10px; cursor:pointer; transition:border-color 0.2s,color 0.2s; }
.logout-btn:hover { border-color:var(--red); color:var(--red); }

/* ─── TOPTAB CONTENT ─── */
.toptab-content { flex:1; display:flex; flex-direction:column; overflow:hidden; }

/* ─── MÉTHODE MAIN NAV ─── */
.meth-main-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-bottom: 1px solid rgba(74,144,217,0.2);
  position: relative;
  flex-shrink: 0;
}
.meth-main-nav .sub-topbar-right {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  margin: 0;
}
.meth-nav-center {
  display: flex;
  gap: 4px;
  align-items: center;
}
.meth-nav-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  height: 36px;
  background: none;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.meth-nav-btn:hover { color: #fff; background: rgba(255,255,255,0.04); }
.meth-nav-btn.active {
  color: var(--orange);
  border-color: rgba(243,156,18,0.35);
  background: rgba(243,156,18,0.06);
}
.meth-nav-icon { font-size: 13px; opacity: 0.8; }

.meth-archives-tabs {
  display: flex;
  align-items: stretch;
  padding: 0 16px;
  gap: 2px;
  background: rgba(0,0,0,0.15);
  border-bottom: 1px solid rgba(74,144,217,0.12);
  flex-shrink: 0;
}

/* ─── SUB-TOPBAR ─── */
.sub-topbar {
  display:flex;
  align-items:stretch;
  height:40px;
  flex-shrink:0;
  background:rgba(10,11,16,0.72);
  border-bottom:1px solid rgba(74,144,217,0.2);
}
.sub-tab {
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 22px;
  background:transparent;
  border:none;
  border-bottom:2px solid transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:10px;
  font-weight:700;
  letter-spacing:0.18em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color 0.15s, border-color 0.15s, background 0.15s;
  white-space:nowrap;
}
.sub-tab:hover { color:#fff; background:rgba(255,255,255,0.03); }
.sub-tab.active { color:var(--orange); border-bottom-color:var(--orange); background:rgba(243,156,18,0.05); }
.sub-tab-icon { font-size:12px; opacity:0.8; }
.sub-topbar-right { margin-left:auto; display:flex; align-items:center; padding:0 16px; font-size:9px; color:var(--muted); letter-spacing:0.1em; }

/* ─── BODY SPLIT (sidebar + main) ─── */
.app-body { flex:1; display:flex; overflow:hidden; }

/* ─── SIDEBAR ─── */
.sidebar { width:200px; flex-shrink:0; background:rgba(10,11,16,0.72); border-right:1px solid rgba(74,144,217,0.2); display:flex; flex-direction:column; overflow:hidden; }
.sidebar-logo { padding:18px 16px 14px; border-bottom:1px solid var(--border); }
.sidebar-nav { flex:1; overflow-y:auto; padding:6px 0 12px; }
.sidebar-nav::-webkit-scrollbar { width:3px; }
.sidebar-nav::-webkit-scrollbar-thumb { background:var(--border); }
.nav-section { font-size:9px; letter-spacing:0.18em; color:var(--orange); text-transform:uppercase; padding:10px 16px 4px; border-left:2px solid var(--orange); margin:4px 0; }
.nav-item { display:flex; align-items:center; gap:10px; width:100%; padding:9px 16px; background:transparent; border:none; color:var(--text-dim); font-family:var(--font); font-size:12px; letter-spacing:0.06em; text-align:left; cursor:pointer; transition:color 0.15s,background 0.15s; position:relative; white-space:nowrap; }
.nav-item:hover { color:#fff; background:rgba(255,255,255,0.04); }
.nav-item.active { color:#fff; background:var(--blue-dim); font-weight:600; border-left:2px solid var(--blue); }
.nav-item.active::before { display:none; }
.nav-icon { font-size:13px; width:16px; text-align:center; flex-shrink:0; color:var(--blue); }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); font-size:9px; color:var(--muted); letter-spacing:0.08em; }

/* ─── MAIN CONTENT ─── */
.main-content { flex:1; display:flex; flex-direction:column; overflow:hidden; background:#0d0f15; }
.content-header { padding:8px 22px; border-bottom:1px solid var(--border); background:#111318; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; }
.content-title { font-size:16px; font-weight:700; letter-spacing:0.14em; color:var(--orange); text-transform:uppercase; }
.content-sub { font-size:11px; color:var(--text-dim); letter-spacing:0.06em; margin-top:2px; }
.content-body { flex:1; overflow-y:auto; padding:10px 22px; background:#0d0f15; }
.content-body::-webkit-scrollbar { width:4px; }
.content-body::-webkit-scrollbar-thumb { background:var(--border); }
.panel { display:none; }
.panel.active { display:block; }
#panel-home.active { display:flex; flex:1; }

/* ─── BUTTONS ─── */
.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; font-family:var(--font); font-size:10px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; cursor:pointer; border:1px solid; transition:all 0.18s; }
.btn-primary { background:var(--blue); border-color:var(--blue); color:#fff; }
.btn-primary:hover { background:#5ba0e8; border-color:#5ba0e8; }
.btn-ghost { background:transparent; border-color:var(--border); color:var(--text-dim); }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }
.btn-danger { background:transparent; border-color:rgba(231,76,60,0.4); color:var(--red); }
.btn-danger:hover { background:rgba(231,76,60,0.1); border-color:var(--red); }
.btn:disabled { opacity:0.35; cursor:not-allowed; pointer-events:none; }
.btn-sm { padding:5px 10px; font-size:9px; }

/* ─── TABLES ─── */
.table-wrap { background:var(--bg2); border:1px solid var(--border); overflow-x:auto; }
.data-table { width:100%; border-collapse:collapse; font-size:13px; }
.data-table th { text-align:left; padding:10px 14px; font-size:10px; font-weight:700; letter-spacing:0.14em; color:var(--orange); text-transform:uppercase; border-bottom:1px solid var(--border); white-space:nowrap; background:#1a1c28; }
.data-table td { padding:12px 14px; border-bottom:1px solid rgba(42,45,58,0.8); color:#e0e8f4; vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tr:hover td { background:rgba(74,144,217,0.03); }
.ref { color:var(--cyan); font-size:10px; letter-spacing:0.06em; }
.td-actions { display:flex; gap:6px; }

/* ─── CHIPS ─── */
.chip { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font-size:9px; font-weight:600; letter-spacing:0.08em; border-radius:2px; }
.chip-green { background:rgba(46,204,113,0.12); color:var(--green); }
.chip-orange { background:rgba(243,156,18,0.12); color:var(--orange); }
.chip-red { background:rgba(231,76,60,0.12); color:var(--red); }
.chip-blue { background:var(--blue-dim); color:var(--blue); border:1px solid rgba(74,144,217,0.3); }
.chip-muted { background:rgba(42,45,58,0.6); color:var(--muted); border:1px solid var(--border); }

/* ─── PANEL HEADER ROW ─── */
.panel-header-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; }
.panel-title { font-size:12px; color:var(--orange); letter-spacing:0.14em; text-transform:uppercase; font-weight:700; }

/* ─── EMPTY STATE ─── */
.empty-state { display:flex; flex-direction:column; align-items:center; justify-content:center; height:50vh; gap:12px; color:var(--muted); }
.empty-state .es-icon { font-size:32px; opacity:0.3; }
.empty-state .es-text { font-size:11px; letter-spacing:0.12em; }
.empty-state .es-sub { font-size:10px; color:var(--text-dim); }

/* ─── FICHE ID POPUP DRAWER ─── */
.fiche-popup-backdrop {
  display:none; position:fixed; inset:0; background:rgba(0,0,0,0.45); z-index:900;
}
.fiche-popup-backdrop.active { display:block; }
.fiche-popup-drawer {
  position:fixed; top:0; right:0; bottom:0; width:420px;
  background:#12141c; border-left:1px solid rgba(74,144,217,0.25);
  z-index:901; display:flex; flex-direction:column;
  transform:translateX(100%); transition:transform 0.22s cubic-bezier(0.4,0,0.2,1);
  box-shadow:-12px 0 40px rgba(0,0,0,0.55);
}
.fiche-popup-drawer.active { transform:translateX(0); }
.fiche-popup-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 18px; border-bottom:1px solid var(--border);
  background:#0d0f15; flex-shrink:0;
}
.fiche-popup-identity { display:flex; flex-direction:column; gap:2px; }
.fiche-popup-ref { font-size:11px; font-weight:700; letter-spacing:0.14em; color:var(--cyan); }
.fiche-popup-des { font-size:14px; font-weight:600; color:var(--text); }
.fiche-popup-close {
  background:transparent; border:none; color:var(--muted);
  font-size:20px; cursor:pointer; line-height:1; padding:0 4px;
  transition:color 0.15s;
}
.fiche-popup-close:hover { color:var(--text); }
.fiche-popup-body { flex:1; overflow-y:auto; padding:20px 18px; }
.fp-famille {
  font-size:9px; font-weight:700; letter-spacing:0.18em;
  color:var(--orange); text-transform:uppercase; margin-bottom:14px;
}
.fp-svg-wrap {
  background:#0d0f15; border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  padding:16px; margin-bottom:20px; min-height:160px;
}
.fp-svg-wrap svg { max-width:100%; max-height:200px; }
.fp-composants-title {
  font-size:9px; font-weight:700; letter-spacing:0.18em;
  color:var(--muted); text-transform:uppercase; margin-bottom:10px;
}
.fp-comp-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 0; border-bottom:1px solid rgba(42,45,58,0.6);
}
.fp-comp-row:last-child { border-bottom:none; }
.fp-comp-label { font-size:12px; font-weight:700; color:var(--text); width:100px; flex-shrink:0; }
.fp-comp-bar-wrap { flex:1; display:flex; flex-direction:column; gap:4px; }
.fp-comp-bar-track { height:8px; background:rgba(255,255,255,0.07); flex:1; overflow:hidden; }
.fp-comp-bar-fill { height:100%; transition:width 0.4s; }
.fp-comp-pct { font-size:15px; font-weight:700; min-width:44px; text-align:right; }
.fp-comp-nu { font-size:10px; font-weight:700; padding:2px 7px; letter-spacing:0.08em; }
.fp-no-comps { font-size:12px; color:var(--muted); padding:12px 0; }

/* ─── MODAL ─── */
.modal-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.72); z-index:998; align-items:center; justify-content:center; }
.modal-overlay.active { display:flex; }
.modal-box { background:#161820; border:1px solid var(--border); width:480px; max-height:84vh; display:flex; flex-direction:column; box-shadow:0 0 60px rgba(0,0,0,0.75); }
.modal-box.modal-wide { width:700px; }
.modal-header { padding:18px 22px 14px; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.modal-title { font-size:10px; font-weight:700; letter-spacing:0.2em; color:var(--orange); text-transform:uppercase; }
.modal-close { background:transparent; border:none; color:var(--muted); font-size:18px; cursor:pointer; padding:0; line-height:1; transition:color 0.15s; }
.modal-close:hover { color:var(--text); }
.modal-body { flex:1; overflow-y:auto; padding:20px 22px; }
.modal-body::-webkit-scrollbar { width:3px; }
.modal-body::-webkit-scrollbar-thumb { background:var(--border); }
.modal-footer { padding:13px 22px; border-top:1px solid var(--border); display:flex; justify-content:flex-end; gap:8px; flex-shrink:0; }

/* ─── FORM ─── */
.form-row { display:flex; gap:14px; margin-bottom:14px; }
.form-field { display:flex; flex-direction:column; gap:5px; flex:1; }
.form-field.narrow { flex:0 0 120px; }
.form-field label { font-size:9px; letter-spacing:0.18em; color:var(--orange); text-transform:uppercase; }
.form-field input, .form-field select, .form-field textarea {
  background:rgba(15,17,23,0.92); border:1px solid var(--border); color:var(--text);
  font-family:var(--font); font-size:12px; letter-spacing:0.05em; padding:9px 11px;
  outline:none; transition:border-color 0.2s; -webkit-appearance:none;
}
.form-field input:focus, .form-field select:focus { border-color:var(--blue); }
.form-field input::placeholder { color:var(--muted); }
.form-field select option { background:#161820; }
.form-error { font-size:10px; color:var(--red); letter-spacing:0.08em; min-height:14px; }
.form-note { font-size:9px; color:var(--text-dim); letter-spacing:0.08em; margin-top:4px; }

/* Toggle */
.toggle-row { display:flex; align-items:center; justify-content:space-between; padding:10px 0; border-bottom:1px solid rgba(42,45,58,0.5); }
.toggle-label { font-size:11px; color:var(--text); }
.toggle-sub { font-size:9px; color:var(--text-dim); margin-top:2px; }
.toggle { position:relative; width:38px; height:20px; flex-shrink:0; }
.toggle input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--border); cursor:pointer; transition:background 0.2s; border-radius:2px; }
.toggle-slider::before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:var(--muted); transition:transform 0.2s,background 0.2s; border-radius:1px; }
.toggle input:checked + .toggle-slider { background:var(--blue-dim); border:1px solid var(--blue); }
.toggle input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--blue); }

/* ─── JEU BUILDER ─── */
.jeu-seuil-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; padding:12px 14px; background:var(--bg3); border:1px solid var(--border); }
.jeu-seuil-row label { font-size:9px; letter-spacing:0.16em; color:var(--text-dim); text-transform:uppercase; white-space:nowrap; }
.jeu-seuil-row input { background:rgba(15,17,23,0.9); border:1px solid var(--border); color:var(--text); font-family:var(--font); font-size:13px; padding:6px 10px; outline:none; width:80px; transition:border-color 0.2s; }
.jeu-seuil-row input:focus { border-color:var(--blue); }
.affiner-link { font-size:9px; color:var(--muted); letter-spacing:0.1em; margin-left:auto; opacity:0.5; cursor:not-allowed; text-decoration:underline; text-underline-offset:3px; }

.builder-wrap { border:1px solid var(--border); background:var(--bg2); overflow-x:auto; margin-bottom:8px; }
.builder-table { width:100%; border-collapse:collapse; }
.builder-table th { font-size:9px; letter-spacing:0.14em; color:var(--muted); text-transform:uppercase; padding:8px 10px; border-bottom:1px solid var(--border); text-align:left; background:var(--bg3); white-space:nowrap; }
.builder-table td { padding:5px 6px; border-bottom:1px solid rgba(42,45,58,0.4); vertical-align:middle; }
.builder-table tbody tr:last-child td { border-bottom:none; }
.bld-input { background:transparent; border:1px solid transparent; color:var(--text); font-family:var(--font); font-size:11px; padding:5px 7px; outline:none; width:100%; transition:border-color 0.18s,background 0.18s; }
.bld-input:focus { border-color:var(--blue); background:rgba(15,17,23,0.8); }
.bld-input::placeholder { color:var(--muted); }
.bld-input[readonly] { color:var(--text-dim); cursor:default; }
.bld-del { background:transparent; border:none; color:var(--muted); font-size:16px; cursor:pointer; padding:2px 6px; transition:color 0.15s; line-height:1; }
.bld-del:hover { color:var(--red); }

/* ─── OPERATOR VIEW ─── */
.jeu-block { margin-bottom:28px; }
.jeu-header { display:flex; align-items:center; gap:12px; padding:6px 12px; }
.jeu-title { font-size:13px; font-weight:700; letter-spacing:0.22em; }
.jeu-table { width:100%; border-collapse:collapse; background:#13151e; border:1px solid var(--border); border-top:none; table-layout:fixed; }
.jeu-table th { padding:5px 8px; font-size:10px; font-weight:700; letter-spacing:0.14em; color:var(--orange); text-transform:uppercase; border-bottom:1px solid var(--border); text-align:left; background:#1a1c28; }
.jeu-table td { padding:6px 8px; border-bottom:1px solid rgba(42,45,58,0.8); color:#e8eaf0; vertical-align:middle; font-size:12px; }
.jeu-table tr:last-child td { border-bottom:none; }
.jeu-table tr:hover td { background:rgba(74,144,217,0.05); }
.col-pos { font-weight:700; color:var(--blue); font-size:14px; letter-spacing:0.08em; width:40px; }
.col-outil { font-size:12px; width:50px; }
.col-outil span:first-child { display:block; }
.col-outil .outil-ref { font-size:11px; color:#8899aa; display:block; }
.outil-des-link:hover { color:var(--cyan); text-decoration:underline; }
.col-component { width:160px; }

/* Component cell */
.etage-comp { display:flex; flex-direction:column; gap:3px; padding:4px 0; }
.etage-comp + .etage-comp { border-top:1px solid rgba(42,45,58,0.6); }
.etage-comp-label { font-size:10px; font-weight:700; letter-spacing:0.18em; color:var(--text-dim); text-transform:uppercase; }
.comp-cell { display:flex; flex-direction:column; gap:4px; }
.comp-label { font-size:13px; letter-spacing:0.08em; color:#e8eaf0; text-transform:uppercase; display:flex; align-items:center; gap:6px; font-weight:500; }
.comp-nu { font-size:10px; padding:2px 7px; border-radius:1px; font-weight:700; letter-spacing:0.08em; }
.comp-nu.neuf { background:rgba(46,204,113,0.12); color:var(--green); }
.comp-nu.used { background:rgba(243,156,18,0.12); color:var(--orange); }
.bar-row { display:flex; align-items:center; gap:8px; }
.bar-track { flex:1; height:7px; background:rgba(255,255,255,0.07); position:relative; overflow:hidden; }
.bar-fill { height:100%; transition:width 0.5s cubic-bezier(0.4,0,0.2,1); }
.bar-pct { font-size:12px; font-weight:700; min-width:34px; text-align:right; }
.comp-date { font-size:12px; color:#9aa8bc; letter-spacing:0.06em; }
@keyframes pulse-red { 0%,100%{opacity:1} 50%{opacity:0.5} }
.bar-over { animation:pulse-red 1.2s ease-in-out infinite; }

/* Replace button */
.replace-btn { padding:5px 12px; background:transparent; border:1px solid var(--border); color:var(--text-dim); font-family:var(--font); font-size:11px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.18s; white-space:nowrap; margin-top:4px; }
.replace-btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blue-dim); }
.replace-btn.flash-ok { border-color:var(--green); color:var(--green); background:rgba(46,204,113,0.1); cursor:default; }
.td-rotation { white-space:nowrap; text-align:right; width:100px; }
.rotation-btn { padding:3px 8px; background:transparent; border:1px solid var(--border); color:var(--text-dim); font-family:var(--font); font-size:9px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
.rotation-btn:hover { border-color:var(--green); color:var(--green); }
.rotation-btn.active { border-color:var(--green); color:var(--green); background:rgba(46,204,113,0.1); }
.rotation-btn.inactive:hover { border-color:var(--orange); color:var(--orange); }
.rotation-btn.inactive.active { border-color:var(--orange); color:var(--orange); background:rgba(243,156,18,0.1); }

/* ─── POPUP CONFIRMATION ─── */
.popup-overlay { display:none; position:fixed; inset:0; background:rgba(0,0,0,0.65); z-index:999; align-items:center; justify-content:center; }
.popup-overlay.active { display:flex; }
.popup-box { background:#161820; border:1px solid var(--border); width:340px; padding:26px 26px 22px; display:flex; flex-direction:column; gap:16px; box-shadow:0 0 40px rgba(0,0,0,0.6); }
.popup-title { font-size:11px; font-weight:700; letter-spacing:0.2em; color:var(--orange); text-transform:uppercase; }
.popup-body { font-size:12px; color:var(--text); line-height:1.7; }
.popup-body strong { color:#fff; }
.popup-actions { display:flex; gap:10px; justify-content:flex-end; }

/* ─── TOAST ─── */
#toast { position:fixed; bottom:24px; right:24px; z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast-item { padding:10px 18px; font-size:10px; letter-spacing:0.1em; font-weight:600; border-left:3px solid; animation:toastIn 0.25s ease; }
@keyframes toastIn { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} }
.toast-success { background:rgba(46,204,113,0.12); border-color:var(--green); color:var(--green); }
.toast-error { background:rgba(231,76,60,0.12); border-color:var(--red); color:var(--red); }
.toast-info { background:var(--blue-dim); border-color:var(--blue); color:var(--blue); }

/* ─── LOADER ─── */
.loader { display:inline-block; width:14px; height:14px; border:2px solid var(--border); border-top-color:var(--blue); border-radius:50%; animation:spin 0.7s linear infinite; }
@keyframes spin { to{transform:rotate(360deg)} }

/* ─── SOUS-TABS ─── */
.subtab-bar { display:flex; gap:0; border-bottom:1px solid var(--border); margin-bottom:16px; }
.subtab { padding:10px 22px; background:transparent; border:none; border-bottom:2px solid transparent;
  color:var(--text-dim); font-family:var(--font); font-size:12px; letter-spacing:0.14em;
  text-transform:uppercase; cursor:pointer; transition:color 0.15s, border-color 0.15s; }
.subtab.active { color:var(--orange); border-bottom-color:var(--orange); }
.subtab:hover:not(.active) { color:var(--text); }

/* ─── ATELIER PANEL ─── */
.atelier-layout { display:flex; gap:0; min-height:400px; }
.atelier-nav { width:180px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; background:#0d0f15; }
.atelier-nav > .fiches-nav-header { flex-shrink:0; position:sticky; top:0; z-index:2; background:var(--bg); }
.atelier-nav > .atelier-nav-famille { flex-shrink:0; }
.atelier-nav-famille { }
.atelier-nav-famille-header { display:flex; align-items:center; justify-content:space-between; padding:9px 12px; background:rgba(243,156,18,0.05); border:none; border-bottom:1px solid rgba(243,156,18,0.15); color:var(--orange); font-family:var(--font); font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; width:100%; cursor:pointer; transition:color 0.15s, background 0.15s; }
.atelier-nav-famille-header:hover { color:#fff; background:rgba(243,156,18,0.1); }
.atelier-nav-famille-header .famille-arrow { font-size:8px; transition:transform 0.2s; }
.atelier-nav-famille-header.open .famille-arrow { transform:rotate(90deg); }
.atelier-nav-famille-count { font-size:9px; color:var(--muted); background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:1px 6px; }
.atelier-nav-machines { overflow:hidden; }
.atelier-nav-machine { display:block; width:100%; padding:7px 12px 7px 22px; background:transparent; border:none; border-left:2px solid transparent; color:#a8b4c4; font-family:var(--font); font-size:13px; letter-spacing:0.06em; text-align:left; cursor:pointer; transition:color 0.15s,background 0.15s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.atelier-nav-machine:hover { color:#fff; background:rgba(255,255,255,0.04); }
.atelier-nav-machine.active { color:var(--blue); background:var(--blue-dim); border-left-color:var(--blue); font-weight:700; }
.atelier-main { flex:1; padding:0 0 0 22px; min-width:0; }
.atelier-main-header { position:relative; display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.atelier-main-title { font-size:36px; font-weight:700; letter-spacing:0.16em; color:var(--cyan); text-transform:uppercase; }
.jeu-tabs-inline { position:absolute; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:8px; }
.atelier-jeu-tabs { display:flex; align-items:center; gap:4px; margin-bottom:8px; flex-wrap:wrap; }
.atelier-jeu-tab { padding:10px 28px; background:transparent; border:2px solid var(--border); font-family:var(--font); font-size:13px; font-weight:700; letter-spacing:0.2em; cursor:pointer; transition:all 0.15s; }
.atelier-jeu-tab.add { padding:10px 18px; border-style:dashed; border-width:1px; border-color:var(--border); color:var(--text-dim); font-size:11px; letter-spacing:0.1em; }
.atelier-jeu-tab.add:hover { border-color:var(--orange); color:var(--orange); border-style:solid; }
/* ─── MODE MODIFICATION ─── */
.edit-mode-banner {
  padding:4px 16px;
  background:rgba(243,156,18,0.12);
  border-bottom:1px solid rgba(243,156,18,0.35);
  font-size:9px;
  font-weight:700;
  letter-spacing:0.22em;
  color:var(--orange);
  text-align:center;
}
.edit-mode-toggle {
  padding:5px 14px;
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-dim);
  font-family:var(--font);
  font-size:9px;
  font-weight:700;
  letter-spacing:0.16em;
  cursor:pointer;
  transition:all 0.15s;
}
.edit-mode-toggle:hover { border-color:var(--orange); color:var(--orange); }
.edit-mode-toggle.active {
  background:rgba(243,156,18,0.12);
  border-color:var(--orange);
  color:var(--orange);
}
.atelier-layout.edit-mode { border-top:2px solid rgba(243,156,18,0.45); }

/* ─── FICHES ID — LAYOUT SIDEBAR ─── */
.fiches-layout { display:flex; gap:0; }
.fiches-nav { width:162px; flex-shrink:0; border-right:1px solid var(--border); padding:4px 0; background:#0d0f15; }
.fiches-nav-header { padding:8px 12px; font-size:9px; letter-spacing:0.14em; color:var(--muted); text-transform:uppercase; border-bottom:1px solid var(--border); margin-bottom:4px; display:flex; align-items:center; justify-content:space-between; }
.fiches-nav-item { display:flex; align-items:center; justify-content:space-between; width:100%; padding:7px 12px; background:transparent; border:none; border-left:2px solid transparent; color:var(--text-dim); font-family:var(--font); font-size:11px; letter-spacing:0.04em; text-align:left; cursor:pointer; transition:color 0.15s,background 0.15s; }
.fiches-nav-item:hover { color:var(--text); background:rgba(255,255,255,0.03); }
.fiches-nav-item.active { color:var(--orange); background:rgba(243,156,18,0.07); border-left-color:var(--orange); font-weight:600; }
.fiches-nav-count { font-size:9px; color:var(--muted); background:var(--bg3); border:1px solid var(--border); border-radius:10px; padding:1px 6px; flex-shrink:0; }
.fiches-main { flex:1; padding:0 0 0 22px; min-width:0; }
.fiches-main-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border); }
.fiches-main-title { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--orange); }

/* ─── FICHES ID — MATRICES PAR FAMILLE ─── */
.fiche-section { margin-bottom:28px; }
.fiche-section-title {
  font-size:12px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--orange); border-bottom:2px solid rgba(243,156,18,0.25);
  padding-bottom:8px; margin-bottom:12px; display:flex; align-items:center; gap:8px;
}
.fiche-section-count {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:1px 7px; font-size:9px; color:var(--muted); font-weight:400;
}
.fiche-grid {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:10px;
}
.fiche-card {
  position:relative; background:var(--bg2); border:1px solid var(--border);
  padding:14px 14px 12px; cursor:pointer;
  transition:border-color 0.15s, background 0.15s;
  display:flex; flex-direction:column; gap:5px;
}
.fiche-card:hover { border-color:var(--blue); background:var(--bg3); }
.fiche-card-ref { font-size:13px; font-weight:700; color:var(--text); letter-spacing:0.04em; }
.fiche-card-des { font-size:11px; color:var(--muted); line-height:1.4; min-height:16px; }
.fiche-card-footer {
  display:flex; align-items:center; justify-content:space-between;
  margin-top:6px; padding-top:8px; border-top:1px solid var(--border);
}
.fiche-card-meta { font-size:10px; color:var(--muted); }
.fiche-card-del {
  position:absolute; top:8px; right:8px;
  background:transparent; border:none; color:var(--muted);
  font-size:11px; cursor:pointer; padding:2px 5px; line-height:1;
  transition:color 0.15s;
}
.fiche-card-del:hover { color:var(--red); }

/* ─── FICHE ID ─── */
.fiche-detail { display:flex; flex-direction:column; height:100%; }
.fiche-detail-header { display:flex; flex-direction:column; gap:12px; padding:0 0 16px 0;
  border-bottom:1px solid var(--border); margin-bottom:16px; }
.fiche-header-top { display:flex; align-items:center; gap:16px; }
.fiche-header-identity { flex:1; display:flex; align-items:baseline; gap:12px; min-width:0; }
.fiche-header-ref { font-size:20px; font-weight:700; color:var(--cyan); letter-spacing:0.04em; white-space:nowrap; }
.fiche-header-des { font-size:13px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fiche-header-meta { display:flex; background:var(--bg2); border:1px solid var(--border); border-radius:3px; overflow:hidden; }
.fiche-meta-item { flex:1; display:flex; flex-direction:column; gap:6px; padding:12px 18px; border-right:1px solid var(--border); }
.fiche-meta-item:last-child { border-right:none; }
.fiche-meta-label { font-size:9px; letter-spacing:0.14em; color:var(--muted); text-transform:uppercase; }
.fiche-meta-val { font-size:14px; color:var(--text); font-weight:600; }
.fiche-meta-jauge-display { display:flex; align-items:center; gap:10px; }
.fiche-meta-jauge-inch { font-size:14px; font-weight:700; color:var(--cyan); }
.fiche-meta-jauge-sep { color:var(--border); font-size:11px; }
.fiche-meta-jauge-mm { font-size:12px; color:var(--text-dim); }
.fiche-meta-edit-btn { background:none; border:1px solid var(--border); border-radius:2px; color:var(--muted); font-size:9px; padding:2px 6px; cursor:pointer; letter-spacing:0.08em; transition:color 0.15s,border-color 0.15s; }
.fiche-meta-edit-btn:hover { color:var(--text); border-color:var(--text-dim); }
.fiche-jauge-edit { display:flex; align-items:center; gap:6px; }
.fiche-jauge-input { width:80px; font-size:13px; font-weight:600; padding:3px 6px; background:var(--bg3); border:1px solid var(--blue); border-radius:2px; color:var(--cyan); font-family:var(--font); text-align:right; }
.fiche-jauge-mm-live { font-size:11px; color:var(--text-dim); min-width:60px; }
.fiche-body { display:flex; gap:0; flex:1; min-height:0; }
.fiche-left { flex:1; display:flex; align-items:center; justify-content:center;
  border-right:1px solid var(--border); padding:24px; }
.fiche-right { width:280px; padding:16px; overflow-y:auto; }

.fiche-schema-wrap { width:100%; max-width:600px; }
.fiche-schema-wrap svg { width:100%; height:auto; display:block; }

/* État composants sur SVG fiche ID */
.fiche-schema-wrap .hs-comp.hs-linked-tracked .cf  { fill:rgba(243,156,18,0.12) !important; stroke:#F39C12 !important; }
.fiche-schema-wrap .hs-comp.hs-linked-tracked .ct  { stroke:rgba(243,156,18,0.5) !important; }
.fiche-schema-wrap .hs-comp.hs-linked-tracked .sc-lbl { fill:#F39C12 !important; }
.fiche-schema-wrap .hs-comp.hs-linked-untracked .cf { fill:rgba(255,255,255,0.04) !important; stroke:rgba(255,255,255,0.25) !important; }
.fiche-schema-wrap .hs-comp.hs-linked-untracked .ct { stroke:rgba(255,255,255,0.18) !important; }
.fiche-schema-wrap .hs-comp.hs-linked-untracked .sc-lbl { fill:rgba(255,255,255,0.35) !important; }

/* ─── RÉFÉRENTIEL — onglets + sections ─── */
.ref-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.ref-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border);
}
.ref-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 6px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.ref-tab:hover { color: #fff; }
.ref-tab.active { color: var(--orange); border-bottom-color: var(--orange); }
.ref-section { margin-bottom: 24px; }
.ref-section-title {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange);
  text-transform: uppercase;
  padding: 6px 0;
  border-bottom: 1px solid rgba(243,156,18,0.2);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.ref-section-count {
  font-size: 9px;
  color: var(--text-dim);
  font-weight: 400;
  letter-spacing: 0;
}

/* Section Monture Fiche ID */
.monture-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.monture-card {
  display: flex;
  flex-direction: column;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 4px;
  overflow: hidden;
  width: 400px;
  flex-shrink: 0;
}
.monture-card.monture-empty {
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-style: dashed;
  opacity: 0.5;
}
.monture-svg {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border);
}
.monture-svg svg { width: 100%; max-height: 100px; display: block; }
.monture-info {
  padding: 8px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.monture-type { font-size: 9px; color: var(--orange); letter-spacing: 0.14em; font-weight: 700; }
.monture-ref  { font-size: 11px; color: var(--cyan); font-weight: 600; }
.monture-des  { font-size: 10px; color: var(--text-dim); }
.monture-prix { font-size: 10px; color: var(--muted); }

/* Section consommables Fiche ID */
.fiche-consommables-section { border-top:1px solid var(--border); padding:12px 0 0 0; margin-top:14px; flex-shrink:0; }
.conso-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.conso-title { font-size:9px; letter-spacing:0.14em; color:var(--muted); text-transform:uppercase; }
.conso-list { display:flex; flex-direction:column; gap:4px; }
.conso-row { display:grid; grid-template-columns:80px 110px 1fr auto auto; align-items:center; gap:10px; padding:6px 10px; background:var(--bg2); border:1px solid var(--border); border-radius:2px; font-size:11px; }
.conso-type { font-size:9px; letter-spacing:0.08em; color:var(--muted); text-transform:uppercase; }
.conso-ref { color:var(--cyan); font-weight:600; font-family:var(--font); }
.conso-des { color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.conso-prix { color:var(--text-dim); font-size:10px; text-align:right; white-space:nowrap; }

/* Sélection référentiel dans Fiche ID */
.ref-pick-list { display:flex; flex-direction:column; gap:4px; margin-bottom:2px; }
.ref-pick-row { display:flex; align-items:center; gap:8px; padding:7px 8px; background:var(--bg3); border:1px solid var(--border); border-radius:2px; }
.ref-pick-row:hover { border-color:rgba(74,144,217,0.4); }
.ref-pick-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.ref-pick-ref { font-size:11px; font-weight:700; color:var(--cyan); font-family:var(--font); }
.ref-pick-des { font-size:10px; color:var(--text-dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* Détails composant */
.comp-detail-card { background:var(--bg2); border:1px solid var(--border); padding:16px; }
.comp-detail-title { font-size:11px; font-weight:700; letter-spacing:0.12em;
  color:var(--blue); text-transform:uppercase; margin-bottom:14px; }
.comp-detail-row { display:flex; justify-content:space-between; align-items:center;
  padding:7px 0; border-bottom:1px solid rgba(42,45,58,0.5); font-size:13px; }
.comp-detail-row span:first-child { color:var(--text-dim); }
.comp-detail-row.muted span:last-child { color:var(--muted); }
.comp-detail-note { font-size:10px; color:var(--text-dim); margin-top:10px; }

/* Ligne fiche table au hover */
.fiche-row:hover td { background:rgba(74,144,217,0.06); }

/* ─── MÉMO DE VIGILANCE ─── */
.jeu-block.has-memo .jeu-title::after {
  content: ' ⚑';
  color: var(--orange);
  font-size: 10px;
}

/* ─── TOPBAR ─── */
.topbar {
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  display:flex;
  align-items:stretch;
  height:100%;
  gap:0;
}
.topbar-tab {
  display:flex;
  align-items:center;
  padding:0 28px;
  background:transparent;
  border:none;
  border-bottom:3px solid transparent;
  color:var(--muted);
  font-family:var(--font);
  font-size:11px;
  font-weight:700;
  letter-spacing:0.22em;
  text-transform:uppercase;
  cursor:pointer;
  transition:color 0.15s, border-color 0.15s, background 0.15s;
  white-space:nowrap;
}
.topbar-tab:hover { color:#fff; background:rgba(255,255,255,0.03); }
.topbar-tab.active {
  color:var(--orange);
  border-bottom-color:var(--orange);
  background:rgba(243,156,18,0.06);
}

/* ─── SIDEBAR TOGGLE ─── */
.sidebar-toggle {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  padding:10px 0;
  background:transparent;
  border:none;
  border-bottom:1px solid var(--border);
  color:var(--muted);
  font-family:var(--font);
  font-size:11px;
  cursor:pointer;
  transition:color 0.15s, background 0.15s;
  flex-shrink:0;
}
.sidebar-toggle:hover { color:var(--blue); background:var(--blue-dim); }

/* Sidebar collapsed state */
.sidebar.collapsed { width:48px; }
.sidebar.collapsed .nav-label,
.sidebar.collapsed .nav-section,
.sidebar.collapsed .sidebar-footer,
.sidebar.collapsed .sidebar-logo { display:none; }
.sidebar.collapsed .nav-item { justify-content:center; padding:10px 0; }
.sidebar.collapsed .nav-icon { width:auto; font-size:15px; }
.sidebar.collapsed .sidebar-toggle { font-size:12px; }
.sidebar { transition:width 0.22s cubic-bezier(0.4,0,0.2,1); }

/* ─── MENU CONTEXTUEL ─── */
.context-menu {
  position: fixed;
  z-index: 9999;
  background: var(--bg3);
  border: 1px solid var(--border);
  padding: 4px 0;
  min-width: 180px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.context-menu button {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: transparent;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 11px;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.context-menu button:hover {
  background: var(--blue-dim);
  color: var(--blue);
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD MÉTHODE
═══════════════════════════════════════════════════════════ */

/* Dashboard — vue à onglets */
#db-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#db-tabbar {
  display: flex;
  gap: 2px;
  padding: 0 0 12px 0;
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 0;
}

.db-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 18px;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  margin-bottom: -1px;
}
.db-tab:hover { color: rgba(255,255,255,0.7); }
.db-tab.active { color: var(--orange); border-bottom-color: var(--orange); }

/* Filters bar */
.db-filters {
  padding: 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  font-size: 11px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  flex-shrink: 0;
}
.db-filters:empty { padding: 0; border: none; }
.db-filters select,
.db-filters input[type=date] {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  color: var(--text-dim);
  font-family: var(--font);
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 3px;
  outline: none;
}
.db-filters select:focus,
.db-filters input:focus { border-color: var(--blue); color: #fff; }
.db-filters label { font-size: 9px; color: var(--text-dim); letter-spacing: 0.1em; text-transform: uppercase; }

/* Body */
.db-body {
  flex: 1;
  overflow: auto;
  padding: 20px 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.db-body > * { width: 100%; max-width: 860px; }
.db-body svg { max-width: 100%; display: block; }

/* Empty state */
.db-empty {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text-dim);
  font-size: 11px;
  gap: 8px;
  opacity: 0.5;
}
.db-empty-icon { font-size: 28px; opacity: 0.4; }

/* Panel dashboard wrapper */
#panel-dashboard.active {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 148px);
  padding: 12px 0 0 0;
}

/* ── Popup action composant ── */
.comp-action-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; padding: 10px 14px; background: none; border: none;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: #fff; cursor: pointer; text-align: left;
  transition: background 0.12s;
}
.comp-action-btn:last-child { border-bottom: none; }
.comp-action-btn:hover { background: rgba(255,255,255,0.06); }
.comp-action-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; color: var(--blue); }
.comp-action-label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; }
.comp-action-sub { display: block; font-size: 10px; color: var(--text-dim); margin-top: 1px; }
.comp-cell.flash-ok { background: rgba(46,204,113,0.15); transition: background 0.3s; }

/* ── Date MEP éditable (mode méthode) ── */
.date-mep-edit-icon {
  opacity: 0;
  margin-left: 5px;
  font-size: 11px;
  color: var(--blue);
  cursor: pointer;
  transition: opacity 0.15s;
}
.date-mep-display:hover .date-mep-edit-icon { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   BANDEAU FERMETURE
══════════════════════════════════════════════════════════ */
.bandeau-fermeture {
  width: 100%;
  background: var(--red);
  color: #fff;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  padding: 8px 16px;
  z-index: 100;
}

/* ══════════════════════════════════════════════════════════
   HOME — LAYOUT
══════════════════════════════════════════════════════════ */
.home-layout {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
}
.home-section {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 36px 40px;
  width: 100%;
  max-width: 560px;
}
.home-section-title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--orange);
  margin-bottom: 24px;
  border-bottom: 1px solid rgba(243,156,18,0.2);
  padding-bottom: 10px;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════
   CALENDRIER
══════════════════════════════════════════════════════════ */
.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
}
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  margin-bottom: 18px;
}
.cal-day-header {
  text-align: center;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 4px 0;
}
.cal-day {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 600;
  cursor: default;
  position: relative;
  background: rgba(255,255,255,0.03);
  border: 1px solid transparent;
  transition: background 0.12s, border-color 0.12s;
  min-width: 48px;
  min-height: 48px;
  gap: 3px;
}
.cal-day.empty { background: transparent; border-color: transparent; }
.cal-day.past  { color: var(--muted); opacity: 0.5; }
.cal-day.today { border-color: var(--blue); color: var(--blue); }
.cal-day.clickable { cursor: pointer; }
.cal-day.clickable:hover { background: rgba(255,255,255,0.07); border-color: var(--border); }
.cal-day.ferie       { background: rgba(231,76,60,0.15); border-color: rgba(231,76,60,0.4); color: #E74C3C; }
.cal-day.conges      { background: rgba(243,156,18,0.15); border-color: rgba(243,156,18,0.4); color: var(--orange); }
.cal-day.exceptionnel { background: rgba(74,144,217,0.15); border-color: rgba(74,144,217,0.4); color: var(--blue); }
.cal-day-label {
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  max-width: 34px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

/* Légende */
.calendar-legend {
  display: flex;
  gap: 20px;
  margin-top: 4px;
  justify-content: center;
}
.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  color: var(--muted);
}
.cal-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.cal-dot.ferie        { background: #E74C3C; }
.cal-dot.conges       { background: var(--orange); }
.cal-dot.exceptionnel { background: var(--blue); }

/* HOME — ÉTAT DU PARC */
.home-parc-ok {
  color: var(--green);
  font-size: 13px;
  padding: 8px 0;
}
.home-parc-counts {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.home-count {
  font-size: 13px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 4px;
}
.home-count.urgent { background: rgba(231,76,60,0.15); color: #E74C3C; }
.home-count.alert  { background: rgba(230,126,34,0.15); color: var(--orange); }
.home-machine-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 12px;
}
.home-machine-nom { color: var(--text); }
.home-machine-badges { display: flex; gap: 6px; }
.home-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
}
.home-badge.urgent { background: #E74C3C; color: #fff; }
.home-badge.alert  { background: var(--orange); color: #fff; }