/* ============================================
   Thème enalpin (repris de la webapp iframe)
   ============================================ */
:root {
  --tuerkis-1: #31B7BC;
  --tuerkis-2: #009EAE;
  --tuerkis-3: #027A90;
  --dunkelblau: #00354E;
  --gelb: #FBBB21;
  --orange: #EC6626;
  --grau-1: #F2F4F6;
  --grau-2: #DFEBEC;
  --grau-3: #99A4AB;
  --grau-4: #6C7A81;
  --grau-5: #2A363B;
  --white: #FFFFFF;

  --max-width: 1240px;
  --navbar-height: 64px;
  --radius: 10px;
  --shadow: 0 1px 3px rgba(0, 53, 78, 0.08), 0 4px 16px rgba(0, 53, 78, 0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--grau-1);
  color: var(--grau-5);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================================
   Navbar
   ============================================ */
nav.navbar {
  background: var(--dunkelblau);
  height: var(--navbar-height);
  display: flex;
  align-items: center;
  justify-content: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 1px 4px rgba(0, 53, 78, 0.15);
}
nav .nav-inner {
  max-width: var(--max-width);
  width: 100%;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 32px;
}
nav .brand {
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
nav .brand .accent { color: var(--tuerkis-1); }
nav ul { list-style: none; display: flex; gap: 4px; flex: 1; }
nav ul li button {
  background: transparent;
  border: none;
  color: var(--white);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
}
nav ul li button:hover {
  color: var(--tuerkis-1);
  background: rgba(49, 183, 188, 0.08);
}
nav ul li button.active {
  color: var(--dunkelblau);
  background: var(--tuerkis-1);
}
nav .meta {
  color: var(--grau-3);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
#lang {
  display: flex;
  gap: 2px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 6px;
  padding: 2px;
}
#lang button {
  background: transparent;
  border: none;
  color: var(--grau-3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s ease;
}
#lang button:hover { color: var(--white); }
#lang button.active {
  color: var(--dunkelblau);
  background: var(--tuerkis-1);
}

/* ============================================
   Bandeau titre
   ============================================ */
header.page-header {
  background: var(--dunkelblau);
  color: var(--white);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
header.page-header .inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
}
header.page-header h1 { font-size: 17px; font-weight: 600; }
header.page-header h1 .subtitle {
  color: var(--tuerkis-1);
  font-weight: 400;
  margin-left: 8px;
  font-size: 14px;
}
header.page-header .right { text-align: right; }
header.page-header .right .label {
  font-size: 9px;
  font-weight: 600;
  color: var(--grau-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
header.page-header .right .value { font-size: 13px; font-weight: 500; }

/* ============================================
   Contenu
   ============================================ */
main {
  flex: 1;
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 20px 24px 32px;
}

/* KPIs */
.kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}
.kpi {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 3px solid var(--tuerkis-1);
}
.kpi-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grau-4);
}
.kpi-value {
  font-size: 26px;
  font-weight: 700;
  color: var(--dunkelblau);
  font-variant-numeric: tabular-nums;
}
.kpi-sub { font-size: 11px; color: var(--grau-3); }

/* Onglets */
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Grille de cartes */
.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 18px 8px;
  min-width: 0;
  position: relative;
}
.card.span-2 { grid-column: span 2; }
.card h2 {
  font-size: 13px;
  font-weight: 600;
  color: var(--dunkelblau);
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}
.chart { width: 100%; height: 300px; }
.chart.tall { height: 380px; }

.card .card-error {
  position: absolute;
  inset: 40px 18px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.9);
  color: var(--grau-4);
  font-size: 13px;
  border-radius: 6px;
}

/* ============================================
   Footer
   ============================================ */
footer.app-footer {
  background: var(--dunkelblau);
  color: var(--grau-3);
  font-size: 11px;
  padding: 12px 24px;
  text-align: center;
  letter-spacing: 0.05em;
}
footer.app-footer .accent { color: var(--tuerkis-1); }

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 900px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .grid { grid-template-columns: 1fr; }
  .card.span-2 { grid-column: span 1; }
}
@media (max-width: 768px) {
  nav .nav-inner { gap: 16px; padding: 0 12px; }
  nav .brand { font-size: 12px; }
  nav ul { gap: 2px; flex-wrap: wrap; }
  nav ul li button { padding: 6px 10px; font-size: 12px; }
  nav .meta { display: none; }
  header.page-header .inner { padding: 12px; flex-direction: column; gap: 6px; }
  header.page-header .right { text-align: left; }
  main { padding: 14px 12px 24px; }
  .chart { height: 260px; }
  .chart.tall { height: 300px; }
}