From 892d55a9f899d4550f338f104ba3558846571116 Mon Sep 17 00:00:00 2001
From: Pierre Marx <pm_git@pmfrca.com>
Date: Thu, 4 Sep 2025 15:12:31 -0400
Subject: [PATCH] refactor: Refonte majeure de l'interface utilisateur (v1.2.0)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

SUPPRESSIONS:
- Sidebar latérale gauche complètement retirée
- Statistiques du jour supprimées
- Bouton et modal de simulation d'appel supprimés
- Scrollbars visibles masquées

AJOUTS:
- Zone de notes dynamique avec toggle via bouton 📝
- Sauvegarde des préférences dans localStorage
- Nouveau design moderne avec styles-modern.css

AMÉLIORATIONS:
- Interface épurée maximisant l'espace pour les webviews
- Onglets style Material Design avec animations
- Meilleure gestion de l'espace avec calc() CSS
- Code HTML et JavaScript nettoyé et simplifié
---
 docs/changelog.md |  48 +++
 index.html        |  47 +--
 renderer.js       | 168 +++++-----
 styles-modern.css | 839 ++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 979 insertions(+), 123 deletions(-)
 create mode 100644 styles-modern.css

diff --git a/docs/changelog.md b/docs/changelog.md
index 61fa67b..dc11279 100644
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,53 @@
 # Changelog - SimpleConnect Electron
 
+## [1.2.0] - 2025-09-04
+
+### Supprimé
+- **Sidebar latérale gauche** : Interface simplifiée avec suppression complète du panneau latéral
+  - Plus de liste des centres dans la sidebar (navigation uniquement par onglets)
+  - Suppression des statistiques du jour (appels traités et RDV pris)
+  - Gain d'espace significatif pour l'affichage des webviews
+- **Bouton "Simuler un appel"** : Fonctionnalité de simulation retirée
+  - Suppression du bouton dans le header
+  - Modal de simulation complètement retirée
+  - Code JavaScript associé nettoyé (fonctions showCallSimulation, loadSimulatedCalls, etc.)
+  - Référence au script cti-simulator.js supprimée
+- **Scrollbars visibles** : Masquage complet des barres de défilement
+  - Scrollbar verticale supprimée via overflow: hidden
+  - Scrollbar horizontale des onglets masquée (reste fonctionnelle au scroll)
+
+### Ajouté
+- **Zone de notes dynamique** : Panneau de notes rapides affichable/masquable
+  - Nouveau bouton 📝 dans le header pour toggle les notes
+  - Animation fluide de glissement depuis le bas de l'écran
+  - Bouton × pour fermer rapidement le panneau
+  - Sauvegarde automatique des préférences dans localStorage
+  - Panneau masqué par défaut pour maximiser l'espace de travail
+
+### Modifié
+- **Interface modernisée** : Refonte complète du design
+  - Nouveau fichier styles-modern.css remplaçant l'ancien styles.css
+  - Header épuré avec ombres subtiles et animations
+  - Onglets style Material Design avec indicateur actif coloré
+  - Boutons avec effets hover et transitions fluides
+  - Palette de couleurs plus moderne et contrastée
+  - Animations et transitions ajoutées partout
+- **Optimisation de l'espace** : Meilleure utilisation de l'écran
+  - Les webviews occupent maintenant toute la largeur disponible
+  - Hauteurs calculées précisément avec calc() CSS
+  - Interface responsive et adaptative
+- **Structure HTML simplifiée** : Code plus propre et maintenable
+  - Suppression des éléments DOM liés à la sidebar
+  - Suppression de la modal de simulation
+  - Organisation plus claire des sections
+
+### Technique
+- Gestion des préférences utilisateur via localStorage
+- Fonctions JavaScript ajoutées : toggleNotes(), showNotes(), hideNotes(), loadUserPreferences()
+- CSS moderne avec animations @keyframes et transitions
+- Masquage des scrollbars compatible tous navigateurs (webkit, Firefox, IE/Edge)
+- Hauteurs calculées dynamiquement pour éviter les débordements
+
 ## [1.1.3] - 2025-09-04
 
 ### Modifié
diff --git a/index.html b/index.html
index f4008ee..85d87e2 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>SimpleConnect</title>
     <link rel="stylesheet" href="choices.min.css" />
