/* ============================================
   GRID SYSTEM
   ============================================
   Simple grid system avec colonnes symétriques
   et layouts asymétriques. Gap par défaut: 24px
   ============================================ */

/* ========== BASE GRID ========== */
.grid {
    display: grid;
    gap: 24px;
    margin-bottom: 24px;
}

/* ========== COLONNES SYMÉTRIQUES ========== */
.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); }

/* ========== LAYOUTS ASYMÉTRIQUES ========== */
/* 2 colonnes */
.grid-cols-1-2 { grid-template-columns: 1fr 2fr; } /* 1/3 + 2/3 */
.grid-cols-2-1 { grid-template-columns: 2fr 1fr; } /* 2/3 + 1/3 */
.grid-cols-1-3 { grid-template-columns: 1fr 3fr; } /* 1/4 + 3/4 */
.grid-cols-3-1 { grid-template-columns: 3fr 1fr; } /* 3/4 + 1/4 */

/* 3 colonnes */
.grid-cols-2-1-1 { grid-template-columns: 2fr 1fr 1fr; } /* Large + 2 normales */
.grid-cols-1-2-1 { grid-template-columns: 1fr 2fr 1fr; } /* Normale + large + normale */
.grid-cols-1-1-2 { grid-template-columns: 1fr 1fr 2fr; } /* 2 normales + large */

/* ========== RESPONSIVE ========== */
@media (max-width: 767px) {
    /* Tout en 1 colonne sur mobile */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4,
    .grid-cols-1-2,
    .grid-cols-2-1,
    .grid-cols-1-3,
    .grid-cols-3-1,
    .grid-cols-2-1-1,
    .grid-cols-1-2-1,
    .grid-cols-1-1-2 {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* 3 et 4 colonnes deviennent 2 colonnes sur tablette */
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Layouts asymétriques 3 colonnes deviennent 2 colonnes sur tablette */
    .grid-cols-2-1-1,
    .grid-cols-1-2-1,
    .grid-cols-1-1-2 {
        grid-template-columns: 1fr 1fr;
    }
}