/* ============================================================
   LAYOUT — structure haut niveau.
   ============================================================ */

.app {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: var(--header-height) auto 1fr;
}

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--border);
}

.app-header__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}
.brand__mark {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-tight);
}
.brand__sub {
  font-size: var(--fs-xs);
  color: var(--text-subtle);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

/* ---------- Nav tabs ---------- */
.app-tabs {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  scrollbar-width: none;
}
.app-tabs::-webkit-scrollbar { display: none; }

.app-tabs__inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  display: flex;
  gap: var(--sp-1);
}

/* ---------- Main ---------- */
.app-main {
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6) var(--sp-16);
}

.view {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
  animation: fade-up var(--dur-slow) var(--ease);
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Sections ---------- */
.section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.section__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semi);
}

.section__hint {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

/* ---------- Grilles ---------- */
.grid-kpis {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid-2 {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Responsive */
@media (max-width: 920px) {
  .grid-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-2    { grid-template-columns: 1fr; }
  .app-header__inner,
  .app-tabs__inner,
  .app-main { padding-left: var(--sp-4); padding-right: var(--sp-4); }
}

@media (max-width: 560px) {
  .grid-kpis { grid-template-columns: 1fr; }
  .app-main  { padding-top: var(--sp-5); padding-bottom: var(--sp-10); }
}