From df853975265d87ad58ca6d98761bdcf99d1c25e2 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Sat, 13 Dec 2025 16:03:15 +0000
Subject: [PATCH] =?UTF-8?q?Verion=20DeepSeek=20corrig=C3=A9e=20V1.5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Vue/Ajaxconnexioncookie/french.php | 561 ++++++++++++++++-------------
 1 file changed, 303 insertions(+), 258 deletions(-)

diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index 3886777..422c1e6 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -8,78 +8,78 @@
 
 <!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
 <div class="d-md-none">
-    <!-- VERSION MOBILE ULTRA-COMPACTE - PAS DE SCROLL -->
-    <div style="width: 100%; max-width: 100%; overflow: hidden; box-sizing: border-box; padding: 5px 10px; height: 100vh; display: flex; flex-direction: column; justify-content: center;">
+    <!-- VERSION MOBILE PARFAITEMENT HARMONISÉE -->
+    <div style="width: 100%; max-width: 100%; box-sizing: border-box; padding: 15px;">
         
-        <!-- Titre compact -->
-        <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin: 0 0 10px 0; display: block; font-size: 18px; text-align: center;">
+        <!-- Titre -->
+        <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin: 10px 0 20px 0; display: block; font-size: 20px; text-align: center; line-height: 1.2;">
             Portail Assuré
         </span>
 
         <?php if (isset($msgErreur) and $msgErreur>" "): ?>
-            <div class="text-center" style="margin-bottom: 10px;">
-                <div style="background-color: #f8d7da; color: #721c24; padding: 8px; border-radius: 6px; font-size: 12px; border: 1px solid #f5c6cb; margin: 0 auto 10px; max-width: 280px;">
+            <div class="text-center" style="margin-bottom: 15px;">
+                <div style="background-color: #f8d7da; color: #721c24; padding: 10px; border-radius: 8px; font-size: 13px; border: 1px solid #f5c6cb; max-width: 300px; margin: 0 auto;">
                     <?= $msgErreur ?>
                 </div>
             </div>
         <?php else: ?>
-            <div class="text-center" id="div_msgErreur_mobile" style="margin-bottom: 10px;"></div>
+            <div class="text-center" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
         <?php endif; ?>  
 
         <?php if($maintenance!='1'): ?>
         
-        <!-- Conteneur compact pour tous les champs -->
-        <div style="width: 100%; max-width: 280px; margin: 0 auto;">
+        <!-- CONTENEUR UNIFORME POUR TOUS LES ÉLÉMENTS -->
+        <div style="width: 100%; max-width: 300px; margin: 0 auto;">
             
-            <!-- Langue - Version ultra compacte -->
-            <div style="margin-bottom: 10px;">
-                <label for="langue_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Langue</label>
+            <!-- Langue -->
+            <div style="margin-bottom: 15px;">
+                <label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px; text-align: center; width: 100%;">Langue</label>
                 <select id="langue_mobile" name="langue_mobile"
-                        style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; background: transparent; font-size: 13px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                        style="width: 100%; height: 42px; padding: 0 15px; border: 2px solid #7D4FFE; border-radius: 9px; background: #ffffff; font-size: 14px; color: #7D4FFE; text-align: center; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; appearance: none;"
                         required onchange="changerLangueMobile(this.value);">
                     <?php liste_options($langues, $_SESSION['lang'], true); ?>
                 </select>
             </div>
 
             <!-- Entité -->
-            <div style="margin-bottom: 10px;">
-                <label for="codeSociete_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Entité</label>
+            <div style="margin-bottom: 15px;">
+                <label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px; text-align: center; width: 100%;">Entité</label>
                 <input type="text" id="codeSociete_mobile" name="codeSociete_mobile" value="<?= $codeSociete ?>"	
                        placeholder="Entité" 
-                       style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                       style="width: 100%; height: 42px; padding: 0 15px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; font-size: 14px; background: #ffffff;"
                        required autocomplete="off" 
                        onchange="changerEntiteMobile(this.value);">
             </div>
 
             <!-- Identifiant -->
