/* Personnalisations légères par-dessus Pico CSS */

/* Grille de cartes statistiques : 2 colonnes min, 4 max */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Cartes avec le grand chiffre mis en avant */
.stat-card {
    text-align: center;
    padding: 1.25rem 1rem;
}

.stat-card h3 {
    font-size: 2rem;
    margin-bottom: 0.25rem;
    color: var(--pico-primary);
}

.stat-card p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--pico-muted-color);
}

/* Contraindre la hauteur des canvas Chart.js */
.chart-container {
    position: relative;
    max-height: 350px;
    margin: 1rem 0;
}

/* Couleurs pour les écarts de prix dans la table compare */
.diff-positive {
    color: #c0392b;  /* rouge = Leclerc plus cher */
}

.diff-negative {
    color: #27ae60;  /* vert = Picnic plus cher (économie) */
}

/* Débordement horizontal pour les grandes tables */
.overflow-auto {
    overflow-x: auto;
}