/* ═══════════════════════════════════════════════════════════════
   91STUDIO — RESPONSIVE v1.1.0 (Apple HIG)
   Breakpoints : <640 mobile | 640-1024 tablet | 1024-1440 laptop
                  1440-2560 desktop | >2560 ultra
   ═══════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────
   1. MOBILE — < 640px
   ─────────────────────────────────────────── */
@media (max-width: 639px) {
    /* Colonnes priorité 2 et 3 masquées */
    .studio-table [data-priority="2"],
    .studio-table [data-priority="3"] {
        display: none;
    }

    /* Formulaires en colonne */
    .studio-form-row {
        flex-direction: column;
    }

    /* Toolbar en colonne */
    .studio-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .studio-toolbar-actions {
        justify-content: flex-start;
    }

    /* KPI grille réduite */
    .studio-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    /* Grilles en colonne unique */
    .studio-grid {
        grid-template-columns: 1fr;
    }

    /* Section spacing réduit */
    .studio-section {
        margin-bottom: var(--spacing-xl);
    }

    /* KPI valeur réduite */
    .studio-kpi-value {
        font-size: 22px;
    }
}

/* ───────────────────────────────────────────
   2. TABLET — 640px à 1023px
   ─────────────────────────────────────────── */
@media (min-width: 640px) and (max-width: 1023px) {
    /* Colonnes priorité 3 masquées */
    .studio-table [data-priority="3"] {
        display: none;
    }

    /* Grilles 2 colonnes */
    .studio-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

/* ───────────────────────────────────────────
   3. LAPTOP — 1024px à 1439px
   ─────────────────────────────────────────── */
@media (min-width: 1024px) and (max-width: 1439px) {
    /* Tout visible, layout standard */
}

/* ───────────────────────────────────────────
   4. DESKTOP — 1440px à 2559px
   ─────────────────────────────────────────── */
@media (min-width: 1440px) {
    /* Grilles plus spacieuses */
    .studio-grid {
        grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    }

    /* KPI valeur plus grande */
    .studio-kpi-value {
        font-size: 32px;
    }
}

/* ───────────────────────────────────────────
   5. ULTRA — > 2560px
   ─────────────────────────────────────────── */
@media (min-width: 2560px) {
    .studio-kpi-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }

    .studio-grid {
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    }
}