/* =============================================================================
   UTILITIES CSS - CLASSES UTILITAIRES ET OVERRIDES
   Classes d'aide pour des ajustements spécifiques
   ============================================================================= */

/* ===== CLASSES UTILITAIRES DE COULEURS ===== */
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-accent { color: var(--text-accent) !important; }
.text-success { color: var(--color-success) !important; font-weight: 600; }
.text-danger { color: var(--color-danger) !important; font-weight: 600; }
.text-warning { color: var(--color-warning) !important; font-weight: 600; }

/* ===== CLASSES UTILITAIRES D'ARRIÈRE-PLAN ===== */
.bg-primary { background: var(--bg-primary) !important; }
.bg-secondary { background: var(--bg-secondary) !important; }
.bg-card { background: var(--bg-card) !important; }

/* ===== OVERRIDES BOOTSTRAP AVEC CHARTE GRAPHIQUE ===== */
.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(212, 113, 70, 0.3) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%) !important;
    color: white !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 113, 70, 0.4) !important;
}

.btn-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%) !important;
    border: none !important;
    color: white !important;
}

.btn-outline-primary {
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: transparent !important;
}

.btn-outline-primary:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

.btn-outline-info {
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    background: transparent !important;
}

.btn-outline-info:hover {
    background: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: white !important;
}

/* ===== OVERRIDES ALERT BOOTSTRAP ===== */
.alert {
    border: none;
    border-radius: var(--radius-xl);
    backdrop-filter: blur(10px);
    box-shadow: var(--shadow-md);
}

.alert-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    border-left: 4px solid var(--color-warning) !important;
    color: #92400e !important;
}

.alert-info {
    background: rgba(212, 113, 70, 0.1) !important;
    color: var(--color-primary-dark) !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1) !important;
    border-left: 4px solid var(--color-success) !important;
    color: #065f46 !important;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    border-left: 4px solid var(--color-danger) !important;
    color: #991b1b !important;
}

/* ===== OVERRIDES CARD BOOTSTRAP ===== */
.card {
    border: 1px solid var(--border-secondary);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-elegant);
    backdrop-filter: blur(10px);
    background: var(--bg-card);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(212, 113, 70, 0.2);
}

.card-header {
    border-bottom: 1px solid var(--border-secondary);
    font-weight: 600;
}

.card-header.bg-primary {
    background: var(--gradient-primary) !important;
    color: white !important;
}

.card-header.bg-success {
    background: linear-gradient(135deg, var(--color-success) 0%, #059669 100%) !important;
    color: white !important;
}

.card-header.bg-info {
    background: var(--gradient-primary) !important;
    color: white !important;
}

/* ===== CLASSES UTILITAIRES DE SPACING ===== */
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }

.m-xs { margin: var(--space-xs) !important; }
.m-sm { margin: var(--space-sm) !important; }
.m-md { margin: var(--space-md) !important; }
.m-lg { margin: var(--space-lg) !important; }
.m-xl { margin: var(--space-xl) !important; }

/* ===== CLASSES UTILITAIRES DE RADIUS ===== */
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* ===== CLASSES UTILITAIRES DE SHADOW ===== */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
.shadow-warm { box-shadow: var(--shadow-warm) !important; }
.shadow-elegant { box-shadow: var(--shadow-elegant) !important; }

/* ===== CLASSES UTILITAIRES DE TRANSITION ===== */
.transition-fast { transition: var(--transition-fast) !important; }
.transition-normal { transition: var(--transition-normal) !important; }
.transition-elegant { transition: var(--transition-elegant) !important; }

/* ===== CLASSES POUR RESPONSIVE ===== */
@media (max-width: 768px) {
    .mobile-center { text-align: center !important; }
    .mobile-stack > * { width: 100% !important; margin-bottom: var(--space-sm) !important; }
    .mobile-hide { display: none !important; }
    .mobile-show { display: block !important; }
}

@media (min-width: 769px) {
    .desktop-hide { display: none !important; }
    .desktop-show { display: block !important; }
}

/* ===== CLASSES POUR ANIMATIONS ===== */
.hover-lift {
    transition: var(--transition-elegant);
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ===== CLASSES POUR DEBUG (À SUPPRIMER EN PRODUCTION) ===== */
.debug-border { border: 2px solid red !important; }
.debug-bg { background: rgba(255, 0, 0, 0.1) !important; }