/* ============================================================
   UTILITIES – css/utilities/utilities.css
   Classes utilitaires réutilisables
   Préfixe : u-  pour distinguer des classes composants
   ============================================================ */

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

/* ── Flexbox helpers ────────────────────────────────────── */
.u-flex-center     { display: flex; align-items: center; justify-content: center; }
.u-flex-between    { display: flex; align-items: center; justify-content: space-between; }
.u-flex-wrap       { flex-wrap: wrap; }
.u-gap-sm          { gap: var(--space-4); }
.u-gap-md          { gap: var(--space-6); }
.u-gap-lg          { gap: var(--space-8); }

/* ── Espacement (margin / padding) ─────────────────────── */
.u-mt-auto         { margin-top: auto; }
.u-mb-0            { margin-bottom: 0 !important; }
.u-mt-sm           { margin-top: var(--space-4); }
.u-mt-md           { margin-top: var(--space-8); }
.u-mt-lg           { margin-top: var(--space-12); }
.u-mb-sm           { margin-bottom: var(--space-4); }
.u-mb-md           { margin-bottom: var(--space-8); }

/* ── Texte ──────────────────────────────────────────────── */
.u-text-center     { text-align: center; }
.u-text-left       { text-align: left; }
.u-text-right      { text-align: right; }
.u-truncate        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-break-word      { overflow-wrap: break-word; word-break: break-word; }

/* ── Couleurs rapides ───────────────────────────────────── */
.u-bg-primary      { background-color: var(--clr-primary); }
.u-bg-subtle       { background-color: var(--clr-bg-subtle); }
.u-text-white      { color: var(--clr-text-inverse); }

/* ── Position ───────────────────────────────────────────── */
.u-relative        { position: relative; }
.u-absolute        { position: absolute; }
.u-sticky          { position: sticky; top: 0; z-index: var(--z-sticky); }

/* ── Width / Height ─────────────────────────────────────── */
.u-w-full          { width: 100%; }
.u-h-full          { height: 100%; }
.u-min-h-screen    { min-height: 100vh; }

/* ── Overflow ───────────────────────────────────────────── */
.u-overflow-hidden { overflow: hidden; }

/* ── Responsive visibility ──────────────────────────────── */
@media (max-width: 767px) {
  .u-hide-mobile { display: none !important; }
}
@media (min-width: 768px) {
  .u-hide-tablet-up { display: none !important; }
}
@media (min-width: 1280px) {
  .u-hide-desktop { display: none !important; }
}

/* ── Séparateur décoratif ───────────────────────────────── */
.u-divider {
  width: 48px;
  height: 2px;
  background: var(--clr-accent);
  margin: var(--space-6) 0;
}

.u-divider--center { margin-inline: auto; }