/**
 * Classes utilitaires pour grilles automatiques sans espaces vides
 * Utilisez ces classes sur toutes les pages pour un positionnement optimal
 */

/* Grille automatique dense - Remplit tous les espaces */
.auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    gap: 1.5rem;
    align-items: stretch;
}

/* Grille pour cartes de statistiques */
.auto-grid-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    gap: 1.5rem;
    align-items: stretch;
}

/* Grille pour cartes de contenu */
.auto-grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    gap: 1.5rem;
    align-items: stretch;
}

/* Grille pour cartes larges */
.auto-grid-large {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(450px, 1fr));
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    gap: 1.5rem;
    align-items: stretch;
}

/* Grille flexible - S'adapte au contenu */
.auto-grid-flex {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    grid-auto-rows: min-content;
    grid-auto-flow: dense;
    gap: 1.5rem;
    align-items: stretch;
}

/* Responsive - Mobile */
@media (max-width: 768px) {
    .auto-grid,
    .auto-grid-stats,
    .auto-grid-cards,
    .auto-grid-large,
    .auto-grid-flex {
        grid-template-columns: 1fr;
        grid-auto-flow: row;
        gap: 1rem;
    }
}

/* Responsive - Tablette */
@media (max-width: 968px) and (min-width: 769px) {
    .auto-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }

    .auto-grid-cards {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .auto-grid-large {
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    }
}