diff --git a/enseignant/monitoring.php b/enseignant/monitoring.php
index b84f9bf..c6c5bc5 100644
--- a/enseignant/monitoring.php
+++ b/enseignant/monitoring.php
@@ -67,7 +67,7 @@ try {
             font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
-            padding: 20px;
+            padding: 10px;
         }
         
         .container {
@@ -77,10 +77,10 @@ try {
         
         .header {
             background: white;
-            padding: 20px 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
+            padding: 12px 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 12px;
             display: flex;
             justify-content: space-between;
             align-items: center;
@@ -88,23 +88,23 @@ try {
         
         .header h1 {
             color: #333;
-            font-size: 24px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-        
-        .refresh-indicator {
-            padding: 8px 16px;
-            background: #f0f0f0;
-            border-radius: 5px;
-            font-size: 14px;
-            color: #666;
+            font-size: 18px;
             display: flex;
             align-items: center;
             gap: 8px;
         }
         
+        .refresh-indicator {
+            padding: 5px 10px;
+            background: #f0f0f0;
+            border-radius: 4px;
+            font-size: 10px;
+            color: #666;
+            display: flex;
+            align-items: center;
+            gap: 5px;
+        }
+        
         .refresh-indicator.active {
             background: #d4edda;
             color: #155724;
@@ -112,13 +112,13 @@ try {
         
         .stats-bar {
             background: white;
-            padding: 15px 30px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            margin-bottom: 20px;
+            padding: 10px 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-bottom: 12px;
             display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            gap: 20px;
+            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+            gap: 12px;
         }
         
         .stat-item {
@@ -126,66 +126,70 @@ try {
         }
         
         .stat-value {
-            font-size: 32px;
+            font-size: 22px;
             font-weight: bold;
             color: #667eea;
         }
         
         .stat-label {
-            font-size: 14px;
+            font-size: 10px;
             color: #666;
-            margin-top: 5px;
+            margin-top: 2px;
         }
         
-        /* Cards élèves */
+        /* Cards élèves - VERSION COMPACTE */
         .eleves-grid {
             display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
-            gap: 20px;
+            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+            gap: 12px;
         }
         
         .eleve-card {
             background: white;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            padding: 12px;
             transition: transform 0.2s, box-shadow 0.2s;
         }
         
         .eleve-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 8px 15px rgba(0,0,0,0.2);
+            transform: translateY(-3px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.15);
         }
         
         .eleve-header {
             display: flex;
             justify-content: space-between;
             align-items: center;
-            margin-bottom: 15px;
-            padding-bottom: 15px;
-            border-bottom: 2px solid #f0f0f0;
+            margin-bottom: 8px;
+            padding-bottom: 8px;
+            border-bottom: 1px solid #f0f0f0;
         }
         
         .eleve-info {
             flex: 1;
+            min-width: 0; /* Pour ellipsis */
         }
         
         .eleve-name {
-            font-size: 18px;
+            font-size: 13px;
             font-weight: 600;
             color: #333;
-            margin-bottom: 5px;
+            margin-bottom: 2px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
         
         .eleve-classe {
-            font-size: 14px;
+            font-size: 10px;
             color: #666;
         }
         
         .status-badge {
-            padding: 6px 12px;
-            border-radius: 20px;
-            font-size: 12px;
+            padding: 3px 8px;
+            border-radius: 12px;
+            font-size: 9px;
             font-weight: 600;
             white-space: nowrap;
         }
@@ -197,13 +201,13 @@ try {
         .status-termine { background: #e2e3e5; color: #383d41; }
         
         .progress-section {
-            margin-bottom: 15px;
+            margin-bottom: 8px;
         }
         
         .progress-bar-container {
             background: #e9ecef;
-            border-radius: 10px;
-            height: 25px;
+            border-radius: 6px;
+            height: 16px;
             overflow: hidden;
             position: relative;
         }
@@ -216,31 +220,38 @@ try {
             align-items: center;
             justify-content: center;
             color: white;
-            font-size: 13px;
+            font-size: 9px;
             font-weight: bold;
         }
         
         .progress-text {
-            font-size: 13px;
+            font-size: 9px;
             color: #666;
-            margin-top: 5px;
+            margin-top: 3px;
             text-align: center;
         }
         
         .time-info {
             display: flex;
             justify-content: space-between;
-            font-size: 12px;
+            font-size: 9px;
             color: #666;
-            margin-bottom: 15px;
+            margin-bottom: 8px;
+            gap: 4px;
         }
         
-        /* Matrice questions */
+        .time-info span {
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+        
+        /* Matrice questions - VERSION ULTRA COMPACTE */
         .questions-matrix {
             display: grid;
             grid-template-columns: repeat(<?= $cols ?>, 1fr);
-            gap: 4px;
-            margin-top: 10px;
+            gap: 2px;
+            margin-top: 6px;
         }
         
         .question-cell {
@@ -248,17 +259,18 @@ try {
             display: flex;
             align-items: center;
             justify-content: center;
-            font-size: 16px;
-            border-radius: 4px;
+            font-size: 10px;
+            border-radius: 2px;
             cursor: pointer;
-            transition: transform 0.2s, box-shadow 0.2s;
+            transition: transform 0.15s, box-shadow 0.15s;
             background: #f8f9fa;
             position: relative;
+            min-height: 18px;
         }
         
         .question-cell:hover {
-            transform: scale(1.15);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+            transform: scale(1.3);
+            box-shadow: 0 2px 6px rgba(0,0,0,0.25);
             z-index: 10;
         }
         
@@ -276,11 +288,12 @@ try {
         
         .question-number {
             position: absolute;
-            top: 2px;
-            left: 3px;
-            font-size: 8px;
+            top: 1px;
+            left: 2px;
+            font-size: 6px;
             font-weight: 600;
             color: #666;
+            line-height: 1;
         }
         
         .matrix-legend {
@@ -302,10 +315,11 @@ try {
             background: white;
             color: #667eea;
             border: 2px solid #667eea;
-            padding: 10px 20px;
-            border-radius: 8px;
+            padding: 6px 12px;
+            border-radius: 6px;
             text-decoration: none;
             font-weight: 600;
+            font-size: 11px;
             transition: all 0.3s;
         }
         
@@ -335,26 +349,27 @@ try {
         /* Légende globale */
         .legende {
             background: white;
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            margin-top: 20px;
+            padding: 10px 15px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+            margin-top: 12px;
             display: flex;
             flex-wrap: wrap;
-            gap: 20px;
+            gap: 12px;
             align-items: center;
-            font-size: 13px;
+            font-size: 10px;
         }
         
         .legende-title {
             font-weight: 600;
             color: #333;
+            font-size: 11px;
         }
         
         .legende-item {
             display: flex;
             align-items: center;
-            gap: 8px;
+            gap: 5px;
         }
         
         .tooltip {
@@ -376,12 +391,12 @@ try {
         <!-- Header -->
         <div class="header">
             <h1>
-                📊 Monitoring Temps Réel
-                <span style="font-size: 18px; font-weight: normal; color: #666;">
+                📊 Monitoring
+                <span style="font-size: 14px; font-weight: normal; color: #666;">
                     - <?= htmlspecialchars($evaluation['titre']) ?>
                 </span>
-                <span style="font-size: 14px; font-weight: normal; color: #999;">
-                    (<?= $nb_questions ?> questions - matrice <?= $rows ?>×<?= $cols ?>)
+                <span style="font-size: 11px; font-weight: normal; color: #999;">
+                    (<?= $nb_questions ?>Q - <?= $rows ?>×<?= $cols ?>)
                 </span>
             </h1>
             <div style="display: flex; gap: 15px; align-items: center;">
@@ -428,22 +443,22 @@ try {
         <div class="legende">
             <div class="legende-title">Légende :</div>
             <div class="legende-item">
-                <span style="display: inline-block; width: 20px; height: 20px; background: #f8f9fa; border-radius: 4px;"></span>
+                <span style="display: inline-block; width: 14px; height: 14px; background: #f8f9fa; border-radius: 2px;"></span>
                 <span>Non répondu</span>
             </div>
             <div class="legende-item">
-                <span style="display: inline-block; width: 20px; height: 20px; background: #cce5ff; border-radius: 4px;"></span>
+                <span style="display: inline-block; width: 14px; height: 14px; background: #cce5ff; border-radius: 2px;"></span>
                 <span>✅ Répondu</span>
             </div>
             <div class="legende-item">
-                <span style="display: inline-block; width: 20px; height: 20px; background: #d4edda; border-radius: 4px;"></span>
+                <span style="display: inline-block; width: 14px; height: 14px; background: #d4edda; border-radius: 2px;"></span>
                 <span>✔️ Correct</span>
             </div>
             <div class="legende-item">
-                <span style="display: inline-block; width: 20px; height: 20px; background: #f8d7da; border-radius: 4px;"></span>
+                <span style="display: inline-block; width: 14px; height: 14px; background: #f8d7da; border-radius: 2px;"></span>
                 <span>❌ Incorrect</span>
             </div>
-            <div class="legende-item" style="margin-left: 20px;">
+            <div class="legende-item" style="margin-left: 15px;">
                 <span>🟢 En ligne (&lt;1min)</span>
             </div>
             <div class="legende-item">