/* ============================================================
   UTILITIES SYSTEM v5.0 — JSL Distribution
   - Helpers réutilisables (CSP-friendly)
   - Pas de layout global ni de styles composants “métier”
   ============================================================ */

/* --- Spacing --- */
.u-mt-0 { margin-top: 0; }
.u-mt-6 { margin-top: 6px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-10 { margin-top: 10px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-14 { margin-top: 14px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-my-10 { margin-top: 10px; margin-bottom: 10px; }
.u-my-12 { margin-top: 12px; margin-bottom: 12px; }
.u-mb-6 { margin-bottom: 6px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-10 { margin-bottom: 10px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-14 { margin-bottom: 14px; }
.u-mx-8 { margin-left: 8px; margin-right: 8px; }
.u-mr-6 { margin-right: 6px; }
.u-ml-8 { margin-left: 8px; }
.u-ml-6 { margin-left: 6px; }
.u-m-0 { margin: 0; }
.u-ml-auto { margin-left: auto; }

/* --- Text / opacity --- */
.u-opacity-85 { opacity: 0.85; }
.u-text-accent { color: #2563eb; }
.u-text-danger { color: #be123c; }
.u-pre-wrap { white-space: pre-wrap; }
.u-break-all { word-break: break-all; }
.u-break-word { word-break: break-word; }
.u-text-right { text-align: right; }
.u-text-center { text-align: center; }
.u-text-left { text-align: left; }
.u-nowrap { white-space: nowrap; }
.u-whitespace-normal { white-space: normal; }
.u-font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.u-fs-12 { font-size: 12px; }
.u-fs-18 { font-size: 18px; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }

/* --- Row helpers --- */
.u-actions-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 10px;
}

/* --- Display / layout micro-helpers --- */
.u-inline { display: inline; }
.u-inline-block { display: inline-block; }
.u-inline-flex { display: inline-flex; }
.u-flex { display: flex; }
.u-block { display: block; }
.u-flex-wrap { flex-wrap: wrap; }
.u-items-center { align-items: center; }
.u-align-end { align-items: flex-end; }
.u-self-end { align-self: flex-end; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }
.u-justify-center { justify-content: center; }
.u-justify-end { justify-content: flex-end; }
.u-justify-start { justify-content: flex-start; }
.u-flex-1 { flex: 1; }
.u-flex-1-360 { flex: 1 1 360px; }
.u-flex-1-420 { flex: 1 1 420px; }

/* --- Width helpers (controlled) --- */
.u-maxw-110 { max-width: 6.875rem; } /* 110px */
.u-maxw-120 { max-width: 7.5rem; } /* 120px */
.u-maxw-140 { max-width: 8.75rem; } /* 140px */
.u-maxw-160 { max-width: 10rem; } /* 160px */
.u-maxw-220 { max-width: 13.75rem; } /* 220px */
.u-maxw-240 { max-width: 15rem; } /* 240px */
.u-maxw-280 { max-width: 17.5rem; } /* 280px */
.u-maxw-320 { max-width: 20rem; } /* 320px */
.u-maxw-340 { max-width: 21.25rem; } /* 340px */
.u-maxw-360 { max-width: 22.5rem; } /* 360px */
.u-maxw-420 { max-width: 26.25rem; } /* 420px */
.u-maxw-520 { max-width: 32.5rem; } /* 520px */
.u-minw-180 { min-width: 11.25rem; } /* 180px */
.u-minw-220 { min-width: 13.75rem; } /* 220px */
.u-minw-240 { min-width: 15rem; } /* 240px */
.u-minw-260 { min-width: 16.25rem; } /* 260px */
.u-minw-320 { min-width: 20rem; } /* 320px */
.u-w-100 { width: 100%; }
.u-w-120 { width: 7.5rem; } /* 120px */
.u-w-160 { width: 10rem; } /* 160px */
.u-w-180 { width: 11.25rem; } /* 180px */
.u-w-190 { width: 11.875rem; } /* 190px */
.u-w-220 { width: 13.75rem; } /* 220px */
.u-w-260 { width: 16.25rem; } /* 260px */
.u-hidden { display: none !important; }
.u-border-0 { border: 0; }
.u-border-top-0 { border-top: 0; }
.u-pt-0 { padding-top: 0; }
.u-h-70vh { height: 70vh; }
.u-h-220 { height: 13.75rem; } /* 220px */
.u-touch-none { touch-action: none; }
.u-pt-24 { padding-top: 24px; }
.u-my-18 { margin-top: 18px; margin-bottom: 18px; }
.u-ml-18 { margin-left: 18px; }
.u-border-left-danger { border-left-color: #b42318 !important; }

/* --- Media helpers --- */
.u-rounded-full { border-radius: 999px; }
.u-object-cover { object-fit: cover; }
.u-size-40 { width: 2.5rem; height: 2.5rem; } /* 40px */
.u-size-44 { width: 2.75rem; height: 2.75rem; } /* 44px */
.u-w-54 { width: 3.375rem; } /* 54px */

/* --- Panels / previews --- */
.u-panel {
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 12px;
  padding: 10px;
}
.u-panel-sm {
  border-radius: 10px;
  padding: 8px;
}
.u-panel-xs {
  border-radius: 8px;
  padding: 6px;
}

.u-avatar-initials {
  width: 2.5rem; /* 40px */
  height: 2.5rem; /* 40px */
  border-radius: 999px;
  background: #eef2ff;
  color: #1f2a44;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

.u-frame {
  border: 1px solid color-mix(in srgb, var(--border-strong) 80%, transparent);
  border-radius: 8px;
  overflow: hidden;
}
.u-preview-frame {
  width: 100%;
  height: 70vh;
  border: 0;
}