/* ─── Squelette principal ─────────────────────────────────────── */
body {
  background: var(--bg-app);
  min-height: 100vh;
}

/* ─── Header ─────────────────────────────────────────────────── */
.app-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  background: var(--bg-header);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-6);
  z-index: 100;
  box-shadow: var(--shadow-md);
}

.header-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: var(--font-semibold);
  font-size: var(--text-base);
  letter-spacing: .02em;
  white-space: nowrap;
}

.brand-icon {
  font-size: var(--text-xl);
  color: var(--color-accent);
}

.header-project {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-left: var(--sp-4);
  padding: var(--sp-1) var(--sp-3);
  background: rgba(255,255,255,.07);
  border-radius: var(--border-radius-sm);
  font-size: var(--text-sm);
  min-width: 180px;
}

.project-label {
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.project-ref { color: var(--color-accent); font-weight: var(--font-semibold); }

.header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

/* ─── Main — 3 colonnes ──────────────────────────────────────── */
.app-main {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: var(--footer-h);
  display: grid;
  grid-template-columns: var(--col-left-w) 1fr var(--col-right-w);
  gap: var(--sp-4);
  padding: var(--sp-4);
  overflow: hidden;
  background: var(--bg-app);
}

.col {
  min-height: 0;            /* CRITIQUE : permet l'overflow-y dans un grid */
  overflow-y: scroll;       /* scrollbar toujours visible */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  scrollbar-width: thin;
  scrollbar-color: rgba(200,121,65,.45) transparent;
  padding-right: var(--sp-1);
}

/* Les cartes ne doivent PAS se comprimer — sinon elles coupent
   leur contenu au lieu de laisser la colonne scroller */
.col > * {
  flex-shrink: 0;
}
.col::-webkit-scrollbar { width: 6px; }
.col::-webkit-scrollbar-thumb {
  background: rgba(200,121,65,.35);
  border-radius: 3px;
}
.col::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}
.col::-webkit-scrollbar-track { background: transparent; }

/* ─── Footer fixe ────────────────────────────────────────────── */
.app-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: var(--footer-h);
  background: var(--bg-footer);
  color: var(--text-inverse);
  display: flex;
  align-items: center;
  padding: 0 var(--sp-6);
  z-index: 100;
  box-shadow: 0 -2px 12px rgba(0,0,0,.3);
}

.footer-totals {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  flex: 1;
  flex-wrap: wrap;
}

.footer-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.footer-item-label {
  font-size: var(--text-xs);
  color: rgba(255,255,255,.5);
  text-transform: uppercase;
  letter-spacing: .06em;
}

.footer-item-value {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-inverse);
}

.footer-item-value.accent { color: var(--color-accent); }

.footer-total-ttc .footer-item-value {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--color-accent);
}

.footer-sep {
  width: 1px;
  height: 32px;
  background: rgba(255,255,255,.12);
}

.footer-actions {
  display: flex;
  gap: var(--sp-2);
  margin-left: auto;
}