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

---
 Vue/Ajaxconnexioncookie/french.php | 452 ++++++++++++++---------------
 1 file changed, 214 insertions(+), 238 deletions(-)

diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index 7b459e9..dd20c22 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -7,141 +7,78 @@
 ?>
 
 <!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
-<div class="d-none d-md-block">
-	<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px;">
-		Portail Assuré
-	</span>
-
-	<?php if (isset($msgErreur) and $msgErreur>" "): ?>
-		<div class="text-center p-t-10">
-			<h4 class="txt3">
-				<div class="col-12 alert alert-danger">
-				<?= $msgErreur ?>
-				</div>	
-			</h4>
-		</div>
-	<?php else: ?>
-		<div class="text-center p-t-10" id="div_msgErreur">
-
-		</div>
-	<?php endif; ?> 				 
-
-	<?php if($maintenance!='1'): ?>
-		<div class="wrap-input100">
-			<label for="langue">Langue</label>
-			<select class="form-select" id="langue" name="langue"
-					
-					required autocomplete="off" onchange="javascript:changer_langue_connexion();">
-				<?php liste_options($langues, $_SESSION['lang'], true); ?>
-			</select> 
-		</div>
-		
-
-		<div class="wrap-input100">
-			<div class="wrap-input100 validate-input" data-validate="Enter Entity">
-				<label for="codeSociete">Entité</label>
-				<input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>"	
-				placeholder="Entité" style="text-align:center;" required AUTOCOMPLETE="off" 
-				onChange="javascript:changer_entite_portail();" >
-			</div>
-		</div>
-
-		<div id="div_login_portail" class="wrap-input100">
-			<div class="wrap-input100 validate-input" data-validate="Enter username">
-				<label for="login">Identifiant</label>
-				<input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>"	placeholder="Identifiant" style="text-align:center;" required AUTOCOMPLETE="off">
-			</div>
-		</div>
-
-		<div class="wrap-input100 validate-input" data-validate="Enter password">
-			<label for="mdp">Mot de passe</label>
-			<input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" style="text-align:center;" required	AUTOCOMPLETE="off">
-		</div>
-
-		<div class="container-login100-form-btn">
-			<button name="btn_connexion" id="btn_connexion" class="btn login-btn">
-				Connexion
-			</button>
-		</div>
-
-		<div class="footer">
-			Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
-		</div>
-	<?php endif; ?> 
-</div>
-
-<!-- Affichage mobile (cartes) -->
-<div class="d-md-none" style="display: none;">
-    <!-- VERSION MOBILE COMPLÈTE - SANS LE LOGO (car déjà dans portail.php) -->
-    
-    <div style="width: 100%; max-width: 100%; overflow-x: hidden; padding: 10px 15px; box-sizing: border-box;">
+<div class="d-md-none">
+    <!-- VERSION MOBILE COMPACTE SANS DÉBORDEMENT -->
+    <div style="width: 100%; max-width: 100vw; overflow-x: hidden; box-sizing: border-box; padding: 10px;">
         
-        <!-- Titre (sans le logo car déjà affiché par portail.php) -->
-        <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px; display: block; font-size: 22px; text-align: center; padding-top: 20px;">
+        <!-- Titre ajusté pour mobile -->
+        <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin: 5px 0 15px 0; display: block; font-size: 20px; text-align: center;">
             Portail Assuré
         </span>
 
         <?php if (isset($msgErreur) and $msgErreur>" "): ?>
-            <div class="text-center p-t-10" style="margin-bottom: 15px;">
-                <h4 class="txt3">
-                    <div class="col-12 alert alert-danger" style="padding: 10px; font-size: 14px; border-radius: 8px;">
-                        <?= $msgErreur ?>
-                    </div>	
-                </h4>
+            <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;">
+                    <?= $msgErreur ?>
+                </div>
             </div>
         <?php else: ?>
-            <div class="text-center p-t-10" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
+            <div class="text-center" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
         <?php endif; ?>  
 
         <?php if($maintenance!='1'): ?>
         
