/* ============================================================
   Utilities — classes fonctionnelles réutilisables
   Remplacent tous les styles inline récurrents.
   ============================================================ */

/* ── Espacement ───────────────────────────────────────────── */
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }

.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }

.ms-sm  { margin-left: var(--space-sm); }
.ms-md  { margin-left: var(--space-md); }
.ms-lg  { margin-left: var(--space-lg); }

.me-sm  { margin-right: var(--space-sm); }
.me-md  { margin-right: var(--space-md); }

.p-sm   { padding: var(--space-sm); }
.p-md   { padding: var(--space-md); }
.p-lg   { padding: var(--space-lg); }

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

/* ── Flexbox ──────────────────────────────────────────────── */
.flex-col       { flex-direction: column; }
.flex-wrap      { flex-wrap: wrap; }
.flex-1         { flex: 1; }
.flex-2         { flex: 2; }
.align-center   { align-items: center; }
.align-start    { align-items: flex-start; }
.justify-center { justify-content: center; }
.justify-end    { justify-content: flex-end; }
.justify-between{ justify-content: space-between; }

.gap-xs  { gap: var(--space-xs); }
.gap-sm  { gap: var(--space-sm); }
.gap-md  { gap: var(--space-md); }
.gap-lg  { gap: var(--space-lg); }

/* ── Texte ────────────────────────────────────────────────── */
.text-xs     { font-size: .75rem; }
.text-sm     { font-size: .8rem; }
.text-md     { font-size: .875rem; }
.text-lg     { font-size: 1.05rem; }
.text-xl     { font-size: 1.25rem; }

.fw-400      { font-weight: 400; }
.fw-500      { font-weight: 500; }
.fw-600      { font-weight: 600; }
.fw-700      { font-weight: 700; }

.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }

.text-muted   { color: var(--text-muted); }
.text-light   { color: var(--text-light); }
.text-primary { color: var(--primary); }
.text-danger  { color: var(--danger); }
.text-success { color: var(--success); }

.text-nowrap  { white-space: nowrap; }
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Largeur ──────────────────────────────────────────────── */
.w-full   { width: 100%; }
.w-auto   { width: auto; }
.max-w-sm { max-width: 440px; }
.max-w-md { max-width: 640px; }
.max-w-lg { max-width: 800px; }

/* ── Visibilité responsive ────────────────────────────────── */
@media (max-width: 768px) {
    .hide-mobile { display: none; }
}
@media (min-width: 769px) {
    .hide-desktop { display: none; }
}