/* ═══════════════════════════════════════════════════════════════
   91STUDIO — UTILITAIRES CSS v1.1.0 (Apple HIG)
   Classes utilitaires : gaps, paddings, texte, display, responsive
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. GAPS (Espacement entre éléments flex/grid)
   ─────────────────────────────────────────── */
.gap-xs  { gap: var(--spacing-xs); }
.gap-sm  { gap: var(--spacing-sm); }
.gap-md  { gap: var(--spacing-md); }
.gap-lg  { gap: var(--spacing-lg); }
.gap-xl  { gap: var(--spacing-xl); }
.gap-2xl { gap: var(--spacing-2xl); }

/* ───────────────────────────────────────────
   2. PADDING
   ─────────────────────────────────────────── */
.p-xs  { padding: var(--spacing-xs); }
.p-sm  { padding: var(--spacing-sm); }
.p-md  { padding: var(--spacing-md); }
.p-lg  { padding: var(--spacing-lg); }
.p-xl  { padding: var(--spacing-xl); }
.p-2xl { padding: var(--spacing-2xl); }

/* ───────────────────────────────────────────
   3. TEXTE
   ─────────────────────────────────────────── */
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-left   { text-align: left; }
.text-muted  { color: var(--text-muted); }
.text-mono   { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.text-primary   { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-tertiary  { color: var(--text-tertiary); }
.text-success   { color: var(--color-success); }
.text-warning   { color: var(--color-warning); }
.text-danger    { color: var(--color-danger); }

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

/* ───────────────────────────────────────────
   5. RESPONSIVE DISPLAY
   ─────────────────────────────────────────── */

/* Visible uniquement sur mobile < 640px */
.d-mobile-only {
    display: none;
}
@media (max-width: 639px) {
    .d-mobile-only {
        display: block;
    }
}

/* Visible uniquement tablet+ >= 640px */
.d-tablet-up {
    display: none;
}
@media (min-width: 640px) {
    .d-tablet-up {
        display: block;
    }
}

/* Visible uniquement desktop+ >= 1024px */
.d-desktop-up {
    display: none;
}
@media (min-width: 1024px) {
    .d-desktop-up {
        display: block;
    }
}

/* Masqué sur mobile */
@media (max-width: 639px) {
    .d-hide-mobile {
        display: none !important;
    }
}

/* Masqué sur tablet */
@media (min-width: 640px) and (max-width: 1023px) {
    .d-hide-tablet {
        display: none !important;
    }
}

/* ───────────────────────────────────────────
   6. OVERFLOW
   ─────────────────────────────────────────── */
.overflow-x-auto {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-hidden {
    overflow: hidden;
}

/* ───────────────────────────────────────────
   7. ACCESSIBILITÉ
   ─────────────────────────────────────────── */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ───────────────────────────────────────────
   8. TRONCATURE
   ─────────────────────────────────────────── */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ───────────────────────────────────────────
   9. NOMBRES TABULAIRES
   ─────────────────────────────────────────── */
.tabular-nums {
    font-variant-numeric: tabular-nums;
}

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