/* ====== HEADER ====== */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--sp-xl);
  background: var(--primary);
  border-bottom: none;
  box-shadow: var(--shadow-md);
  position: relative;
  z-index: 100;
}

.app-logo {
  display: flex;
  align-items: center;
  gap: var(--sp-md);
}

.app-logo h1 {
  font-size: var(--fs-lg);
  color: #FFFFFF;
  letter-spacing: 0.5px;
}

.app-logo .icon {
  filter: brightness(0) invert(1);
}

/* Robot activé quand données chargées */
.app-logo.has-data img {
  filter: brightness(0) saturate(100%) invert(76%) sepia(53%) saturate(567%) hue-rotate(28deg) brightness(97%) contrast(87%);
  animation: robot-pulse 0.6s ease;
}

@keyframes robot-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.2); }
  100% { transform: scale(1); }
}

.btn-lang {
  width: 27px;
  height: 27px;
  border: 1px solid #fff;
  background: transparent;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.btn-lang:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ====== NAVIGATION ONGLETS ====== */
.tab-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  height: 100%;
}

.tab-btn {
  display: flex;
  align-items: center;
  gap: var(--sp-sm);
  padding: var(--sp-sm) var(--sp-lg);
  height: 100%;
  font-size: var(--fs-base);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 4px solid transparent;
  transition: all var(--transition);
  position: relative;
}

.tab-btn .icon {
  filter: brightness(0) invert(1);
  opacity: 0.9;
  transition: opacity var(--transition);
}

.tab-btn:hover {
  color: rgba(255, 255, 255, 1);
  background: rgba(255, 255, 255, 0.08);
}

.tab-btn:hover .icon {
  opacity: 0.9;
}

.tab-btn.active {
  color: var(--secondary);
  border-bottom-color: var(--secondary);
}

.tab-btn.active .icon {
  opacity: 1;
  filter: brightness(0) saturate(100%) invert(78%) sepia(60%) saturate(500%) hue-rotate(20deg);
}

/* ====== MAIN ====== */
.app-main {
  height: calc(100vh - var(--header-height));
  overflow: hidden;
  position: relative;
}

/* ====== PANNEAUX ====== */
.tab-panel {
  display: none;
  height: 100%;
  overflow-y: auto;
  animation: fadeIn 0.25s ease;
}

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

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