/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    .zone--cloud {
        flex-direction: row;
        justify-content: space-around;
        padding: 16px;
        background: var(--color-cloud-bg);
        border: 1px solid rgba(129, 140, 248, 0.15);
        border-radius: var(--border-radius-xl);
        min-height: unset;
    }

    .cloud-graphic {
        width: 120px;
        flex: none;
    }

    #connections-overlay {
        display: none;
    }
}

/* ── Tablette paysage ── */
@media (max-width: 900px) {

    /* Grille système : 2 colonnes */
    .vps-system-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Tablette portrait / grand mobile ── */
@media (max-width: 720px) {

    /* Docker groups : 1 colonne */
    .vps-groups {
        grid-template-columns: 1fr;
    }
    .vps-group {
        grid-column: 1;
    }

    /* Grille système : 1 colonne */
    .vps-system-grid {
        grid-template-columns: 1fr;
    }

    /* Bases de données : 1 colonne */
    .db-row {
        grid-template-columns: 1fr;
    }
    /* Nodes BDD : repassent en ligne */
    .node--db {
        flex-direction: row;
        text-align: left;
        align-items: center;
        padding: 10px 12px;
    }
    .node--db .node-info {
        align-items: flex-start;
    }
}

/* ── Mobile ── */
@media (max-width: 600px) {

    .header-inner { padding: 12px 16px; }
    .header-logo span { display: none; }

    /* Nodes Docker : texte plus compact */
    .vps-group .node-name,
    .node-name {
        font-size: 14px;
    }
    .vps-group .node-ip,
    .node-ip {
        font-size: 11px;
        white-space: normal;
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .vps-group .node-icon {
        width: 28px;
        height: 28px;
    }
    .vps-group .node {
        padding: 8px 10px;
        gap: 8px;
    }

    /* Paquets système : masquer le badge pour libérer de l'espace */
    .system-package-badge {
        display: none;
    }
    .system-package {
        padding: 5px 8px;
        gap: 8px;
    }
    .system-package-icon {
        width: 24px;
        height: 24px;
    }
    .system-package-name {
        font-size: 11.5px;
    }
    .system-package-desc {
        font-size: 9.5px;
    }

    /* Docker engine : padding réduit */
    .docker-engine {
        padding: 8px 8px 10px;
    }
    .docker-engine-badge {
        display: none;
    }
}