:root {
    --bg-color: #e0e5ec;
    --text-main: #37474f;
    --text-sub: #aab0b6;
    /* Ombres légèrement remontées pour un relief plus soigné */
    --shadow-outer-dark: 7px 7px 14px rgba(163, 177, 198, 0.6);
    --shadow-outer-light: -7px -7px 14px rgba(255, 255, 255, 0.7);
    --shadow-inner-inset: inset 5px 5px 10px rgba(163, 177, 198, 0.5), inset -5px -5px 10px rgba(255, 255, 255, 0.8);
}

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: 'Segoe UI', sans-serif;
    display: flex; 
    justify-content: center; 
    align-items: center;
    min-height: 100vh; 
    margin: 0; 
    padding: 15px; /* Un peu plus d'air sur les bords */
    box-sizing: border-box;
}

.dashboard { 
    width: 100%; 
    max-width: 850px; 
    display: flex; 
    flex-direction: column; 
    gap: 30px; /* Remonté (était à 20px, avant 45px) : le juste milieu */
}

.section { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    gap: 12px; /* Remonté (était à 8px, avant 20px) */
}

.section-title { 
    font-size: 0.7rem; 
    font-weight: bold; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: var(--text-sub); 
}

.grid { 
    display: grid; 
    gap: 12px; /* Espacement entre les cases équilibré */
    width: 100%; 
}

.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.neo-card {
    background-color: var(--bg-color);
    border-radius: 16px; /* Arrondi plus doux */
    padding: 18px 5px; /* Redonne de la hauteur aux cases (était 12px) */
    text-align: center;
    box-shadow: var(--shadow-outer-dark), var(--shadow-outer-light);
    transition: all 0.3s ease;
}

.focus { 
    box-shadow: var(--shadow-inner-inset) !important; 
    transform: scale(0.98); 
}

.val { 
    font-size: clamp(1.1rem, 3.2vw, 2rem); 
    font-weight: 800; 
    display: block; 
    font-variant-numeric: tabular-nums; 
    line-height: 1.1; 
}

.unit { 
    font-size: 0.6rem; 
    color: var(--text-sub); 
    text-transform: uppercase; 
    font-weight: bold; 
    margin-top: 6px; 
    display: block; 
}

/* RESPONSIVE MOBILE */
@media (max-width: 700px) {
    .dashboard { gap: 25px; } /* On garde un bon espacement pour éviter que ça fasse "tassé" */
    
    .grid-6 { grid-template-columns: repeat(3, 1fr); }
    .grid-4, .grid-3 { grid-template-columns: repeat(2, 1fr); }
    
    .neo-card { padding: 15px 5px; } /* Confortable sur mobile */
    .val { font-size: 1.4rem; }
}

/* Sécurité pour les petits écrans en hauteur */
@media (max-height: 700px) {
    .dashboard { gap: 15px; }
    .neo-card { padding: 12px 5px; }
}