/**
 * Bohio MAG - Stylesheet Principal
 * Structure: Variables -> Base -> Layout -> Components -> Page-specific
 * Thème: Jaune (#FFD700) sur Noir (#000000)
 */

@import url('variables.css');
@import url('base.css');
@import url('layout.css');
@import url('components.css');

/* Utilities */
.text-center { text-align: center; }
.text-right { text-align: right; }
.text-left { text-align: left; }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }
.mt-5 { margin-top: var(--spacing-2xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }
.mb-5 { margin-bottom: var(--spacing-2xl); }

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

/* Alerts */
.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius);
    margin-bottom: var(--spacing-md);
    border-left: 4px solid;
}

.alert-info {
    background: #E0F2FE;
    border-left-color: #3B82F6;
    color: #1E40AF;
}

.alert-success {
    background: #DCFCE7;
    border-left-color: #10B981;
    color: #065F46;
}

.alert-warning {
    background: #FEF3C7;
    border-left-color: #F59E0B;
    color: #92400E;
}

.alert-danger {
    background: #FEE2E2;
    border-left-color: #EF4444;
    color: #991B1B;
}

/* Forms */
.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-label {
    display: block;
    margin-bottom: var(--spacing-sm);
    font-weight: 500;
    color: var(--text-primary);
}

.form-input, .form-textarea, .form-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: inherit;
    font-size: var(--font-size-base);
}

.form-input:focus, .form-textarea:focus, .form-select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.1);
}

.form-textarea {
    resize: vertical;
    min-height: 120px;
}

/* Grid Utilities */
.grid {
    display: grid;
    gap: var(--spacing-lg);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 768px) {
    .grid-cols-2, .grid-cols-3, .grid-cols-4 {
        grid-template-columns: 1fr;
    }

    .form-input, .form-textarea, .form-select {
        font-size: 16px; /* Prévient le zoom sur mobile */
    }
}

@media (max-width: 480px) {
    .alert {
        margin-bottom: var(--spacing-md);
        padding: var(--spacing-md);
        font-size: var(--font-size-sm);
    }

    .btn {
        padding: var(--spacing-sm) var(--spacing-md);
        font-size: var(--font-size-sm);
    }
}

/* Flex Utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.gap-md {
    gap: var(--spacing-md);
}

/* Loading */
.loading {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}