/* ========================================
   Responsive Grid Classes
   Styles explicites pour les grilles responsive
   ======================================== */

/* Classes de base */
.grid {
    display: grid !important;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
}

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

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

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

.gap-4 {
    gap: 1rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

.gap-8 {
    gap: 2rem !important;
}

.col-span-1 {
    grid-column: span 1 / span 1 !important;
}

.col-span-2 {
    grid-column: span 2 / span 2 !important;
}

.col-span-3 {
    grid-column: span 3 / span 3 !important;
}

/* Media queries explicites */
@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .md\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
    
    .md\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
    
    .md\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }
    
    .md\:gap-8 {
        gap: 2rem !important;
    }
    
    .md\:flex-row {
        flex-direction: row !important;
    }
    
    .md\:mb-0 {
        margin-bottom: 0 !important;
    }
    
    .md\:mt-0 {
        margin-top: 0 !important;
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
    
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
    
    .lg\:col-span-1 {
        grid-column: span 1 / span 1 !important;
    }
    
    .lg\:col-span-2 {
        grid-column: span 2 / span 2 !important;
    }
    
    .lg\:col-span-3 {
        grid-column: span 3 / span 3 !important;
    }
}

/* Classes flex responsive */
.flex {
    display: flex !important;
}

.flex-col {
    flex-direction: column !important;
}

.items-center {
    align-items: center !important;
}

.justify-between {
    justify-content: space-between !important;
}

.justify-center {
    justify-content: center !important;
}

@media (min-width: 640px) {
    .sm\:flex-row {
        flex-direction: row !important;
    }
}

/* Classes responsive supplémentaires */
@media (min-width: 768px) {
    .md\:flex {
        display: flex !important;
    }
    
    .md\:hidden {
        display: none !important;
    }
    
    .md\:block {
        display: block !important;
    }
    
    .md\:items-center {
        align-items: center !important;
    }
    
    .md\:justify-between {
        justify-content: space-between !important;
    }
}