diff --git a/apps/ops/src/components/shared/DetailModal.vue b/apps/ops/src/components/shared/DetailModal.vue
index 1cb6b51..59290a5 100644
--- a/apps/ops/src/components/shared/DetailModal.vue
+++ b/apps/ops/src/components/shared/DetailModal.vue
@@ -1,6 +1,7 @@
 <template>
-  <q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)" position="right" full-height>
-    <q-card style="width:600px;max-width:90vw" class="column no-wrap">
+  <q-dialog :model-value="open" @update:model-value="$emit('update:open', $event)"
+    :position="$q.screen.lt.sm ? 'bottom' : 'right'" :maximized="$q.screen.lt.sm" full-height>
+    <q-card :style="$q.screen.lt.sm ? 'width:100%;max-width:100%' : 'width:600px;max-width:90vw'" class="column no-wrap">
       <!-- Header -->
       <q-card-section class="row items-center q-pb-sm" style="border-bottom:1px solid var(--ops-border, #e2e8f0)">
         <div class="col">
@@ -58,8 +59,11 @@
 
 <script setup>
 import { computed } from 'vue'
+import { useQuasar } from 'quasar'
 import { erpLink } from 'src/composables/useFormatters'
 
+const $q = useQuasar()
+
 import InvoiceDetail from './detail-sections/InvoiceDetail.vue'
 import IssueDetail from './detail-sections/IssueDetail.vue'
 import PaymentDetail from './detail-sections/PaymentDetail.vue'
diff --git a/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue b/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
index 49b5a2a..239e1c1 100644
--- a/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
+++ b/apps/ops/src/components/shared/detail-sections/EquipmentDetail.vue
@@ -950,4 +950,17 @@ onUnmounted(() => stopWanLive())
 .adv-signal-fill { height: 100%; border-radius: 3px; transition: width 0.3s; }
 .adv-clients-table td:first-child { white-space: nowrap; }
 .adv-inactive-row { opacity: 0.5; font-style: italic; }
+
+/* Mobile (agents terrain) : la carte réseau et les grilles doivent tenir dans
+   l'écran plutôt que déborder/rogner (nœuds topo à largeur fixe = cause du clip). */
+@media (max-width: 600px) {
+  .topo-summary { padding: 10px; }
+  .topo-row { gap: 2px; }
+  .topo-node { width: auto; flex: 1 1 0; min-width: 0; }
+  .topo-cap, .topo-sub { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .topo-link { max-width: 18px; }
+  .dv-grid { grid-template-columns: repeat(2, 1fr); }
+  .dv-row2 { flex-direction: column; }
+  .diag-grid { grid-template-columns: 1fr; }
+}
 </style>