/*
 * ASCEP74 — Système de classes utilitaires
 *
 * Règles :
 *  1. Toutes les valeurs proviennent de tokens.css — jamais de valeurs arbitraires
 *  2. Préfixe u- pour éviter les conflits avec les classes composants
 *  3. Le système est FERMÉ : n'ajoute pas de nouvelles classes sans ajouter le token correspondant
 *
 * Index :
 *   - Display & Visibilité
 *   - Flexbox
 *   - Grid
 *   - Gap
 *   - Margin
 *   - Padding
 *   - Largeur & Max-width
 *   - Typographie
 *   - Couleurs texte
 *   - Couleurs fond
 *   - Bordures & Formes
 *   - Overflow & Object-fit
 *   - Divers
 *   - Responsive overrides
 */

/* ─── Display & Visibilité ───────────────────────── */

.u-block         { display: block }
.u-flex          { display: flex }
.u-grid          { display: grid }
.u-inline-flex   { display: inline-flex }
.u-hidden        { display: none }

/* ─── Flexbox ─────────────────────────────────────── */

.u-flex-col      { flex-direction: column }
.u-flex-wrap     { flex-wrap: wrap }
.u-flex-nowrap   { flex-wrap: nowrap }
.u-items-start   { align-items: flex-start }
.u-items-center  { align-items: center }
.u-items-end     { align-items: flex-end }
.u-justify-start    { justify-content: flex-start }
.u-justify-center   { justify-content: center }
.u-justify-between  { justify-content: space-between }
.u-justify-end      { justify-content: flex-end }
.u-self-start    { align-self: flex-start }
.u-self-center   { align-self: center }
.u-shrink-0      { flex-shrink: 0 }
.u-grow          { flex-grow: 1 }

/* ─── Grid ────────────────────────────────────────── */

.u-cols-2   { grid-template-columns: repeat(2, 1fr) }
.u-cols-3   { grid-template-columns: repeat(3, 1fr) }
.u-cols-4   { grid-template-columns: repeat(4, 1fr) }
.u-cols-auto-sm  { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.u-cols-auto-md  { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) }
.u-cols-auto-lg  { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)) }
.u-col-span-2    { grid-column: span 2 }

/* ─── Gap ─────────────────────────────────────────── */

.u-gap-2   { gap: var(--space-2) }
.u-gap-3   { gap: var(--space-3) }
.u-gap-4   { gap: var(--space-4) }
.u-gap-6   { gap: var(--space-6) }
.u-gap-8   { gap: var(--space-8) }
.u-gap-10  { gap: var(--space-10) }
.u-gap-12  { gap: var(--space-12) }

/* ─── Margin ──────────────────────────────────────── */

.u-mx-auto { margin-left: auto; margin-right: auto }

.u-mt-2  { margin-top: var(--space-2) }
.u-mt-3  { margin-top: var(--space-3) }
.u-mt-4  { margin-top: var(--space-4) }
.u-mt-6  { margin-top: var(--space-6) }
.u-mt-8  { margin-top: var(--space-8) }
.u-mt-10 { margin-top: var(--space-10) }
.u-mt-12 { margin-top: var(--space-12) }
.u-mt-16 { margin-top: var(--space-16) }

.u-mb-2  { margin-bottom: var(--space-2) }
.u-mb-3  { margin-bottom: var(--space-3) }
.u-mb-4  { margin-bottom: var(--space-4) }
.u-mb-6  { margin-bottom: var(--space-6) }
.u-mb-8  { margin-bottom: var(--space-8) }
.u-mb-10 { margin-bottom: var(--space-10) }
.u-mb-12 { margin-bottom: var(--space-12) }

/* ─── Padding ─────────────────────────────────────── */

.u-p-4   { padding: var(--space-4) }
.u-p-6   { padding: var(--space-6) }
.u-p-8   { padding: var(--space-8) }
.u-p-10  { padding: var(--space-10) }

.u-px-4  { padding-left: var(--space-4); padding-right: var(--space-4) }
.u-px-6  { padding-left: var(--space-6); padding-right: var(--space-6) }
.u-px-8  { padding-left: var(--space-8); padding-right: var(--space-8) }

.u-py-4  { padding-top: var(--space-4); padding-bottom: var(--space-4) }
.u-py-6  { padding-top: var(--space-6); padding-bottom: var(--space-6) }
.u-py-8  { padding-top: var(--space-8); padding-bottom: var(--space-8) }
.u-py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12) }
.u-py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16) }
.u-py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20) }

/* ─── Largeur & Max-width ─────────────────────────── */

.u-w-full    { width: 100% }
.u-max-w-xs  { max-width: 360px;  margin-left: auto; margin-right: auto }
.u-max-w-sm  { max-width: 480px;  margin-left: auto; margin-right: auto }
.u-max-w-md  { max-width: 640px;  margin-left: auto; margin-right: auto }
.u-max-w-lg  { max-width: 800px;  margin-left: auto; margin-right: auto }
.u-max-w-xl  { max-width: 960px;  margin-left: auto; margin-right: auto }
.u-max-w-2xl { max-width: 1120px; margin-left: auto; margin-right: auto }

