/* ============================================================
   MonBonVTC — Classes utilitaires
   ============================================================ */

/* Texte */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text3); }
.text-gold    { color: var(--gold); }
.text-success { color: var(--success-text); }
.text-warning { color: var(--warning-text); }
.text-danger  { color: var(--danger-text); }
.font-bold    { font-weight: 700; }
.font-medium  { font-weight: 500; }
.font-mono    { font-family: var(--mono); }

/* Marges — top */
.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }

/* Marges — bottom */
.mb-1 { margin-bottom: 8px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }
.mb-4 { margin-bottom: 32px; }

/* Padding */
.p-1 { padding: 8px; }
.p-2 { padding: 16px; }
.p-3 { padding: 24px; }
.p-4 { padding: 32px; }

/* Flexbox */
.flex         { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.flex-center  { display: flex; justify-content: center; align-items: center; }
.flex-end     { display: flex; justify-content: flex-end; align-items: center; }
.flex-col     { display: flex; flex-direction: column; }
.flex-wrap    { flex-wrap: wrap; }
.flex-1       { flex: 1; }

/* Gap */
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

/* Dimensions */
.w-full { width: 100%; }

/* Texte tronqué */
.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Visibilité */
.hidden { display: none; }

@media (min-width: 768px) {
    .visible-mobile  { display: none !important; }
}
@media (max-width: 767px) {
    .visible-desktop { display: none !important; }

    /* Stack flex-between on mobile when content wraps */
    .flex-between-mobile-stack {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .text-sm { font-size: 0.8125rem; }
}