/**
 * ═══════════════════════════════════════════════════════════════
 * STYLES : layout.css
 * RÔLE   : Conteneurs, grilles, helpers flex, structure mobile-first
 * SCOPE  : global · DÉPS : tokens.css
 * @project Caroteck · @signature TECHNOTECK ♥ POWER — Pour Caro Annie
 * ═══════════════════════════════════════════════════════════════
 */
#app { min-height: 100%; max-width: var(--max-width-mobile); margin: 0 auto; position: relative; }
.app-header {
  height: var(--header-height); display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--space-md);
  position: sticky; top: 0; z-index: var(--z-sticky); background: var(--bg-primary);
  border-bottom: 1px solid var(--border);
}
.app-main { padding: var(--space-md); padding-bottom: calc(var(--tabbar-height) + var(--safe-area-bottom) + var(--space-md)); }
.tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--max-width-mobile); height: var(--tabbar-height);
  display: flex; background: var(--bg-secondary); border-top: 1px solid var(--border);
  padding-bottom: var(--safe-area-bottom); z-index: var(--z-sticky);
}
.row { display: flex; gap: var(--space-md); }
.col { display: flex; flex-direction: column; gap: var(--space-md); }
.between { justify-content: space-between; }
.center { align-items: center; justify-content: center; }
.stack-sm { display: flex; flex-direction: column; gap: var(--space-sm); }