/* ─── Typographie ─────────────────────────────────── */

.u-font-heading { font-family: var(--font-heading) }
.u-font-body    { font-family: var(--font-body) }

.u-text-xs   { font-size: var(--text-xs);   line-height: var(--leading-normal) }
.u-text-sm   { font-size: var(--text-sm);   line-height: var(--leading-normal) }
.u-text-base { font-size: var(--text-base); line-height: var(--leading-normal) }
.u-text-lg   { font-size: var(--text-lg);   line-height: var(--leading-snug) }
.u-text-xl   { font-size: var(--text-xl);   line-height: var(--leading-snug) }
.u-text-2xl  { font-size: var(--text-2xl);  line-height: var(--leading-snug) }
.u-text-3xl  { font-size: var(--text-3xl);  line-height: var(--leading-tight) }
.u-text-4xl  { font-size: var(--text-4xl);  line-height: var(--leading-tight) }
.u-text-5xl  { font-size: var(--text-5xl);  line-height: var(--leading-tight) }

.u-weight-normal   { font-weight: var(--weight-normal) }
.u-weight-medium   { font-weight: var(--weight-medium) }
.u-weight-semibold { font-weight: var(--weight-semibold) }
.u-weight-bold     { font-weight: var(--weight-bold) }

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

.u-tracking-wide  { letter-spacing: var(--tracking-wide) }
.u-tracking-wider { letter-spacing: var(--tracking-wider) }
.u-uppercase      { text-transform: uppercase }
.u-no-underline   { text-decoration: none }

/* ─── Couleurs texte ──────────────────────────────── */

.u-text-ink      { color: var(--c-ink) }
.u-text-mid      { color: var(--c-ink-mid) }
.u-text-muted    { color: var(--c-muted) }
.u-text-accent   { color: var(--c-accent) }
.u-text-sage     { color: var(--c-sage) }
.u-text-white    { color: #fff }
.u-text-error    { color: var(--c-error) }
.u-text-success  { color: var(--c-success) }

/* ─── Couleurs fond ───────────────────────────────── */

.u-bg-page     { background-color: var(--c-bg) }
.u-bg-surface  { background-color: var(--c-surface) }
.u-bg-raised   { background-color: var(--c-raised) }
.u-bg-accent   { background-color: var(--c-accent) }
.u-bg-accent-dim { background-color: var(--c-accent-dim) }
.u-bg-sage     { background-color: var(--c-sage) }
.u-bg-sage-dim { background-color: var(--c-sage-dim) }
.u-bg-ink      { background-color: var(--c-ink) }

/* ─── Bordures & Formes ───────────────────────────── */

.u-border         { border: 1px solid var(--c-border) }
.u-border-t       { border-top: 1px solid var(--c-border) }
.u-border-b       { border-bottom: 1px solid var(--c-border) }
.u-border-accent  { border-color: var(--c-accent) }

.u-rounded-sm   { border-radius: var(--radius-sm) }
.u-rounded      { border-radius: var(--radius) }
.u-rounded-md   { border-radius: var(--radius-md) }
.u-rounded-lg   { border-radius: var(--radius-lg) }
.u-rounded-full { border-radius: var(--radius-full) }

/* ─── Ombres ──────────────────────────────────────── */

.u-shadow-xs { box-shadow: var(--shadow-xs) }
.u-shadow-sm { box-shadow: var(--shadow-sm) }
.u-shadow    { box-shadow: var(--shadow) }
.u-shadow-md { box-shadow: var(--shadow-md) }

/* ─── Overflow & Object-fit ───────────────────────── */

.u-overflow-hidden { overflow: hidden }
.u-object-cover    { object-fit: cover; width: 100%; height: 100%; display: block }

/* ─── Opacité ─────────────────────────────────────── */

.u-opacity-70 { opacity: 0.7 }
.u-opacity-80 { opacity: 0.8 }
.u-opacity-90 { opacity: 0.9 }

/* ─── Divers ──────────────────────────────────────── */

.u-relative  { position: relative }
.u-absolute  { position: absolute }

/* ─── Responsive overrides ────────────────────────── */
/* Seuil unique : 768px (mobile) */

@media (max-width: 768px) {
  .u-sm-flex-col   { flex-direction: column }
  .u-sm-cols-1     { grid-template-columns: 1fr }
  .u-sm-text-center { text-align: center }
  .u-sm-w-full     { width: 100% }
  .u-sm-hidden     { display: none }
  .u-sm-block      { display: block }
}

@media (min-width: 769px) {
  .u-md-cols-2     { grid-template-columns: repeat(2, 1fr) }
  .u-md-flex-row   { flex-direction: row }
}