-            <div style="margin-bottom: 10px;">
-                <label for="login_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Identifiant</label>
+            <div style="margin-bottom: 15px;">
+                <label for="login_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px; text-align: center; width: 100%;">Identifiant</label>
                 <input type="text" id="login_mobile" name="login_mobile" value="<?= $codeUtilisateur ?>"	
                        placeholder="Identifiant" 
-                       style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                       style="width: 100%; height: 42px; padding: 0 15px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; font-size: 14px; background: #ffffff;"
                        required autocomplete="off">
             </div>
 
             <!-- Mot de passe -->
-            <div style="margin-bottom: 15px;">
-                <label for="mdp_mobile" style="font-size: 11pt; display: block; margin-bottom: 3px; text-align: center;">Mot de passe</label>
+            <div style="margin-bottom: 20px;">
+                <label for="mdp_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px; text-align: center; width: 100%;">Mot de passe</label>
                 <input type="password" id="mdp_mobile" name="mdp_mobile" placeholder="Mot de passe" 
-                       style="width: 100%; height: 35px; padding: 0 10px; border: 2px solid #7D4FFE; border-radius: 7px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                       style="width: 100%; height: 42px; padding: 0 15px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; font-size: 14px; background: #ffffff;"
                        required autocomplete="off">
             </div>
 
-            <!-- Bouton Connexion -->
-            <div style="margin-bottom: 10px;">
+            <!-- Bouton Connexion - MÊME LARGEUR -->
+            <div style="margin-bottom: 15px;">
                 <button type="button" id="btn_connexion_mobile" 
-                        style="width: 100%; height: 40px; background: #7D4FFE; color: white; font-size: 15px; font-weight: 700; border-radius: 7px; border: none; box-sizing: border-box;">
+                        style="width: 100%; height: 46px; background: #7D4FFE; color: white; font-size: 16px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box; cursor: pointer;">
                     Connexion
                 </button>
             </div>
             
         </div>
 
-        <!-- Footer compact -->
-        <div style="font-size: 10px; text-align: center; padding: 5px 0; color: #666; width: 100%; margin-top: auto;">
+        <!-- Footer -->
+        <div style="font-size: 11px; text-align: center; padding: 10px 0; color: #666; width: 100%; max-width: 300px; margin: 20px auto 0;">
             Tous droits réservés <a href="https://www.ebene.info/" style="color: #7D4FFE; text-decoration: none;">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
         </div>
 
@@ -88,187 +88,135 @@
     </div>
 </div>
 
-<!-- STYLES CRITIQUES POUR MOBILE SANS SCROLL -->
+<!-- STYLES POUR HARMONISATION ET CONNEXION -->
 <style>
