/* ============================================
   SYSTÈME DE GRILLE 12 COLONNES
   Grille cohérente pour les layouts
   ============================================ */

.grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-4);
}

/* Colonnes individuelles */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-6 { grid-column: span 6; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Offsets */
.col-offset-1 { grid-column-start: 2; }
.col-offset-2 { grid-column-start: 3; }
.col-offset-3 { grid-column-start: 4; }
.col-offset-4 { grid-column-start: 5; }
.col-offset-5 { grid-column-start: 6; }
.col-offset-6 { grid-column-start: 7; }

/* Responsive - Mobile first */
@media (max-width: 767px) {
    .grid-12 {
        grid-template-columns: 1fr;
        gap: var(--spacing-3);
    }
    
    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
        grid-column: span 12;
    }
    
    .col-offset-1, .col-offset-2, .col-offset-3,
    .col-offset-4, .col-offset-5, .col-offset-6 {
        grid-column-start: 1;
    }
}

/* Tablette */
@media (min-width: 768px) and (max-width: 1023px) {
    .col-md-1 { grid-column: span 1; }
    .col-md-2 { grid-column: span 2; }
    .col-md-3 { grid-column: span 3; }
    .col-md-4 { grid-column: span 4; }
    .col-md-6 { grid-column: span 6; }
    .col-md-8 { grid-column: span 8; }
    .col-md-12 { grid-column: span 12; }
}

/* Desktop */
@media (min-width: 1024px) {
    .col-lg-1 { grid-column: span 1; }
    .col-lg-2 { grid-column: span 2; }
    .col-lg-3 { grid-column: span 3; }
    .col-lg-4 { grid-column: span 4; }
    .col-lg-6 { grid-column: span 6; }
    .col-lg-8 { grid-column: span 8; }
    .col-lg-9 { grid-column: span 9; }
    .col-lg-12 { grid-column: span 12; }
}

/* Espacements cohérents */
.spacing-xs { gap: var(--spacing-2); }
.spacing-sm { gap: var(--spacing-3); }
.spacing-md { gap: var(--spacing-4); }
.spacing-lg { gap: var(--spacing-6); }
.spacing-xl { gap: var(--spacing-8); }

/* Alignements */
.align-start { align-items: start; }
.align-center { align-items: center; }
.align-end { align-items: end; }
.align-stretch { align-items: stretch; }

.justify-start { justify-content: start; }
.justify-center { justify-content: center; }
.justify-end { justify-content: end; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }

/* Grille pour les produits */
.products-grid-12 {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--spacing-4);
}

.products-grid-12 .product-card {
    grid-column: span 3; /* 4 colonnes par défaut (12/3 = 4) */
}

@media (max-width: 767px) {
    .products-grid-12 .product-card {
        grid-column: span 12; /* 1 colonne sur mobile */
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .products-grid-12 .product-card {
        grid-column: span 6; /* 2 colonnes sur tablette */
    }
}

@media (min-width: 1024px) {
    .products-grid-12 .product-card {
        grid-column: span 3; /* 4 colonnes sur desktop */
    }
}