/* ============================================================
   UTILITIES.CSS — Classes utilitaires atomiques
   Dépend de : tokens.css
   ============================================================ */

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

/* ── Flex ── */
.flex-center   { display: flex; align-items: center; justify-content: center; }
.flex-between  { display: flex; align-items: center; justify-content: space-between; }
.flex-col      { flex-direction: column; }
.flex-wrap     { flex-wrap: wrap; }
.flex-1        { flex: 1; }
.gap-1         { gap: var(--space-1); }
.gap-2         { gap: var(--space-2); }
.gap-3         { gap: var(--space-3); }
.gap-4         { gap: var(--space-4); }

/* ── Spacing ── */
.mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); }
.mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); }
.p-0  { padding: 0; } .p-2 { padding: var(--space-2); } .p-4 { padding: var(--space-4); }

/* ── Text ── */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-base   { font-size: var(--text-base); }
.text-md     { font-size: var(--text-md); }
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-muted  { color: var(--color-text-muted); }
.text-faint  { color: var(--color-text-faint); }
.text-brand  { color: var(--color-brand); }
.text-danger { color: var(--color-danger); }
.text-warning{ color: var(--color-warning); }
.font-bold   { font-weight: var(--fw-bold); }
.font-medium { font-weight: var(--fw-medium); }
.truncate    { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Colors ── */
.bg-card     { background: var(--color-bg-card); }
.bg-sunken   { background: var(--color-bg-sunken); }
.bg-brand    { background: var(--color-brand); }

/* ── Borders ── */
.rounded-sm  { border-radius: var(--radius-sm); }
.rounded-md  { border-radius: var(--radius-md); }
.rounded-lg  { border-radius: var(--radius-lg); }
.rounded-full{ border-radius: var(--radius-full); }
.border      { border: 0.5px solid var(--color-border-default); }

/* ── SR only (accessibilité) ── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ── Transition ── */
.transition { transition: var(--transition-base); }