refactor: Fusion du header et des onglets pour optimiser l'espace vertical (v1.2.1)

- Header et barre d'onglets combinés sur une seule ligne
- Gain de 10px en hauteur (60px au lieu de 70px)
- Logo et agent à gauche, onglets au centre, actions à droite
- Interface plus compacte avec éléments redimensionnés
- Plus d'espace vertical disponible pour les webviews

styles-modern.css

@@ -286,56 +286,54 @@ body {
     overflow: hidden;
 }
 
-/* === HEADER === */
-header {
+/* === HEADER AVEC ONGLETS === */
+.header-with-tabs {
     background: white;
-    padding: 15px 30px;
+    padding: 0;
     box-shadow: 0 2px 10px rgba(0,0,0,0.05);
     display: flex;
-    justify-content: space-between;
-    align-items: center;
+    align-items: flex-end;
     z-index: 1000;
-    min-height: 70px;
+    min-height: 60px;
+    border-bottom: 2px solid #e9ecef;
 }
 
 .header-left {
     display: flex;
     align-items: center;
-    gap: 20px;
+    gap: 15px;
+    padding: 15px 20px;
+    padding-bottom: 12px;
+    flex-shrink: 0;
 }
 
 .header-left h1 {
-    font-size: 24px;
+    font-size: 20px;
     color: #667eea;
     margin: 0;
 }
 
 .agent-name {
-    font-size: 16px;
+    font-size: 14px;
     color: #666;
     font-weight: 500;
 }
 
-.header-center {
-    flex: 1;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
 
 .call-status {
     display: flex;
     align-items: center;
-    gap: 10px;
-    padding: 10px 20px;
+    gap: 8px;
+    padding: 8px 15px;
     background: #f8f9fa;
-    border-radius: 25px;
+    border-radius: 20px;
     border: 1px solid #e9ecef;
+    font-size: 13px;
 }
 
 .status-indicator {
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
 }
 
@@ -355,7 +353,7 @@ header {
 }
 
 #statusText {
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: #495057;
 }
@@ -364,18 +362,21 @@ header {
     display: flex;
     gap: 10px;
     align-items: center;
+    padding: 15px 20px;
+    padding-bottom: 12px;
+    flex-shrink: 0;
 }
 
 .btn-icon {
-    width: 40px;
-    height: 40px;
+    width: 36px;
+    height: 36px;
     padding: 0;
     background: white;
     border: 1px solid #dee2e6;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 18px;
+    font-size: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -395,13 +396,13 @@ header {
 }
 
 .btn-secondary {
-    padding: 10px 20px;
+    padding: 8px 16px;
     background: white;
     border: 1px solid #dee2e6;
-    border-radius: 8px;
+    border-radius: 6px;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: #495057;
 }
@@ -494,7 +495,7 @@ header {
     flex: 1;
     overflow: hidden;
     flex-direction: column;
-    height: calc(100vh - 70px); /* Hauteur totale moins le header */
+    height: calc(100vh - 60px); /* Hauteur totale moins le header combiné */
 }
 
 /* === ZONE PRINCIPALE === */
@@ -512,15 +513,12 @@ header {
 /* === ONGLETS === */
 .tabs {
     display: flex;
-    background: white;
-    border-bottom: 2px solid #e9ecef;
-    padding: 0 20px;
-    gap: 5px;
+    flex: 1;
+    gap: 3px;
     overflow-x: auto;
     overflow-y: hidden;
-    min-height: 50px;
     align-items: flex-end;
-    flex-shrink: 0;
+    padding: 0 10px;
     scrollbar-width: none; /* Firefox */
     -ms-overflow-style: none; /* IE/Edge */
 }
@@ -532,18 +530,19 @@ header {
 }
 
 .tab {
-    padding: 12px 24px;
+    padding: 10px 20px;
     background: #f8f9fa;
     border: 1px solid #e9ecef;
     border-bottom: none;
-    border-radius: 8px 8px 0 0;
+    border-radius: 6px 6px 0 0;
     cursor: pointer;
     transition: all 0.2s;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     color: #666;
     margin-bottom: -2px;
     position: relative;
+    white-space: nowrap;
 }
 
 .tab:hover {
@@ -555,7 +554,7 @@ header {
     background: white;
     color: #667eea;
     border-color: #e9ecef;
-    padding-bottom: 14px;
+    padding-bottom: 12px;
     font-weight: 600;
 }
 
@@ -575,7 +574,7 @@ header {
     position: relative;
     background: white;
     overflow: hidden;
-    height: calc(100% - 50px); /* Hauteur moins les onglets */
+    height: 100%; /* Pleine hauteur car les onglets sont dans le header */
 }
 
 .no-center-selected {