-        <!-- Champs de formulaire avec IDs uniques -->
-        <div class="wrap-input100" style="margin-bottom: 15px;">
-            <label for="langue_mobile" style="font-size: 12pt;">Langue</label>
-            <select class="form-select" id="langue_mobile" name="langue_mobile"
-                    style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; background: transparent; font-size: 13px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;"
-                    required autocomplete="off" onchange="changer_langue_connexion_mobile(this.value);">
-                <?php liste_options($langues, $_SESSION['lang'], true); ?>
-            </select> 
-        </div>
+        <!-- Champs de formulaire compacts pour mobile -->
+        <div style="width: 100%; max-width: 100%;">
+            <!-- Langue -->
+            <div style="margin-bottom: 15px; text-align: center;">
+                <label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label>
+                <select id="langue_mobile" name="langue_mobile"
+                        style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; background: transparent; font-size: 14px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;"
+                        required onchange="changerLangueMobile(this.value);">
+                    <?php liste_options($langues, $_SESSION['lang'], true); ?>
+                </select>
+            </div>
 
-        <div class="wrap-input100" style="margin-bottom: 15px;">
-            <div class="wrap-input100 validate-input">
-                <label for="codeSociete_mobile" style="font-size: 12pt;">Entité</label>
-                <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
-                placeholder="Entité" 
-                style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE !important; text-align: center; box-sizing: border-box; display: block;"
-                required AUTOCOMPLETE="off" 
-                onChange="changer_entite_portail_mobile(this.value);">
+            <!-- Entité -->
+            <div style="margin-bottom: 15px; text-align: center;">
+                <label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label>
+                <input type="text" id="codeSociete_mobile" name="codeSociete_mobile" value="<?= $codeSociete ?>"	
+                       placeholder="Entité" 
+                       style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;"
+                       required autocomplete="off" 
+                       onchange="changerEntiteMobile(this.value);">
+            </div>
+
+            <!-- Identifiant -->
+            <div style="margin-bottom: 15px; text-align: center;">
+                <label for="login_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label>
+                <input type="text" id="login_mobile" name="login_mobile" value="<?= $codeUtilisateur ?>"	
+                       placeholder="Identifiant" 
+                       style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;"
+                       required autocomplete="off">
+            </div>
+
+            <!-- Mot de passe -->
+            <div style="margin-bottom: 20px; text-align: center;">
+                <label for="mdp_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Mot de passe</label>
+                <input type="password" id="mdp_mobile" name="mdp_mobile" placeholder="Mot de passe" 
+                       style="width: 100%; max-width: 280px; margin: 0 auto; height: 40px; padding: 0 12px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;"
+                       required autocomplete="off">
+            </div>
+
+            <!-- Bouton Connexion -->
+            <div style="margin-bottom: 15px; text-align: center;">
+                <button type="button" id="btn_connexion_mobile" 
+                        style="width: 100%; max-width: 280px; margin: 0 auto; height: 45px; background: #7D4FFE; color: white; font-size: 16px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box; display: block;">
+                    Connexion
+                </button>
             </div>
         </div>
 
-        <div id="div_login_portail_mobile" class="wrap-input100" style="margin-bottom: 15px;">
-            <div class="wrap-input100 validate-input">
-                <label for="login_mobile" style="font-size: 12pt;">Identifiant</label>
-                <input class="input100" type="text" name="login_mobile" id="login_mobile" value="<?= $codeUtilisateur ?>"	
-                placeholder="Identifiant" 
-                style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE !important; text-align: center; box-sizing: border-box; display: block;"
-                required AUTOCOMPLETE="off">
-            </div>
-        </div>
-
-        <div class="wrap-input100 validate-input" style="margin-bottom: 20px;">
-            <label for="mdp_mobile" style="font-size: 12pt;">Mot de passe</label>
-            <input class="input100" type="password" name="mdp_mobile" id="mdp_mobile" placeholder="Mot de passe" 
-            style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE !important; text-align: center; box-sizing: border-box; display: block;"
-            required AUTOCOMPLETE="off">
-        </div>
-
-        <div class="container-login100-form-btn" style="margin-bottom: 20px; text-align: center;">
-            <button name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
-                    style="width: 100%; max-width: 300px; margin: 0 auto; height: 45px; background: #7D4FFE; color: white; font-size: 18px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box; display: block;">
-                Connexion
-            </button>
-        </div>
-
-        <div class="footer" style="position: relative; font-size: 11px; text-align: center; padding: 10px; width: 100%; box-sizing: border-box;">
-            Tous droits réservés <a href="https://www.ebene.info/" style="color: #7D4FFE;">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
+        <!-- Footer mobile -->
+        <div style="font-size: 11px; text-align: center; padding: 10px 0; color: #666; width: 100%;">
+            Tous droits réservés <a href="https://www.ebene.info/" style="color: #7D4FFE; text-decoration: none;">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
         </div>
 
         <?php endif; ?>
