/* ════════════════════════════════════════════════════════════════════
   33 LAB — UTILITIES
   Helpers atomiques. Charger en dernier.
   ════════════════════════════════════════════════════════════════════ */

/* ─── DISPLAY ───────────────────────────────────────────────────── */
.hidden       { display: none !important; }
.block        { display: block; }
.inline-block { display: inline-block; }
.flex         { display: flex; }
.inline-flex  { display: inline-flex; }
.grid         { display: grid; }

/* ─── TEXT ──────────────────────────────────────────────────────── */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

.text-amber   { color: var(--amber-on-dark); }
.text-muted   { color: var(--text-muted); }
.text-subtle  { color: var(--text-subtle); }

.font-display { font-family: var(--font-display); }
.font-body    { font-family: var(--font-body); }

.uppercase    { text-transform: uppercase; }
.tracking-wider { letter-spacing: var(--tracking-wider); }

/* ─── SPACING ──────────────────────────────────────────────────── */
.mt-0 { margin-top: 0; }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }

.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* ─── FLEX ─────────────────────────────────────────────────────── */
.items-center  { align-items: center; }
.items-start   { align-items: flex-start; }
.items-end     { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

/* ─── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  .hidden-mobile { display: none !important; }
}
@media (min-width: 769px) {
  .hidden-desktop { display: none !important; }
}