-    <link rel="stylesheet" href="styles.css" />
+    <link rel="stylesheet" href="styles-modern.css" />
   </head>
   <body>
     <!-- Page de connexion -->
@@ -69,8 +69,8 @@
           </div>
         </div>
         <div class="header-right">
-          <button id="simulateCallBtn" class="btn-secondary">
-            Simuler un appel
+          <button id="toggleNotesBtn" class="btn-icon" title="Afficher/Masquer les notes">
+            <span class="icon-notes">📝</span>
           </button>
           <button id="logoutBtn" class="btn-secondary">Déconnexion</button>
         </div>
@@ -89,25 +89,6 @@
 
       <!-- Conteneur principal -->
       <div class="main-container">
-        <!-- Sidebar avec la liste des centres -->
-        <aside class="sidebar">
-          <h3>Mes Centres</h3>
-          <div id="centersList" class="centers-list"></div>
-          <div class="sidebar-footer">
-            <h4>Statistiques du jour</h4>
-            <div id="dailyStats" class="daily-stats">
-              <div class="stat-item">
-                <span class="stat-label">Appels traités:</span>
-                <span class="stat-value" id="callCount">0</span>
-              </div>
-              <div class="stat-item">
-                <span class="stat-label">RDV pris:</span>
-                <span class="stat-value" id="appointmentCount">0</span>
-              </div>
-            </div>
-          </div>
-        </aside>
-
         <!-- Zone principale avec les webviews -->
         <main class="content">
           <!-- Onglets des centres -->
@@ -120,9 +101,12 @@
             </div>
           </div>
 
-          <!-- Zone de notes rapides -->
-          <div class="notes-section">
-            <h4>Notes rapides</h4>
+          <!-- Zone de notes rapides (masquable) -->
+          <div id="notesSection" class="notes-section">
+            <div class="notes-header">
+              <h4>Notes rapides</h4>
+              <button id="closeNotesBtn" class="btn-close-notes" title="Fermer">×</button>
+            </div>
             <textarea
               id="quickNotes"
               placeholder="Prenez des notes ici..."
@@ -133,21 +117,8 @@
       </div>
     </div>
 
-    <!-- Modal de simulation d'appel -->
-    <div id="callSimulationModal" class="modal">
-      <div class="modal-content">
-        <span class="close">&times;</span>
-        <h2>Simuler un appel entrant</h2>
-        <div id="simulatedCallsList" class="simulated-calls-list"></div>
-        <button id="customCallBtn" class="btn-secondary">
-          Appel personnalisé
-        </button>
-      </div>
-    </div>
-
     <!-- Scripts -->
     <script src="choices.min.js"></script>
     <script src="renderer.js"></script>
-    <script src="cti-simulator.js"></script>
   </body>
 </html>
