fs

Bootstrap_new/css/style_moderne.css

@@ -824,3 +824,23 @@ body {
 .animate__bounceIn {
   animation-name: bounceIn;
 }
+
+/* Critical CSS Inline (optionnel pour les performances) */
+.sr-only {
+      position: absolute;
+      width: 1px;
+      height: 1px;
+      padding: 0;
+      margin: -1px;
+      overflow: hidden;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      border: 0;
+  }
+  
+  /* Prévenir le FOUC (Flash of Unstyled Content) */
+  .js-loading *,
+  .js-loading *:before,
+  .js-loading *:after {
+      animation-play-state: paused !important;
+  }

Vue/gabarit.php

@@ -117,6 +117,14 @@ $retourVue = $infovue['lienRetour'];
             
             <!-- Context Panel -->
             <?php include 'contexte.php'; ?>
+
+            <button class="btn btn-primary btn-context-toggle shadow-lg" 
+                    id="showSideNav"
+                    title="<?= _("Afficher le contexte") ?>"
+                    style="position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 1005; border-radius: 20px 0 0 20px; padding: 12px 8px; background: #0088cf; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;">
+                <i class="fas fa-chevron-left me-1"></i>
+                <i class="fas fa-info-circle"></i>
+            </button>
         </div>
         
         <!-- ======= Modals ======= -->
@@ -211,11 +219,20 @@ $retourVue = $infovue['lienRetour'];
         <button id="btn_pop_dernier_messagerie" type="button" class="d-none" data-bs-toggle="modal" data-bs-target="#popderniermessagerie"></button>
         
         <!-- ======= Scripts ======= -->
-        
-        <!-- Core Libraries -->
         <script src="Bootstrap/js/jquery.min.js"></script>
         <script src="Bootstrap/js/jquery-ui.js"></script>
-        <script src="Bootstrap/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
+
+        <!-- ======= Scripts ======= -->
+        <script src="Bootstrap/js/jquery.min.js"></script>
+        <script src="Bootstrap/js/jquery-ui.js"></script>
+        
+        <!-- Bootstrap 5 Bundle -->
+        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
+        
+        <!-- Bootstrap Select (seulement si nécessaire) -->
+        <?php if (isset($needSelectPicker) && $needSelectPicker): ?>
+            <script src="Bootstrap_new/select/js/bootstrap-select.min.js"></script>
+        <?php endif; ?>
         
         <!-- DataTables -->
         <script src="Bootstrap_new/datatables/datatable.min.js"></script>
@@ -236,7 +253,6 @@ $retourVue = $infovue['lienRetour'];
         <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
 
         <!-- Toastr -->
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
         <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
 
         <!-- Datepicker by language -->
@@ -250,41 +266,71 @@ $retourVue = $infovue['lienRetour'];
         <script src="Js/fonctions.js?ver=<?= date('Y.m.d.H') ?>"></script>
         <script src="<?= $_SESSION['dossierSociete'] . '/Js/societe.js' ?>"></script>
 
-        <!-- Animation Library -->
+        <!-- Script d'initialisation -->
-        <script src="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.js"></script>
-        
-        <!-- Font Awesome -->
-        <script src="https://kit.fontawesome.com/your-kit-code.js" crossorigin="anonymous"></script>
-
-        <!-- Script d'initialisation amélioré -->
         <script type="text/javascript">
             $(document).ready(function() {
-                // Initialisation des tooltips Bootstrap
+                console.log("Document ready - Initialisation du gabarit");
-                var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
+                
-                var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+                // Initialiser Bootstrap Select
-                    return new bootstrap.Tooltip(tooltipTriggerEl);
+                if (typeof $.fn.selectpicker !== 'undefined') {
-                });
+                    $('.selectpicker').selectpicker();
+                    console.log("Bootstrap Select initialisé");
+                } else {
+                    console.warn("Bootstrap Select n'est pas chargé");
+                }
+                
+                // Initialiser Select2
+                if (typeof $.fn.select2 !== 'undefined') {
+                    $('.select2').select2({
+                        theme: 'bootstrap-5'
+                    });
+                    console.log("Select2 initialisé");
+                }
                 
                 // Gestion du sidebar
                 $('.toggle-sidebar-btn').on('click', function() {
+                    console.log("Toggle sidebar cliqué");
                     $('body').toggleClass('toggle-sidebar');
-                    $('#sidebar').toggleClass('collapsed');
-                    $('.main').toggleClass('expanded');
                 });
                 
-                // Gestion de la barre de contexte
+                // Gestion de la barre de contexte - version corrigée
-                $("#showSideNav").click(function() {
+                $(document).on('click', '#showSideNav', function(e) {
-                    $("#barre_laterale_d").addClass("active");
+                    console.log("Show context panel cliqué");
-                    $(this).fadeOut(200);
+                    e.preventDefault();
-                    // Animation smooth
+                    e.stopPropagation();
-                    $('body').css('transition', 'margin-right 0.3s ease');
+                    
-                    $('body').css('margin-right', '300px');
+                    // Vérifier si l'élément existe
+                    if ($('#barre_laterale_d').length) {
+                        $('#barre_laterale_d').addClass('active');
+                        $(this).fadeOut(200);
+                        console.log("Panel de contexte activé");
+                    } else {
+                        console.error("Élément #barre_laterale_d non trouvé");
+                    }
                 });
                 
-                $("#hideSideNav").click(function() {
+                $(document).on('click', '#hideSideNav', function(e) {
-                    $("#barre_laterale_d").removeClass("active");
+                    console.log("Hide context panel cliqué");
-                    $("#showSideNav").fadeIn(200);
+                    e.preventDefault();
-                    $('body').css('margin-right', '0');
+                    e.stopPropagation();
+                    
+                    $('#barre_laterale_d').removeClass('active');
+                    $('#showSideNav').fadeIn(200);
+                });
+                
+                // Fermer le panneau si on clique en dehors
+                $(document).on('click', function(e) {
+                    if ($('#barre_laterale_d').hasClass('active') && 
+                        !$(e.target).closest('#barre_laterale_d').length && 
+                        !$(e.target).closest('#showSideNav').length) {
+                        $('#barre_laterale_d').removeClass('active');
+                        $('#showSideNav').fadeIn(200);
+                    }
+                });
+                
+                // Empêcher la fermeture quand on clique dans le panneau
+                $('#barre_laterale_d').on('click', function(e) {
+                    e.stopPropagation();
                 });
                 
                 // Synchronisation du badge de notifications
@@ -294,13 +340,6 @@ $retourVue = $infovue['lienRetour'];
                     
                     if(count > 0) {
                         badge.text(count).show();
-                        // Animation si nouveau message
-                        if(count > parseInt(badge.data('last-count') || 0)) {
-                            badge.addClass('animate__animated animate__pulse animate__fast');
-                            setTimeout(() => {
-                                badge.removeClass('animate__animated animate__pulse animate__fast');
-                            }, 1000);
-                        }
                         badge.data('last-count', count);
                     } else {
                         badge.hide();
@@ -312,54 +351,52 @@ $retourVue = $infovue['lienRetour'];
                 syncBadge(); // Première exécution
                 
                 // Rafraîchir le gabarit
-                raffraichier_gabarit();
+                if (typeof raffraichier_gabarit === 'function') {
-                
+                    raffraichier_gabarit();
-                // Timer pour le rafraîchissement des messages
-                $('#timer').timer({
-                    duration: '60s',
-                    callback: function() { 
-                        raffraichier_messagerie();
-                        syncBadge();
-                    },
-                    repeat: true
-                });
-                
-                // Toastr configuration
-                toastr.options = {
-                    "closeButton": true,
-                    "progressBar": true,
-                    "positionClass": "toast-top-right",
-                    "timeOut": "5000",
-                    "extendedTimeOut": "1000"
-                };
-                
-                // Auto-focus sur les champs de recherche
-                if ($('input[autofocus]').length) {
-                    setTimeout(function() {
-                        $('input[autofocus]').focus().select();
-                    }, 100);
                 }
                 
-                // Prévenir la perte de données non sauvegardées
+                // Timer pour le rafraîchissement des messages
-                $(window).on('beforeunload', function() {
+                if ($('#timer').length && typeof $.fn.timer !== 'undefined') {
-                    if ($('.unsaved-changes').length > 0) {
+                    $('#timer').timer({
-                        return "Vous avez des modifications non sauvegardées. Voulez-vous vraiment quitter ?";
+                        duration: '60s',
-                    }
+                        callback: function() { 
-                });
+                            if (typeof raffraichier_messagerie === 'function') {
+                                raffraichier_messagerie();
+                            }
+                            syncBadge();
+                        },
+                        repeat: true
+                    });
+                }
+                
+                // Toastr configuration
+                if (typeof toastr !== 'undefined') {
+                    toastr.options = {
+                        "closeButton": true,
+                        "progressBar": true,
+                        "positionClass": "toast-top-right",
+                        "timeOut": "5000",
+                        "extendedTimeOut": "1000"
+                    };
+                }
+                
+                // Debug: Vérifier que les éléments existent
+                console.log("Éléments trouvés:");
+                console.log("#showSideNav:", $('#showSideNav').length);
+                console.log("#hideSideNav:", $('#hideSideNav').length);
+                console.log("#barre_laterale_d:", $('#barre_laterale_d').length);
             });
             
-            // Fonction pour marquer les changements non sauvegardés
+            // Fonction pour ouvrir le panneau depuis d'autres scripts
-            function markUnsaved() {
+            function ouvrirPanneauContexte() {
-                $('form').addClass('unsaved-changes');
+                $('#barre_laterale_d').addClass('active');
+                $('#showSideNav').fadeOut(200);
             }
             
-            // Démarrer l'auto-sauvegarde si besoin
+            // Fonction pour fermer le panneau depuis d'autres scripts
-            function startAutosave(selector, interval = 30000) {
+            function fermerPanneauContexte() {
-                setInterval(function() {
+                $('#barre_laterale_d').removeClass('active');
-                    if ($(selector).hasClass('unsaved-changes')) {
+                $('#showSideNav').fadeIn(200);
-                        $(selector).submit();
-                    }
-                }, interval);
             }
         </script>
                 

Vue/head.php

@@ -1,9 +1,10 @@
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <meta name="description" content="INTER SANTÉ - Gestionnaire de santé">
     <meta name="author" content="INTER SANTÉ">
+    <meta name="robots" content="noindex, nofollow">
     
     <base href="<?= $racineWeb ?>">
     
@@ -11,63 +12,113 @@
     <link rel="icon" href="Bootstrap_new/images/favicon.ico" type="image/x-icon">
     <link rel="apple-touch-icon" href="Bootstrap_new/images/apple-touch-icon.png">
     
-    <!-- Google Fonts -->
+    <!-- Preconnect pour améliorer les performances -->
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet">
+    <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
+    
+    <!-- Google Fonts -->
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" media="print" onload="this.media='all'">
     
     <!-- Bootstrap 5 CSS -->
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
     
-    <!-- Vendor CSS -->
+    <!-- Font Awesome avec fallback -->
-    <link href="Bootstrap/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" integrity="sha512-Avb2QiuDEEvB4bZJYdft2mNjVShBftLdPG8FJ0V7irTLQ8Uo0qcPxh4Plq7G5tGm0rU+1SPhVotteLpBERwTkw==" crossorigin="anonymous" referrerpolicy="no-referrer">
-    <link href="Bootstrap/vendor/quill/quill.snow.css" rel="stylesheet">
+    
-    <link href="Bootstrap_new/css/datatables.min.css" rel="stylesheet">
+    <!-- Vendor CSS - Chargement différé -->
-    <link href="Bootstrap_new/css/select2.min.css" rel="stylesheet">
+    <link href="Bootstrap/vendor/boxicons/css/boxicons.min.css" rel="stylesheet" media="print" onload="this.media='all'">
+    
+    <!-- Toastr CSS -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" integrity="sha512-vKMx8UnXk60zUwyUnUPM3HbQo8QfmNx7+ltw8Pm5zLusl1XIfwcxo8DbWCqMGKaWeNxWA8yrx5v3SaVpMvR3CA==" crossorigin="anonymous" referrerpolicy="no-referrer">
     
     <!-- SweetAlert2 -->
     <link href="https://cdn.jsdelivr.net/npm/sweetalert2@11.14.1/dist/sweetalert2.min.css" rel="stylesheet">
     
-    <!-- Chart.js -->
+    <!-- Animate.css - version locale recommandée -->
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+    <link href="Bootstrap_new/css/animate.min.css" rel="stylesheet">
+    
+    <!-- Vendor CSS spécifiques (chargement conditionnel) -->
+    <?php if (strpos($_SERVER['REQUEST_URI'], 'quill') !== false): ?>
+        <link href="Bootstrap/vendor/quill/quill.snow.css" rel="stylesheet">
+    <?php endif; ?>
+    
+    <!-- DataTables CSS (seulement si nécessaire) -->
+    <?php if (isset($needDatatables) && $needDatatables): ?>
+        <link href="Bootstrap_new/css/datatables.min.css" rel="stylesheet">
+    <?php endif; ?>
+    
+    <!-- Select2 CSS (seulement si nécessaire) -->
+    <?php if (isset($needSelect2) && $needSelect2): ?>
+        <link href="Bootstrap_new/css/select2.min.css" rel="stylesheet">
+    <?php endif; ?>
+    
+    <!-- Chart.js - déplacé en bas du body pour les performances -->
     
     <!-- Styles personnalisés -->
     <link href="Bootstrap_new/css/style_moderne.css?ver=<?= date('Y.m.d.H') ?>" rel="stylesheet">
     
-    <!-- Animate.css pour les animations -->
+    <title><?= htmlspecialchars($_SESSION['vue'] ?? 'Dashboard') ?> - INTER SANTÉ</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
-
-    <!-- Font Awesome -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
-
-    <!-- Toastr -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
-    
-    
-    <title><?= htmlspecialchars($_SESSION['vue']) ?> - INTER SANTÉ</title>
     
     <!-- Scripts de prévention de clic droit en mode production -->
     <script type="text/javascript">
-        var modeDev = <?= json_encode($modeDev) ?>;
+        // Marquer le body comme loading
-        if (modeDev != "1") {
+        document.documentElement.className = 'js-loading';
-            document.addEventListener('contextmenu', function(e) {
-                e.preventDefault();
-                toastr.warning('<?= _("Le clic droit est désactivé en mode production") ?>');
-            });
         
-            // Prévention des raccourcis clavier
+        var modeDev = <?= json_encode($modeDev ?? '0') ?>;
-            document.addEventListener('keydown', function(e) {
+        
-                // Ctrl+U (afficher le code source)
+        // Charger toastr seulement si disponible
-                if (e.ctrlKey && e.keyCode === 85) {
+        function safeToastr() {
+            if (typeof toastr !== 'undefined') {
+                return toastr;
+            }
+            return {
+                warning: function(msg) { console.warn(msg); },
+                error: function(msg) { console.error(msg); },
+                success: function(msg) { console.log(msg); },
+                info: function(msg) { console.info(msg); }
+            };
+        }
+        
+        if (modeDev != "1") {
+            document.addEventListener('DOMContentLoaded', function() {
+                document.addEventListener('contextmenu', function(e) {
                     e.preventDefault();
-                    toastr.warning('<?= _("Cette fonctionnalité est désactivée") ?>');
+                    safeToastr().warning('<?= _("Le clic droit est désactivé en mode production") ?>');
-                }
+                });
-                // F12 (outils de développement)
+                
-                if (e.keyCode === 123) {
+                // Prévention des raccourcis clavier
-                    e.preventDefault();
+                document.addEventListener('keydown', function(e) {
-                    toastr.warning('<?= _("Les outils de développement sont désactivés") ?>');
+                    // Ctrl+U (afficher le code source)
-                }
+                    if (e.ctrlKey && e.keyCode === 85) {
+                        e.preventDefault();
+                        safeToastr().warning('<?= _("Cette fonctionnalité est désactivée") ?>');
+                    }
+                    // F12 (outils de développement)
+                    if (e.keyCode === 123) {
+                        e.preventDefault();
+                        safeToastr().warning('<?= _("Les outils de développement sont désactivés") ?>');
+                    }
+                    // Ctrl+Shift+I, Ctrl+Shift+J, Ctrl+Shift+C
+                    if (e.ctrlKey && e.shiftKey && [73, 74, 67].includes(e.keyCode)) {
+                        e.preventDefault();
+                        safeToastr().warning('<?= _("Cette fonctionnalité est désactivée") ?>');
+                    }
+                });
             });
         }
+        
+        // Retirer la classe loading quand la page est chargée
+        window.addEventListener('load', function() {
+            document.documentElement.className = document.documentElement.className.replace('js-loading', '');
+        });
+    </script>
+    
+    <!-- Polyfill pour les vieux navigateurs -->
+    <script>
+        // Polyfill pour les fonctions ES6 si nécessaire
+        if (!window.Promise) {
+            document.write('<script src="https://cdn.jsdelivr.net/npm/promise-polyfill@8/dist/polyfill.min.js"><\/script>');
+        }
     </script>
 </head>