-    /* FORCE L'AFFICHAGE MOBILE SANS SCROLL */
+    /* STYLES MOBILE HARMONISÉS */
     @media screen and (max-width: 767px) {
-        /* 1. MASQUER DESKTOP */
+        /* 1. MASQUER DESKTOP, MONTRER MOBILE */
         .d-none.d-md-block {
             display: none !important;
         }
         
-        /* 2. AFFICHER MOBILE */
         .d-md-none {
             display: block !important;
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
             width: 100vw !important;
-            height: 100vh !important;
-            max-height: 100vh !important;
-            overflow: hidden !important;
-            z-index: 9999 !important;
-            background: white !important;
+            max-width: 100vw !important;
+            overflow-x: hidden !important;
         }
         
-        /* 3. CORRECTION DU CONTENEUR DANS PORTAL.PHP */
+        /* 2. CORRECTIONS GLOBALES */
         body, html {
+            overflow-x: hidden !important;
             width: 100vw !important;
-            height: 100vh !important;
-            overflow: hidden !important;
-            margin: 0 !important;
-            padding: 0 !important;
         }
         
         .container-fluid {
             width: 100vw !important;
-            height: 100vh !important;
-            max-height: 100vh !important;
-            overflow: hidden !important;
-            margin: 0 !important;
-            padding: 0 !important;
+            max-width: 100vw !important;
+        }
+        
+        /* 3. HARMONISATION DES LARGEURS - TOUT À 300px */
+        .d-md-none > div > div:last-child {
+            width: 100% !important;
+            max-width: 300px !important;
+            margin: 0 auto !important;
+        }
+        
+        /* 4. STYLES IDENTIQUES POUR TOUS LES CHAMPS */
+        .d-md-none select,
+        .d-md-none input[type="text"],
+        .d-md-none input[type="password"] {
+            width: 100% !important;
+            max-width: 300px !important;
+            height: 42px !important;
+            border: 2px solid #7D4FFE !important;
+            border-radius: 9px !important;
+            background: #ffffff !important;
+            color: #7D4FFE !important;
+            font-size: 14px !important;
+            text-align: center !important;
+            padding: 0 15px !important;
+            box-sizing: border-box !important;
+            margin: 0 auto !important;
             display: block !important;
         }
         
-        /* 4. CORRECTION DU LOGO - PLUS PETIT ET PLACÉ EN HAUT */
-        .logo img {
-            width: 80px !important;
-            height: 80px !important;
-            position: absolute !important;
-            top: 10px !important;
-            left: 50% !important;
-            transform: translateX(-50%) !important;
-            margin: 0 !important;
-            z-index: 10000 !important;
-        }
-        
-        /* 5. CORRECTION DE LA ZONE DE CONTENU */
-        .content {
-            width: 100vw !important;
-            height: 100vh !important;
-            max-height: 100vh !important;
-            padding: 60px 0 0 0 !important; /* Espace pour le logo */
-            margin: 0 !important;
-            overflow: hidden !important;
-        }
-        
-        .form-side {
-            padding-top: 0 !important;
-            min-height: auto !important;
-            height: calc(100vh - 60px) !important;
-            overflow: hidden !important;
-        }
-        
-        /* 6. MASQUER LE CARROUSEL */
-        .slide-container {
-            display: none !important;
-        }
-        
-        /* 7. STYLES DE LA VERSION MOBILE */
-        .d-md-none > div {
+        /* 5. BOUTON - MÊME LARGEUR */
+        #btn_connexion_mobile {
             width: 100% !important;
-            height: 100% !important;
-            max-height: 100% !important;
-            overflow: hidden !important;
-            padding: 0 !important;
-        }
-        
-        /* 8. FORCER TOUT À TENIR DANS L'ÉCRAN */
-        .d-md-none * {
-            max-width: 100% !important;
-            box-sizing: border-box !important;
-        }
-        
-        /* 9. CONTENEUR DES CHAMPS */
-        .d-md-none > div > div:last-child {
-            width: 100% !important;
-            max-width: 280px !important;
+            max-width: 300px !important;
+            height: 46px !important;
+            background: #7D4FFE !important;
+            color: white !important;
+            border-radius: 9px !important;
+            font-size: 16px !important;
             margin: 0 auto !important;
-            padding: 0 10px !important;
+            display: block !important;
         }
         
-        /* 10. ESPACEMENT RÉDUIT */
-        .wrap-input100, .validate-input {
-            margin-bottom: 8px !important;
-        }
-        
-        /* 11. TAILLES RÉDUITES */
-        label {
-            font-size: 11pt !important;
-            margin-bottom: 2px !important;
-        }
-        
-        input, select {
-            height: 35px !important;
-            font-size: 14px !important;
-            padding: 0 8px !important;
-        }
-        
-        button {
-            height: 40px !important;
-            font-size: 15px !important;
-        }
-        
-        /* 12. TITRE PLUS PETIT */
-        .login100-form-title {
-            font-size: 18px !important;
-            margin: 5px 0 15px 0 !important;
-        }
-        
-        /* 13. BOUTON HOVER */
-        #btn_connexion_mobile:hover {
+        /* 6. HOVER CONSISTANT */
+        #btn_connexion_mobile:hover,
+        #btn_connexion_mobile:active {
             background: white !important;
             color: #7D4FFE !important;
             border: 2px solid #7D4FFE !important;
         }
         
