/* =========================
   06-utilities.css
   Small utilities (helpers)
========================= */

/* Visibility / display */
.u-hidden{ display:none !important; }
.u-visually-hidden,
.sr-only{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:-1px !important;
  overflow:hidden !important;
  clip:rect(0,0,0,0) !important;
  white-space:nowrap !important;
  border:0 !important;
}

.u-block{ display:block !important; }
.u-inline{ display:inline !important; }
.u-inline-block{ display:inline-block !important; }
.u-flex{ display:flex !important; }
.u-grid{ display:grid !important; }

/* Text alignment */
.u-center{ text-align:center !important; }
.u-left{ text-align:left !important; }
.u-right{ text-align:right !important; }

/* Flex helpers */
.u-items-center{ align-items:center !important; }
.u-items-start{ align-items:flex-start !important; }
.u-items-stretch{ align-items:stretch !important; }
.u-justify-center{ justify-content:center !important; }
.u-justify-between{ justify-content:space-between !important; }
.u-justify-end{ justify-content:flex-end !important; }
.u-gap-6{ gap:6px !important; }
.u-gap-8{ gap:8px !important; }
.u-gap-10{ gap:10px !important; }
.u-gap-12{ gap:12px !important; }
.u-gap-16{ gap:16px !important; }

/* Spacing – margin top */
.u-mt-0{ margin-top:0 !important; }
.u-mt-8{ margin-top:8px !important; }
.u-mt-12{ margin-top:12px !important; }
.u-mt-16{ margin-top:16px !important; }
.u-mt-24{ margin-top:24px !important; }
.u-mt-32{ margin-top:32px !important; }

/* Spacing – margin bottom */
.u-mb-0{ margin-bottom:0 !important; }
.u-mb-8{ margin-bottom:8px !important; }
.u-mb-12{ margin-bottom:12px !important; }
.u-mb-16{ margin-bottom:16px !important; }
.u-mb-24{ margin-bottom:24px !important; }
.u-mb-32{ margin-bottom:32px !important; }

/* Spacing – margin left/right */
.u-ml-auto{ margin-left:auto !important; }
.u-mr-auto{ margin-right:auto !important; }
.u-ml-8{ margin-left:8px !important; }
.u-mr-8{ margin-right:8px !important; }

/* Spacing – padding */
.u-p-0{ padding:0 !important; }
.u-p-8{ padding:8px !important; }
.u-p-12{ padding:12px !important; }
.u-p-16{ padding:16px !important; }
.u-p-18{ padding:18px !important; }
.u-p-24{ padding:24px !important; }

.u-pt-8{ padding-top:8px !important; }
.u-pt-12{ padding-top:12px !important; }
.u-pt-16{ padding-top:16px !important; }
.u-pb-8{ padding-bottom:8px !important; }
.u-pb-12{ padding-bottom:12px !important; }
.u-pb-16{ padding-bottom:16px !important; }

/* Width / sizing */
.u-w-100{ width:100% !important; }
.u-h-100{ height:100% !important; }
.u-maxw-420{ max-width:420px !important; }
.u-maxw-520{ max-width:520px !important; }
.u-maxw-720{ max-width:720px !important; }

/* Radius */
.u-radius-12{ border-radius:12px !important; }
.u-radius-14{ border-radius:14px !important; }
.u-radius-16{ border-radius:16px !important; }
.u-radius-18{ border-radius:18px !important; }
.u-radius-22{ border-radius:22px !important; }
.u-pill{ border-radius:999px !important; }

/* Shadows */
.u-shadow{ box-shadow: var(--shadow) !important; }
.u-shadow2{ box-shadow: var(--shadow2) !important; }
.u-shadow-none{ box-shadow:none !important; }

/* Borders */
.u-border{ border:1px solid var(--border) !important; }
.u-border-0{ border:0 !important; }

/* Backgrounds */
.u-bg-surface{ background: var(--surface) !important; }
.u-bg-glass{ background: var(--surfaceGlass) !important; }

/* Text colors */
.u-muted{ color: var(--muted) !important; }
.u-text{ color: var(--text) !important; }

/* Truncation */
.u-truncate{
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}
.u-clamp-2{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:2 !important;
  overflow:hidden !important;
}
.u-clamp-3{
  display:-webkit-box !important;
  -webkit-box-orient:vertical !important;
  -webkit-line-clamp:3 !important;
  overflow:hidden !important;
}

/* Focus ring (accessible + cohérent) */
.u-focus-ring:focus{
  outline:none !important;
  box-shadow: 0 0 0 4px rgba(53,200,74,.12) !important;
  border-color: rgba(53,200,74,.40) !important;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .u-no-motion,
  .u-no-motion *{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}