@@ -149,73 +86,107 @@
     </div>
 </div>
 
-<!-- STYLES ET SCRIPT POUR MOBILE -->
+<!-- STYLES POUR ÉVITER TOUT DÉBORDEMENT -->
 <style>
-    /* STYLES SPÉCIFIQUES POUR MOBILE */
+    /* STYLES MOBILE CRITIQUES - À AJOUTER DANS PORTAL.PHP OU ICI */
+    
+    /* 1. FORCER LE VIEWPORT MOBILE */
     @media screen and (max-width: 767px) {
-        /* AFFICHER LA VERSION MOBILE */
-        .d-md-none {
-            display: block !important;
+        html, body {
+            width: 100vw !important;
+            max-width: 100vw !important;
+            overflow-x: hidden !important;
+            position: relative !important;
         }
         
-        /* MASQUER LA VERSION DESKTOP */
+        /* 2. CACHER LA VERSION DESKTOP */
         .d-none.d-md-block {
             display: none !important;
         }
         
-        /* CORRECTION POUR LE LOGO DANS PORTAL.PHP */
+        /* 3. AFFICHER LA VERSION MOBILE */
+        .d-md-none {
+            display: block !important;
+            width: 100vw !important;
+            max-width: 100vw !important;
+            overflow: hidden !important;
+        }
+        
+        /* 4. CORRECTION DU CONTENEUR PRINCIPAL DANS PORTAL.PHP */
+        .container-fluid {
+            flex-direction: column !important;
+            width: 100vw !important;
+            max-width: 100vw !important;
+            margin: 0 !important;
+            padding: 0 !important;
+        }
+        
+        /* 5. CORRECTION DU LOGO DANS PORTAL.PHP */
         .logo img {
             width: 100px !important;
             height: 100px !important;
             position: relative !important;
             left: 0 !important;
-            margin: 0 auto 20px auto !important;
+            top: 0 !important;
+            margin: 10px auto !important;
             display: block !important;
         }
         
-        /* ADAPTER LE CONTENEUR PRINCIPAL */
-        .content .form-side {
+        /* 6. CORRECTION DE LA ZONE DE CONTENU DANS PORTAL.PHP */
+        .content {
+            width: 100vw !important;
+            max-width: 100vw !important;
+            padding: 5px !important;
+            margin: 0 !important;
+        }
+        
+        .form-side {
             padding-top: 10px !important;
             min-height: auto !important;
+            height: auto !important;
         }
         
-        /* STYLES DES CHAMPS MOBILES */
-        .d-md-none {
-            width: 100% !important;
-            max-width: 100% !important;
-            overflow: hidden !important;
-        }
-        
+        /* 7. STYLES DES CHAMPS MOBILES */
         .d-md-none > div {
-            width: 100% !important;
-            max-width: 100% !important;
-            margin: 0 !important;
+            width: 100vw !important;
+            max-width: 100vw !important;
             padding: 0 10px !important;
+            box-sizing: border-box !important;
         }
         
-        /* CENTRER TOUT */
-        .wrap-input100 {
-            text-align: center !important;
-            width: 100% !important;
-        }
-        
-        input, select, button {
+        /* 8. FORCER LE CONTENU À RESTER DANS LES LIMITES */
+        .d-md-none * {
             max-width: 100% !important;
             box-sizing: border-box !important;
         }
         
-        /* EMPÊCHER LE ZOOM iOS */
-        input[type="text"],
-        input[type="password"],
-        select {
-            font-size: 16px !important;
+        /* 9. ADAPTER LES INPUTS */
+        .d-md-none input,
+        .d-md-none select,
+        .d-md-none button {
+            width: 100% !important;
+            max-width: 280px !important;
+            margin-left: auto !important;
+            margin-right: auto !important;
         }
         
-        /* BOUTON HOVER */
-        .login-btn:hover {
+        /* 10. CORRECTION DU CARROUSEL */
+        .slide-container {
+            display: none !important;
+        }
+        
+        /* 11. BOUTON HOVER */
+        #btn_connexion_mobile:hover {
             background: white !important;
             color: #7D4FFE !important;
-            border: solid 2px #7D4FFE !important;
+            border: 2px solid #7D4FFE !important;
+        }
+        
+        /* 12. PLACEHOLDER */
+        .d-md-none input::placeholder {
+            font-weight: bold !important;
+            color: #7D4FFE !important;
+            opacity: 0.7 !important;
         }
     }
     
@@ -225,149 +196,154 @@
             display: none !important;
         }
     }
+    
+    /* POUR TRÈS PETITS ÉCRANS */
+    @media screen and (max-width: 320px) {
+        .d-md-none > div {
+            padding: 0 5px !important;
+        }
+        
+        .d-md-none input,
+        .d-md-none select,
+        .d-md-none button {
+            max-width: 260px !important;
+            font-size: 13px !important;
+        }
+        
+        .login100-form-title {
+            font-size: 18px !important;
+        }
+    }
 </style>
 
 <script>
-// FONCTIONS POUR LA VERSION MOBILE
-
-function changer_langue_connexion_mobile(langue) {
-    // Mettre à jour le sélecteur desktop si présent
+// FONCTIONS MOBILE SIMPLIFIÉES
+function changerLangueMobile(langue) {
+    // Synchroniser avec le desktop
     const desktopLangue = document.getElementById('langue');
     if (desktopLangue) {
         desktopLangue.value = langue;
-        // Déclencher l'événement
         const event = new Event('change');
         desktopLangue.dispatchEvent(event);
     }
-    console.log('Langue mobile changée:', langue);
 }
 
-function changer_entite_portail_mobile(entite) {
-    // Mettre à jour le champ desktop si présent
+function changerEntiteMobile(entite) {
+    // Synchroniser avec le desktop
     const desktopEntite = document.getElementById('codeSociete');
     if (desktopEntite) {
         desktopEntite.value = entite;
         const event = new Event('change');
         desktopEntite.dispatchEvent(event);
     }
-    console.log('Entité mobile changée:', entite);
 }
 
 // GESTION DE LA CONNEXION MOBILE
 document.addEventListener('DOMContentLoaded', function() {
     const btnMobile = document.getElementById('btn_connexion_mobile');
+    
     if (btnMobile) {
-        btnMobile.addEventListener('click', function(e) {
-            e.preventDefault();
-            
-            // RÉCUPÉRER LES VALEURS MOBILES
+        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();
-            const langue = document.getElementById('langue_mobile').value;
             
-            // VALIDATION
+            // Validation simple
             if (!codeSociete || !login || !mdp) {
-                alert('Veuillez remplir tous les champs obligatoires');
+                alert('Veuillez remplir tous les champs');
                 return false;
             }
             
-            // OPTION 1: Synchroniser avec le formulaire desktop existant
+            // Option 1: Utiliser le formulaire desktop existant
             const desktopForm = document.querySelector('form');
             if (desktopForm) {
-                // Mettre à jour les champs du formulaire desktop
-                const desktopFields = {
-                    'codeSociete': codeSociete,
-                    'login': login,
-                    'mdp': mdp,
-                    'langue': langue
-                };
+                // Copier les valeurs dans les champs desktop
+                const fields = [
+                    {id: 'codeSociete', value: codeSociete},
+                    {id: 'login', value: login},
+                    {id: 'mdp', value: mdp}
+                ];
                 
-                for (const [name, value] of Object.entries(desktopFields)) {
-                    const field = document.getElementById(name);
-                    if (field) {
-                        field.value = value;
-                    } else {
-                        // Créer un champ caché si nécessaire
-                        const hiddenInput = document.createElement('input');
-                        hiddenInput.type = 'hidden';
-                        hiddenInput.name = name;
-                        hiddenInput.value = value;
-                        desktopForm.appendChild(hiddenInput);
-                    }
-                }
+                fields.forEach(field => {
+                    const el = document.getElementById(field.id);
+                    if (el) el.value = field.value;
+                });
                 
-                // Soumettre le formulaire
+                // Soumettre
                 desktopForm.submit();
                 return true;
             }
             
-            // OPTION 2: Créer un nouveau formulaire
-            console.log('Soumission formulaire mobile:', {codeSociete, login, mdp, langue});
-            
-            // Ici, vous devriez appeler votre fonction de connexion existante
-            // Par exemple: connexionUtilisateur(codeSociete, login, mdp, langue);
-            
-            // Pour l'instant, on redirige vers la même page avec les paramètres
+            // Option 2: Redirection avec paramètres
             const params = new URLSearchParams();
+            params.append('action', 'connexion');
             params.append('codeSociete', codeSociete);
             params.append('login', login);
             params.append('mdp', mdp);
-            params.append('langue', langue);
+            params.append('langue', document.getElementById('langue_mobile').value);
             
-            window.location.href = window.location.pathname + '?' + params.toString();
+            window.location.href = '?' + params.toString();
         });
     }
     
-    // GESTION RESPONSIVE
-    function checkScreenSize() {
+    // GESTION RESPONSIVE AUTOMATIQUE
+    function gererAffichageResponsive() {
         const isMobile = window.innerWidth <= 767;
-        const mobileContainer = document.querySelector('.d-md-none');
-        const desktopContainer = document.querySelector('.d-none.d-md-block');
+        const mobileDiv = document.querySelector('.d-md-none');
+        const desktopDiv = document.querySelector('.d-none.d-md-block');
         
         if (isMobile) {
             // Mode mobile
-            if (mobileContainer) mobileContainer.style.display = 'block';
-            if (desktopContainer) desktopContainer.style.display = 'none';
+            if (mobileDiv) mobileDiv.style.display = 'block';
+            if (desktopDiv) desktopDiv.style.display = 'none';
+            
+            // Forcer le viewport mobile
+            document.documentElement.style.overflowX = 'hidden';
+            document.body.style.overflowX = 'hidden';
         } else {
             // Mode desktop
-            if (mobileContainer) mobileContainer.style.display = 'none';
-            if (desktopContainer) desktopContainer.style.display = 'block';
+            if (mobileDiv) mobileDiv.style.display = 'none';
+            if (desktopDiv) desktopDiv.style.display = 'block';
         }
     }
     
-    // Vérifier au chargement et au redimensionnement
-    checkScreenSize();
-    window.addEventListener('resize', checkScreenSize);
+    // Initialisation
+    gererAffichageResponsive();
+    window.addEventListener('resize', gererAffichageResponsive);
+    
+    // CORRECTION URGENTE POUR DÉBORDEMENT
+    setTimeout(function() {
+        const mobileElements = document.querySelectorAll('.d-md-none, .d-md-none *');
+        mobileElements.forEach(el => {
+            el.style.maxWidth = '100vw';
+            el.style.boxSizing = 'border-box';
+            el.style.overflowX = 'hidden';
+        });
+    }, 100);
 });
 
-// SYNCHRONISATION DES CHAMPS (optionnel)
-function synchronizeFields() {
-    // Synchroniser les valeurs entre mobile et desktop
-    const fieldsToSync = [
-        {mobile: 'codeSociete_mobile', desktop: 'codeSociete'},
-        {mobile: 'login_mobile', desktop: 'login'},
-        {mobile: 'langue_mobile', desktop: 'langue'}
-    ];
-    
-    fieldsToSync.forEach(field => {
-        const mobileField = document.getElementById(field.mobile);
-        const desktopField = document.getElementById(field.desktop);
+// FONCTION POUR FORCER L'AFFICHAGE CORRECT SUR MOBILE
+function corrigerDebordementMobile() {
+    if (window.innerWidth <= 767) {
+        // Forcer les dimensions
+        document.querySelectorAll('input, select, button, div').forEach(el => {
+            el.style.maxWidth = '100%';
+            el.style.boxSizing = 'border-box';
+        });
         
-        if (mobileField && desktopField) {
-            // Mobile → Desktop
-            mobileField.addEventListener('input', function() {
-                desktopField.value = this.value;
-            });
-            
-            // Desktop → Mobile (si on change de vue)
-            desktopField.addEventListener('input', function() {
-                mobileField.value = this.value;
-            });
+        // Corriger le conteneur principal
+        const container = document.querySelector('.container-fluid');
+        if (container) {
+            container.style.width = '100vw';
+            container.style.maxWidth = '100vw';
+            container.style.overflowX = 'hidden';
         }
-    });
+    }
 }
 
-// Lancer la synchronisation
-setTimeout(synchronizeFields, 500);
+// Exécuter plusieurs fois pour être sûr
+window.addEventListener('load', corrigerDebordementMobile);
+window.addEventListener('resize', corrigerDebordementMobile);
+setTimeout(corrigerDebordementMobile, 500);
 </script>
\ No newline at end of file