/**
 * css/responsive.css — Système responsive front (Plan 2605-02)
 *
 * Le projet est conçu pour être embarqué en iframe. Le viewport ne reflète
 * pas la place dont dispose réellement la viz. On bascule donc d'un wrap
 * mécanique basé sur le viewport (media queries) vers un système de
 * container queries piloté par la largeur effective de `.app-instance`.
 *
 * ─ Containment context
 *
 *   `.app-instance` reçoit `container-type: inline-size` et un nom dédié
 *   (`viz`). Toutes les requêtes responsive du projet ciblent ce conteneur.
 *
 * ─ Paliers
 *
 *   viz-sm   ≥  720px   smartphone large / iframe étroite
 *   viz-md   ≥ 1080px   tablette paysage / iframe medium
 *   viz-lg   ≥ 1300px   desktop / iframe large
 *
 *   En dessous de viz-sm, on tombe sur les valeurs par défaut.
 *
 * ─ Pattern "design tokens responsives"
 *
 *   Les vues ne hardcodent pas de seuils. Elles consomment des custom
 *   properties (var(--xxx)) qui changent par palier dans ce fichier.
 *
 *   Avantages :
 *     - Une seule source de vérité pour les seuils.
 *     - Découplage des vues et du système de breakpoints.
 *     - Une nouvelle vue ajoute sa variable ici, l'utilise dans son CSS,
 *       sans inventer de nouveau palier.
 *
 *   Cf. architecture.md — section E pour la convention complète.
 */

/* =====================================================================
   CONTAINMENT CONTEXT
   ===================================================================== */

.app-instance {
    container-type: inline-size;
    container-name: viz;
}

/* =====================================================================
   TOKENS RESPONSIVES — valeurs par défaut (< 720px)
   ===================================================================== */

.app-instance {
    /* Cartes Synthèse */
    --card-min: 140px;
    --grid-gap: 12px;

    /* Boutons de filtres (toolbar haute) */
    --filter-min: 140px;
    --filter-max: 200px;

    /* Cellules de tableau — paddings (vue full-width) */
    --cell-padding-y: 8px;
    --cell-padding-x: 8px;
}

/* =====================================================================
   PALIERS
   ===================================================================== */

/* viz-sm — ≥ 720px */
@container viz (min-width: 720px) {
    .app-instance {
        --card-min: 160px;
        --grid-gap: 14px;
        --filter-min: 140px;
        --filter-max: 220px;
        --cell-padding-y: 12px;
        --cell-padding-x: 12px;
    }
}

/* viz-md — ≥ 1080px */
@container viz (min-width: 1080px) {
    .app-instance {
        --card-min: 180px;
        --grid-gap: 16px;
        --filter-min: 160px;
        --filter-max: 240px;
        --cell-padding-y: 16px;
        --cell-padding-x: 18px;
    }
}

/* viz-lg — ≥ 1300px — reproduit les valeurs historiques avant plan 2605-02 */
@container viz (min-width: 1300px) {
    .app-instance {
        --card-min: 200px;
        --grid-gap: 16px;
        --filter-min: 180px;
        --filter-max: 260px;
        --cell-padding-y: 16px;
        --cell-padding-x: 24px;
    }
}