diff --git a/renderer.js b/renderer.js
index 53a5100..dda8c48 100644
--- a/renderer.js
+++ b/renderer.js
@@ -49,17 +49,26 @@ document.addEventListener('DOMContentLoaded', async () => {
         logoutBtn.addEventListener('click', handleLogout);
     }
 
-    // Bouton simulation d'appel
-    const simulateBtn = document.getElementById('simulateCallBtn');
-    if (simulateBtn) {
-        simulateBtn.addEventListener('click', showCallSimulation);
-    }
-
     // Bouton sauvegarder notes
     const saveNotesBtn = document.getElementById('saveNotesBtn');
     if (saveNotesBtn) {
         saveNotesBtn.addEventListener('click', saveNotes);
     }
+    
+    // Bouton toggle notes
+    const toggleNotesBtn = document.getElementById('toggleNotesBtn');
+    if (toggleNotesBtn) {
+        toggleNotesBtn.addEventListener('click', toggleNotes);
+    }
+    
+    // Bouton fermer notes
+    const closeNotesBtn = document.getElementById('closeNotesBtn');
+    if (closeNotesBtn) {
+        closeNotesBtn.addEventListener('click', hideNotes);
+    }
+    
+    // Charger les préférences utilisateur
+    loadUserPreferences();
 
     // Écouter les appels entrants
     ipcRenderer.on('incoming-call', (event, callData) => {
@@ -193,31 +202,15 @@ function showMainPage() {
 
 // === GESTION DES CENTRES ===
 function initializeCenters() {
-    const centersList = document.getElementById('centersList');
     const centerTabs = document.getElementById('centerTabs');
     const webviewContainer = document.getElementById('webviewContainer');
     
     // Vider les contenus existants
-    centersList.innerHTML = '';
     centerTabs.innerHTML = '';
     webviewContainer.innerHTML = '';
     
-    // Créer la liste des centres et les onglets
+    // Créer les onglets et webviews
     currentCentres.forEach(centre => {
-        // Élément dans la sidebar
-        const centerItem = document.createElement('div');
-        centerItem.className = 'center-item';
-        centerItem.dataset.centerId = centre.id;
-        centerItem.innerHTML = `
-            <div class="center-indicator" style="background-color: ${centre.couleur}"></div>
-            <div class="center-info">
-                <div class="center-name">${centre.nom}</div>
-                <div class="center-phone">${centre.telephone}</div>
-            </div>
-            <div class="center-status" id="status-${centre.id}">●</div>
-        `;
-        centerItem.addEventListener('click', () => selectCenter(centre.id));
-        centersList.appendChild(centerItem);
         
         // Onglet
         const tab = document.createElement('div');
@@ -261,7 +254,6 @@ function initializeCenters() {
         // Gérer les événements de la webview
         webview.addEventListener('dom-ready', () => {
             console.log(`Webview ${centre.nom} prête`);
-            document.getElementById(`status-${centre.id}`).style.color = '#4CAF50';
             
             // Auto-connexion si credentials disponibles
             if (centre.credentials && centre.credentials.username) {
@@ -280,7 +272,6 @@ function initializeCenters() {
         
         webview.addEventListener('did-fail-load', (e) => {
             console.error(`Erreur chargement ${centre.nom}:`, e);
-            document.getElementById(`status-${centre.id}`).style.color = '#FF5252';
         });
     });
 }
@@ -290,11 +281,6 @@ function selectCenter(centerId) {
     // Mettre à jour le centre actif
     activeCenter = centerId;
     
-    // Mettre à jour l'UI
-    document.querySelectorAll('.center-item').forEach(item => {
-        item.classList.toggle('active', item.dataset.centerId === centerId);
-    });
-    
     document.querySelectorAll('.tab').forEach(tab => {
         tab.classList.toggle('active', tab.dataset.centerId === centerId);
     });
@@ -365,7 +351,6 @@ function acceptCall(callData, centre) {
     
     // Incrémenter les stats
     callStats.calls++;
-    document.getElementById('callCount').textContent = callStats.calls;
     
     // Sauvegarder l'appel dans l'historique
     ipcRenderer.invoke('save-call-history', {
@@ -384,53 +369,8 @@ function acceptCall(callData, centre) {
 function endCall() {
     updateStatus('available');
     callStats.appointments++;
-    document.getElementById('appointmentCount').textContent = callStats.appointments;
 }
 
-// === SIMULATION D'APPELS ===
-function showCallSimulation() {
-    const modal = document.getElementById('callSimulationModal');
-    modal.style.display = 'block';
-    
-    // Charger les appels simulés
-    loadSimulatedCalls();
-    
-    // Fermer la modal
-    modal.querySelector('.close').onclick = () => {
-        modal.style.display = 'none';
-    };
-    
-    // Appel personnalisé
-    document.getElementById('customCallBtn').onclick = () => {
-        const customCall = {
-            numero: prompt('Numéro de téléphone:'),
-            nom: prompt('Nom du patient:'),
-            centreId: currentCentres[0]?.id
-        };
-        if (customCall.numero) {
-            ipcRenderer.invoke('simulate-call', customCall);
-            modal.style.display = 'none';
-        }
-    };
-}
-
-async function loadSimulatedCalls() {
-    const calls = await ipcRenderer.invoke('get-simulated-calls');
-    const listDiv = document.getElementById('simulatedCallsList');
-    
-    listDiv.innerHTML = calls.map(call => `
-        <div class="simulated-call-item" onclick="simulateThisCall('${JSON.stringify(call).replace(/'/g, "\\'")}')">
-            <div class="call-name">${call.nom}</div>
-            <div class="call-details">${call.numero} - ${call.centreNom}</div>
-        </div>
-    `).join('');
-}
-
-window.simulateThisCall = function(callDataStr) {
-    const callData = JSON.parse(callDataStr);
-    ipcRenderer.invoke('simulate-call', callData);
-    document.getElementById('callSimulationModal').style.display = 'none';
-};
 
 // === UTILITAIRES ===
 function updateStatus(status, details = '') {
@@ -529,15 +469,8 @@ function showNotification(message, type = 'info') {
 
 // Fonction pour mettre à jour les statistiques d'appels
 function updateCallStats() {
-    const callCountElement = document.getElementById('callCount');
-    const appointmentCountElement = document.getElementById('appointmentCount');
-    
-    if (callCountElement) {
-        callCountElement.textContent = callStats.calls;
-    }
-    if (appointmentCountElement) {
-        appointmentCountElement.textContent = callStats.appointments;
-    }
+    // Statistiques supprimées de l'interface
+    console.log('Stats:', { calls: callStats.calls, appointments: callStats.appointments });
 }
 
 async function saveNotes() {
@@ -701,6 +634,71 @@ function validateTerminal(terminal) {
     return availableTerminals.map(t => t.toString()).includes(terminal.toString());
 }
 
+// === GESTION DES NOTES DYNAMIQUES ===
+function toggleNotes() {
+    const notesSection = document.getElementById('notesSection');
+    const toggleBtn = document.getElementById('toggleNotesBtn');
+    
+    if (notesSection.classList.contains('visible')) {
+        hideNotes();
+    } else {
+        showNotes();
+    }
+}
+
+function showNotes() {
+    const notesSection = document.getElementById('notesSection');
+    const toggleBtn = document.getElementById('toggleNotesBtn');
+    
+    notesSection.classList.add('visible');
+    toggleBtn.classList.add('active');
+    
+    // Sauvegarder la préférence
+    localStorage.setItem('notesVisible', 'true');
+    
+    // Focus sur le textarea
+    document.getElementById('quickNotes').focus();
+}
+
+function hideNotes() {
+    const notesSection = document.getElementById('notesSection');
+    const toggleBtn = document.getElementById('toggleNotesBtn');
+    
+    notesSection.classList.remove('visible');
+    toggleBtn.classList.remove('active');
+    
+    // Sauvegarder la préférence
+    localStorage.setItem('notesVisible', 'false');
+}
+
+// === GESTION DES PRÉFÉRENCES UTILISATEUR ===
+function loadUserPreferences() {
+    // Charger l'état des notes
+    const notesVisible = localStorage.getItem('notesVisible');
+    if (notesVisible === 'true') {
+        // On n'affiche pas automatiquement les notes au démarrage
+        // L'utilisateur devra cliquer pour les afficher
+    }
+    
+    // Charger d'autres préférences si nécessaire
+    const lastTheme = localStorage.getItem('theme');
+    if (lastTheme) {
+        document.body.setAttribute('data-theme', lastTheme);
+    }
+}
+
+function saveUserPreferences() {
+    // Cette fonction peut être étendue pour sauvegarder d'autres préférences
+    const preferences = {
+        notesVisible: document.getElementById('notesSection').classList.contains('visible'),
+        theme: document.body.getAttribute('data-theme') || 'light'
+    };
+    
+    Object.keys(preferences).forEach(key => {
+        localStorage.setItem(key, preferences[key]);
+    });
+}
+
 // === GESTION INDICATEUR SIGNALR ===
 function updateSignalRIndicator(status) {
     const indicator = document.getElementById('signalrIndicator');
diff --git a/styles-modern.css b/styles-modern.css
new file mode 100644
index 0000000..0a5f3a4
--- /dev/null
+++ b/styles-modern.css
@@ -0,0 +1,839 @@
+/* === RESET ET BASE === */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+    background: #f5f5f5;
+    color: #333;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* === ANIMATIONS === */
+@keyframes slideIn {
+    from {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideOut {
+    from {
+        transform: translateX(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateX(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes slideUp {
+    from {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+    to {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideDown {
+    from {
+        transform: translateY(0);
+        opacity: 1;
+    }
+    to {
+        transform: translateY(100%);
+        opacity: 0;
+    }
+}
+
+@keyframes pulse {
+    0% {
+        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
+    }
+    70% {
+        box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
+    }
+    100% {
+        box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
+    }
+}
+
+/* === PAGES === */
+.page {
+    display: none;
+    width: 100%;
+    height: 100vh;
+}
+
+.page.active {
+    display: flex;
+}
+
+/* === PAGE DE CONNEXION === */
+#loginPage {
+    justify-content: center;
+    align-items: center;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+}
+
+.login-container {
+    background: white;
+    padding: 40px;
+    border-radius: 10px;
+    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
+    width: 90%;
+    max-width: 400px;
+}
+
+.login-container h1 {
+    text-align: center;
+    color: #667eea;
+    margin-bottom: 10px;
+    font-size: 32px;
+}
+
+/* Indicateur de statut SignalR */
+.signalr-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    margin: 15px 0;
+    padding: 10px;
+    background: #f8f9fa;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+.signalr-indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    background: #ccc;
+    transition: background 0.3s;
+}
+
+.signalr-indicator.connected {
+    background: #4CAF50;
+    animation: pulse 2s infinite;
+}
+
+.signalr-indicator.connecting {
+    background: #FFC107;
+    animation: pulse 1s infinite;
+}
+
+.signalr-indicator.disconnected,
+.signalr-indicator.error {
+    background: #F44336;
+}
+
+.signalr-indicator.disabled {
+    background: #9E9E9E;
+}
+
+.login-container h2 {
+    text-align: center;
+    color: #333;
+    margin: 20px 0;
+    font-size: 20px;
+}
+
+#loginForm input,
+#loginForm select {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    font-size: 14px;
+}
+
+#loginForm button {
+    width: 100%;
+    padding: 12px;
+    background: #667eea;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+
+#loginForm button:hover {
+    background: #5a6fd8;
+}
+
+#loginForm button:disabled {
+    background: #a8b0e8;
+    cursor: not-allowed;
+}
+
+.error-message {
+    color: #e74c3c;
+    text-align: center;
+    margin-top: 10px;
+    font-size: 14px;
+}
+
+/* Checkbox de déconnexion forcée */
+.force-disconnect-container {
+    margin: 25px 0 20px 0;
+    padding: 16px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+    transition: all 0.2s ease;
+}
+
+.force-disconnect-container:hover {
+    border-color: #dee2e6;
+    background: #f1f3f5;
+}
+
+.checkbox-label {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+    user-select: none;
+    font-size: 14px;
+    color: #333;
+    position: relative;
+}
+
+.checkbox-label input[type="checkbox"] {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 18px;
+    width: 18px;
+    left: 0;
+    top: 1px;
+    z-index: 1;
+}
+
+.checkbox-label::before {
+    content: '';
+    display: inline-block;
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    margin-top: 1px;
+    border: 2px solid #dee2e6;
+    border-radius: 4px;
+    background: white;
+    transition: all 0.2s ease;
+    flex-shrink: 0;
+}
+
+.checkbox-label input[type="checkbox"]:checked + span::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 1px;
+    width: 18px;
+    height: 18px;
+    background: #667eea;
+    border: 2px solid #667eea;
+    border-radius: 4px;
+}
+
+.checkbox-label input[type="checkbox"]:checked + span::after {
+    content: '';
+    position: absolute;
+    left: 6px;
+    top: 4px;
+    width: 6px;
+    height: 11px;
+    border: solid white;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+}
+
+.checkbox-label span {
+    font-weight: 600;
+    color: #495057;
+    letter-spacing: 0.3px;
+    padding-top: 1px;
+}
+
+.checkbox-hint {
+    display: block;
+    margin-top: 6px;
+    margin-left: 30px;
+    font-size: 13px;
+    color: #6c757d;
+    line-height: 1.5;
+}
+
+/* === PAGE PRINCIPALE === */
+#mainPage {
+    flex-direction: column;
+    height: 100vh;
+    overflow: hidden;
+}
+
+/* === HEADER === */
+header {
+    background: white;
+    padding: 15px 30px;
+    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    z-index: 1000;
+    min-height: 70px;
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+}
+
+.header-left h1 {
+    font-size: 24px;
+    color: #667eea;
+    margin: 0;
+}
+
+.agent-name {
+    font-size: 16px;
+    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;
+    background: #f8f9fa;
+    border-radius: 25px;
+    border: 1px solid #e9ecef;
+}
+
+.status-indicator {
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+}
+
+.status-indicator.available {
+    background: #4CAF50;
+    animation: pulse 2s infinite;
+}
+
+.status-indicator.busy {
+    background: #FF9800;
+    animation: pulse 1s infinite;
+}
+
+.status-indicator.offline {
+    background: #9E9E9E;
+    animation: none;
+}
+
+#statusText {
+    font-size: 14px;
+    font-weight: 500;
+    color: #495057;
+}
+
+.header-right {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.btn-icon {
+    width: 40px;
+    height: 40px;
+    padding: 0;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.btn-icon:hover {
+    background: #f8f9fa;
+    border-color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+}
+
+.btn-icon.active {
+    background: #667eea;
+    color: white;
+    border-color: #667eea;
+}
+
+.btn-secondary {
+    padding: 10px 20px;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 14px;
+    font-weight: 500;
+    color: #495057;
+}
+
+.btn-secondary:hover {
+    background: #f8f9fa;
+    border-color: #667eea;
+    color: #667eea;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
+}
+
+/* === ALERTE APPEL ENTRANT === */
+.incoming-call-alert {
+    display: none;
+    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
+    color: white;
+    padding: 20px 30px;
+    align-items: center;
+    gap: 20px;
+    animation: slideDown 0.5s;
+    position: relative;
+    z-index: 999;
+}
+
+.incoming-call-alert.active {
+    display: flex;
+}
+
+@keyframes slideDownAlert {
+    from { transform: translateY(-100%); }
+    to { transform: translateY(0); }
+}
+
+.call-icon {
+    font-size: 40px;
+    animation: ring 1s infinite;
+}
+
+@keyframes ring {
+    0%, 100% { transform: rotate(0deg); }
+    25% { transform: rotate(20deg); }
+    75% { transform: rotate(-20deg); }
+}
+
+.call-info {
+    flex: 1;
+}
+
+.call-title {
+    font-size: 14px;
+    opacity: 0.9;
+    margin-bottom: 5px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+
+.call-center {
+    font-size: 22px;
+    font-weight: bold;
+    margin-bottom: 5px;
+}
+
+.call-patient {
+    font-size: 16px;
+    opacity: 0.9;
+}
+
+.btn-accept {
+    padding: 12px 30px;
+    background: white;
+    color: #FF6B6B;
+    border: none;
+    border-radius: 8px;
+    font-size: 16px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: all 0.2s;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+}
+
+.btn-accept:hover {
+    transform: scale(1.05);
+    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
+}
+
+/* === CONTENEUR PRINCIPAL === */
+.main-container {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    flex-direction: column;
+    height: calc(100vh - 70px); /* Hauteur totale moins le header */
+}
+
+/* === ZONE PRINCIPALE === */
+.content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    background: #f5f5f5;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+    height: 100%;
+}
+
+/* === ONGLETS === */
+.tabs {
+    display: flex;
+    background: white;
+    border-bottom: 2px solid #e9ecef;
+    padding: 0 20px;
+    gap: 5px;
+    overflow-x: auto;
+    overflow-y: hidden;
+    min-height: 50px;
+    align-items: flex-end;
+    flex-shrink: 0;
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+}
+
+/* Masquer la scrollbar pour Chrome/Safari/Opera */
+.tabs::-webkit-scrollbar {
+    display: none;
+    height: 0;
+}
+
+.tab {
+    padding: 12px 24px;
+    background: #f8f9fa;
+    border: 1px solid #e9ecef;
+    border-bottom: none;
+    border-radius: 8px 8px 0 0;
+    cursor: pointer;
+    transition: all 0.2s;
+    font-size: 14px;
+    font-weight: 500;
+    color: #666;
+    margin-bottom: -2px;
+    position: relative;
+}
+
+.tab:hover {
+    background: white;
+    color: #333;
+}
+
+.tab.active {
+    background: white;
+    color: #667eea;
+    border-color: #e9ecef;
+    padding-bottom: 14px;
+    font-weight: 600;
+}
+
+.tab.active::after {
+    content: '';
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background: #667eea;
+}
+
+/* === WEBVIEW CONTAINER === */
+.webview-container {
+    flex: 1;
+    position: relative;
+    background: white;
+    overflow: hidden;
+    height: calc(100% - 50px); /* Hauteur moins les onglets */
+}
+
+.no-center-selected {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    color: #999;
+    font-size: 16px;
+}
+
+.webview-wrapper {
+    display: none;
+    flex-direction: column;
+    height: 100%;
+}
+
+.webview-toolbar {
+    background: #f8f9fa;
+    padding: 10px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.webview-toolbar button {
+    padding: 6px 12px;
+    background: white;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.webview-toolbar button:hover {
+    background: #e9ecef;
+}
+
+.webview-url {
+    flex: 1;
+    color: #666;
+    font-size: 12px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.planning-webview {
+    flex: 1;
+    width: 100%;
+    border: none;
+}
+
+/* === ZONE DE NOTES === */
+.notes-section {
+    background: white;
+    border-top: 2px solid #667eea;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    transition: transform 0.3s ease;
+    transform: translateY(100%);
+    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
+    z-index: 100;
+}
+
+.notes-section.visible {
+    transform: translateY(0);
+}
+
+.notes-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 15px 20px;
+    background: #f8f9fa;
+    border-bottom: 1px solid #e9ecef;
+}
+
+.notes-header h4 {
+    margin: 0;
+    color: #333;
+    font-size: 16px;
+    font-weight: 600;
+}
+
+.btn-close-notes {
+    background: none;
+    border: none;
+    font-size: 24px;
+    color: #999;
+    cursor: pointer;
+    padding: 0;
+    width: 30px;
+    height: 30px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 4px;
+    transition: all 0.2s;
+}
+
+.btn-close-notes:hover {
+    background: white;
+    color: #333;
+}
+
+.notes-section textarea {
+    width: 100%;
+    min-height: 120px;
+    padding: 15px 20px;
+    border: none;
+    resize: none;
+    font-family: inherit;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+.notes-section textarea:focus {
+    outline: none;
+}
+
+.btn-small {
+    margin: 0 20px 15px 20px;
+    padding: 8px 20px;
+    background: #667eea;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    transition: all 0.2s;
+}
+
+.btn-small:hover {
+    background: #5a6fd8;
+    transform: translateY(-2px);
+    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
+}
+
+/* === MODAL === */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 2000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,0.5);
+    backdrop-filter: blur(5px);
+    animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.modal-content {
+    background-color: white;
+    margin: 10% auto;
+    padding: 30px;
+    border-radius: 12px;
+    width: 80%;
+    max-width: 500px;
+    animation: slideUp 0.3s;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
+}
+
+.modal-content h2 {
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    transition: color 0.2s;
+}
+
+.close:hover {
+    color: #333;
+}
+
+.simulated-calls-list {
+    max-height: 300px;
+    overflow-y: auto;
+    margin: 20px 0;
+}
+
+.simulated-call-item {
+    padding: 12px;
+    margin-bottom: 8px;
+    background: #f8f9fa;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: all 0.2s;
+    border: 1px solid transparent;
+}
+
+.simulated-call-item:hover {
+    background: white;
+    border-color: #667eea;
+    transform: translateX(5px);
+}
+
+.call-name {
+    font-weight: 600;
+    margin-bottom: 4px;
+}
+
+.call-details {
+    font-size: 13px;
+    color: #666;
+}
+
+/* === Styles Choices.js === */
+.choices {
+    position: relative;
+    margin-bottom: 15px;
+}
+
+.choices__inner {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    padding: 12px;
+    font-size: 14px;
+}
+
+.choices.is-focused .choices__inner {
+    border-color: #667eea;
+}
+
+.choices__list--dropdown {
+    background: white;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+    margin-top: 5px;
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+}
+
+.choices__item--choice {
+    padding: 10px 15px;
+}
+
+.choices__item--choice:hover {
+    background: #f8f9fa;
+}
+
+.choices__item--choice.is-highlighted {
+    background: #667eea;
+    color: white;
+}
\ No newline at end of file