-        /* 14. FOOTER TRÈS PETIT */
-        .footer {
-            font-size: 10px !important;
-            padding: 5px 0 !important;
-            position: static !important;
-            margin-top: auto !important;
+        /* 7. FOCUS STYLES */
+        .d-md-none select:focus,
+        .d-md-none input:focus {
+            outline: none !important;
+            box-shadow: 0 0 0 3px rgba(125, 79, 254, 0.2) !important;
+        }
+        
+        /* 8. PLACEHOLDER */
+        .d-md-none input::placeholder {
+            font-weight: bold !important;
+            color: #7D4FFE !important;
+            opacity: 0.7 !important;
+        }
+        
+        /* 9. LABELS CONSISTANTS */
+        .d-md-none label {
+            font-size: 12pt !important;
+            text-align: center !important;
+            display: block !important;
+            width: 100% !important;
+            margin-bottom: 5px !important;
+        }
+        
+        /* 10. CORRECTION SELECT (supprimer flèche par défaut) */
+        .d-md-none select {
+            -webkit-appearance: none !important;
+            -moz-appearance: none !important;
+            appearance: none !important;
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%237D4FFE'%3e%3cpath d='M7 10l5 5 5-5z'/%3e%3c/svg%3e") !important;
+            background-repeat: no-repeat !important;
+            background-position: right 15px center !important;
+            background-size: 20px !important;
+        }
+        
+        /* 11. ESPACEMENT UNIFORME */
+        .d-md-none > div > div:last-child > div {
+            margin-bottom: 15px !important;
+        }
+        
+        /* 12. FOOTER HARMONISÉ */
+        .d-md-none .footer {
+            max-width: 300px !important;
+            margin: 20px auto 0 !important;
+            font-size: 11px !important;
         }
     }
     
