/* ═══ Base du composant (règles communes) ; les variantes V2 suivent ═══ */
/* ─── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 16px;
}

/* ─── Main content ───────────────────────────────────────── */
.main {
  padding: 16px 0 calc(72px + env(safe-area-inset-bottom)); /* bottom nav + iPhone home indicator */
}

/* ── Container = page card blanche (mobile + desktop) ────── */
.main > .container {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  overflow: hidden;
  padding: 0 16px 24px;
  min-height: calc(100vh - 160px);
}

/* Mobile : petite marge pour ne pas toucher les bords */

@media (max-width: 680px) {
  .main:not(.main--auth) > .container:not(.container--card) {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
    width: 100%;
  }

}

.section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
}

.section-header__content {
  min-width: 0;
}

.section-header__title {
  color: var(--color-text);
  font-size: var(--text-lg);
  font-weight: 620;
  line-height: 1.3;
  margin: 0;
}

@media (max-width: 640px) {

  .section-header {
    align-items: stretch;
    flex-direction: column;
  }
}