-    /* POUR TRÈS PETITS ÉCRANS (iPhone SE, etc.) */
-    @media screen and (max-width: 320px) and (max-height: 600px) {
-        .logo img {
-            width: 60px !important;
-            height: 60px !important;
-            top: 5px !important;
-        }
-        
-        .content {
-            padding-top: 50px !important;
-        }
-        
-        .form-side {
-            height: calc(100vh - 50px) !important;
-        }
-        
-        .login100-form-title {
-            font-size: 16px !important;
-            margin: 0 0 10px 0 !important;
-        }
-        
-        .d-md-none > div > div:last-child {
-            max-width: 260px !important;
-            padding: 0 5px !important;
-        }
-        
-        input, select {
-            height: 32px !important;
-            font-size: 13px !important;
-        }
-        
-        button {
-            height: 36px !important;
-            font-size: 14px !important;
-        }
-        
-        label {
-            font-size: 10pt !important;
+    /* POUR TRÈS PETITS ÉCRANS */
+    @media screen and (max-width: 320px) {
+        .d-md-none > div > div:last-child,
+        .d-md-none select,
+        .d-md-none input,
+        #btn_connexion_mobile,
+        .d-md-none .footer {
+            max-width: 280px !important;
         }
     }
     
@@ -281,12 +229,47 @@
 </style>
 
 <script>
-// FONCTIONS MOBILE SIMPLIFIÉES
+// ============================================
+// LOGIQUE DE CONNEXION FONCTIONNELLE
+// ============================================
+
+// 1. SYNCHRONISATION AVEC LE DESKTOP
+function synchroniserAvecDesktop() {
+    // Synchroniser les valeurs entre mobile et desktop
+    const champs = [
+        {mobile: 'langue_mobile', desktop: 'langue'},
+        {mobile: 'codeSociete_mobile', desktop: 'codeSociete'},
+        {mobile: 'login_mobile', desktop: 'login'},
+        {mobile: 'mdp_mobile', desktop: 'mdp'}
+    ];
+    
+    champs.forEach(champ => {
+        const champMobile = document.getElementById(champ.mobile);
+        const champDesktop = document.getElementById(champ.desktop);
+        
+        if (champMobile && champDesktop) {
+            // Mobile → Desktop
+            champMobile.addEventListener('change', function() {
+                champDesktop.value = this.value;
+            });
+            
+            // Desktop → Mobile (au cas où)
+            champDesktop.addEventListener('change', function() {
+                champMobile.value = this.value;
+            });
+        }
+    });
+}
+
+// 2. FONCTIONS DE CHANGEMENT
 function changerLangueMobile(langue) {
     const desktopLangue = document.getElementById('langue');
     if (desktopLangue) {
         desktopLangue.value = langue;
-        desktopLangue.dispatchEvent(new Event('change'));
+        // Déclencher l'événement original
+        if (typeof changer_langue_connexion === 'function') {
+            changer_langue_connexion();
+        }
     }
 }
 
@@ -294,98 +277,160 @@ function changerEntiteMobile(entite) {
     const desktopEntite = document.getElementById('codeSociete');
     if (desktopEntite) {
         desktopEntite.value = entite;
-        desktopEntite.dispatchEvent(new Event('change'));
+        // Déclencher l'événement original
+        if (typeof changer_entite_portail === 'function') {
+            changer_entite_portail();
+        }
     }
 }
 
-// INITIALISATION MOBILE
-document.addEventListener('DOMContentLoaded', function() {
-    // Gestionnaire du bouton mobile
-    const btnMobile = document.getElementById('btn_connexion_mobile');
-    if (btnMobile) {
-        btnMobile.addEventListener('click', function() {
-            // Récupérer les valeurs
-            const codeSociete = document.getElementById('codeSociete_mobile')?.value.trim() || '';
-            const login = document.getElementById('login_mobile')?.value.trim() || '';
-            const mdp = document.getElementById('mdp_mobile')?.value.trim() || '';
-            
-            // Validation
-            if (!codeSociete || !login || !mdp) {
-                alert('Veuillez remplir tous les champs');
-                return false;
-            }
-            
-            // Utiliser le formulaire desktop s'il existe
-            const desktopForm = document.querySelector('form');
-            if (desktopForm) {
-                // Mettre à jour les champs desktop
-                ['codeSociete', 'login', 'mdp'].forEach(field => {
-                    const desktopField = document.getElementById(field);
-                    const mobileField = document.getElementById(field + '_mobile');
-                    if (desktopField && mobileField) {
-                        desktopField.value = mobileField.value;
-                    }
-                });
-                
-                // Soumettre
-                desktopForm.submit();
-            } else {
-                // Fallback
-                console.log('Connexion mobile:', {codeSociete, login, mdp});
-                // Ici votre logique de connexion
+// 3. FONCTION DE CONNEXION PRINCIPALE
+function connecterMobile() {
+    // Récupérer les valeurs
+    const codeSociete = document.getElementById('codeSociete_mobile').value.trim();
+    const login = document.getElementById('login_mobile').value.trim();
+    const mdp = document.getElementById('mdp_mobile').value.trim();
+    const langue = document.getElementById('langue_mobile').value;
+    
+    // Validation
+    if (!codeSociete || !login || !mdp) {
+        alert('Veuillez remplir tous les champs obligatoires');
+        return false;
+    }
+    
+    console.log('Tentative de connexion mobile:', {codeSociete, login, mdp, langue});
+    
+    // OPTION 1: Utiliser le formulaire desktop existant
+    const formulaireDesktop = document.querySelector('form');
+    if (formulaireDesktop) {
+        // Mettre à jour les champs du formulaire
+        const donnees = {
+            'codeSociete': codeSociete,
+            'login': login,
+            'mdp': mdp,
+            'langue': langue
+        };
+        
+        Object.keys(donnees).forEach(nom => {
+            const champ = document.getElementById(nom);
+            if (champ) {
+                champ.value = donnees[nom];
             }
         });
+        
+        // Soumettre le formulaire
+        formulaireDesktop.submit();
+        return true;
     }
     
-    // FORCER L'AFFICHAGE SANS SCROLL
-    function forcerSansScroll() {
-        if (window.innerWidth <= 767) {
-            // Désactiver tout scroll
-            document.documentElement.style.overflow = 'hidden';
-            document.body.style.overflow = 'hidden';
-            
-            // Ajuster la hauteur
-            const mobileContainer = document.querySelector('.d-md-none');
-            if (mobileContainer) {
-                mobileContainer.style.height = window.innerHeight + 'px';
-            }
-            
-            // Cacher desktop, montrer mobile
-            const desktop = document.querySelector('.d-none.d-md-block');
-            const mobile = document.querySelector('.d-md-none');
-            
-            if (desktop) desktop.style.display = 'none';
-            if (mobile) mobile.style.display = 'block';
+    // OPTION 2: Si pas de formulaire, utiliser fetch/AJAX
+    // (Adaptez cette partie à votre backend)
+    const donnees = new FormData();
+    donnees.append('codeSociete', codeSociete);
+    donnees.append('login', login);
+    donnees.append('mdp', mdp);
+    donnees.append('langue', langue);
+    donnees.append('action', 'connexion_mobile');
+    
+    fetch(window.location.href, {
+        method: 'POST',
+        body: donnees,
+        headers: {
+            'X-Requested-With': 'XMLHttpRequest'
         }
-    }
-    
-    // Appliquer immédiatement
-    forcerSansScroll();
-    
-    // Réappliquer sur resize
-    window.addEventListener('resize', forcerSansScroll);
-    window.addEventListener('orientationchange', function() {
-        setTimeout(forcerSansScroll, 100);
+    })
+    .then(response => response.json())
+    .then(data => {
+        if (data.success) {
+            window.location.href = data.redirect || window.location.href;
+        } else {
+            alert(data.message || 'Erreur de connexion');
+        }
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+        alert('Erreur réseau');
     });
     
-    // Ajuster après le chargement des images
-    window.addEventListener('load', forcerSansScroll);
-});
+    return false;
+}
 
-// CORRECTION URGENTE APRÈS CHARGEMENT
-setTimeout(function() {
-    if (window.innerWidth <= 767) {
-        // Bloquer tout scroll
-        document.body.style.overflow = 'hidden';
-        document.body.style.height = '100vh';
-        document.body.style.maxHeight = '100vh';
+// 4. INITIALISATION AU CHARGEMENT
+document.addEventListener('DOMContentLoaded', function() {
+    // Synchroniser les champs
+    synchroniserAvecDesktop();
+    
+    // Gérer le bouton de connexion mobile
+    const btnMobile = document.getElementById('btn_connexion_mobile');
+    if (btnMobile) {
+        btnMobile.addEventListener('click', connecterMobile);
+    }
+    
+    // Gérer la touche Entrée
+    document.querySelectorAll('.d-md-none input').forEach(input => {
+        input.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                connecterMobile();
+            }
+        });
+    });
+    
+    // Gestion responsive
+    function gererAffichageResponsive() {
+        const isMobile = window.innerWidth <= 767;
+        const mobileDiv = document.querySelector('.d-md-none');
+        const desktopDiv = document.querySelector('.d-none.d-md-block');
         
-        // Ajuster le contenu
-        const formSide = document.querySelector('.form-side');
-        if (formSide) {
-            formSide.style.overflow = 'hidden';
-            formSide.style.maxHeight = 'calc(100vh - 70px)';
+        if (isMobile) {
+            if (mobileDiv) mobileDiv.style.display = 'block';
+            if (desktopDiv) desktopDiv.style.display = 'none';
+        } else {
+            if (mobileDiv) mobileDiv.style.display = 'none';
+            if (desktopDiv) desktopDiv.style.display = 'block';
         }
     }
-}, 200);
+    
+    // Appliquer
+    gererAffichageResponsive();
+    window.addEventListener('resize', gererAffichageResponsive);
+    
+    // Forcer l'harmonisation des largeurs
+    setTimeout(function() {
+        if (window.innerWidth <= 767) {
+            const elements = document.querySelectorAll('.d-md-none select, .d-md-none input, #btn_connexion_mobile');
+            elements.forEach(el => {
+                el.style.width = '100%';
+                el.style.maxWidth = '300px';
+                el.style.margin = '0 auto';
+                el.style.display = 'block';
+            });
+        }
+    }, 100);
+});
+
+// 5. FALLBACK: Si les fonctions desktop existent, les utiliser
+function utiliserFonctionsDesktop() {
+    // Bouton de connexion desktop
+    const btnDesktop = document.getElementById('btn_connexion');
+    if (btnDesktop) {
+        btnDesktop.addEventListener('click', function() {
+            // Récupérer les valeurs mobiles
+            const codeSociete = document.getElementById('codeSociete_mobile').value;
+            const login = document.getElementById('login_mobile').value;
+            const mdp = document.getElementById('mdp_mobile').value;
+            
+            // Mettre à jour les champs desktop
+            document.getElementById('codeSociete').value = codeSociete;
+            document.getElementById('login').value = login;
+            document.getElementById('mdp').value = mdp;
+            
+            // Déclencher le clic sur le bouton desktop
+            this.click();
+        });
+    }
+}
+
+// Exécuter le fallback
+setTimeout(utiliserFonctionsDesktop, 500);
 </script>
\ No newline at end of file