diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index 6e6c272..00bd0d9 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -5,6 +5,7 @@
 		$msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard!';
 	}
 ?>
+
 <!-- 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;">
@@ -23,7 +24,7 @@
 		<div class="text-center p-t-10" id="div_msgErreur">
 
 		</div>
-	<?php endif; ?>  
+	<?php endif; ?> 				 
 
 	<?php if($maintenance!='1'): ?>
 		<div class="wrap-input100">
@@ -70,198 +71,161 @@
 </div>
 
 <!-- Affichage mobile (cartes) -->
-<style>
-    /* Global mobile reset pour éviter les débordements */
-    .mobile-portail-assure,
-    .mobile-portail-assure * {
-        box-sizing: border-box;
-        max-width: 100%;
-    }
+<div class="d-md-none">
+    <div class="mobile-login-container" style="max-width: 100%; padding: 20px 15px; margin: 0 auto;">
+        
+        <!-- En-tête mobile -->
+        <div class="text-center mb-4">
+            <span class="login100-form-title" style="font-family: Play-Bold; color:#7D4FFE; font-size: 24px; display: block; margin-bottom: 5px;">
+                Portail Assuré
+            </span>
+            <div style="height: 3px; width: 60px; background-color: #7D4FFE; margin: 0 auto;"></div>
+        </div>
 
-    .mobile-portail-assure {
-        width: 100%;
-        height: 100vh;
-        overflow: hidden; /* pas de scroll horizontal ni vertical forcé ici */
-        background: #1c1c1c; /* fond sombre proche d’un thème portail */
+        <!-- Message d'erreur -->
+        <?php if (isset($msgErreur) and $msgErreur>" "): ?>
+            <div class="text-center mb-3">
+                <div class="alert alert-danger p-2" style="font-size: 13px; border-radius: 8px;">
+                    <?= $msgErreur ?>
+                </div>
+            </div>
+        <?php else: ?>
+            <div class="text-center mb-3" id="div_msgErreur_mobile"></div>
+        <?php endif; ?>  
+
+        <?php if($maintenance!='1'): ?>
+        
+        <!-- Carte de connexion mobile -->
+        <div class="mobile-login-card" style="background: white; border-radius: 12px; padding: 25px 20px; box-shadow: 0 4px 12px rgba(125, 79, 254, 0.1); margin-bottom: 20px;">
+            
+            <!-- Champ Langue -->
+            <div class="mb-3">
+                <label for="langue_mobile" class="form-label required" style="font-size: 14px; color: #7D4FFE; font-weight: 600; display: block; margin-bottom: 5px;">
+                    Langue
+                </label>
+                <select class="form-select" id="langue_mobile" name="langue_mobile"
+                        style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid #7D4FFE !important; font-size: 14px; background-color: #ffffff; color: #7D4FFE; box-sizing: border-box;"
+                        required autocomplete="off" onchange="javascript:changer_langue_connexion_mobile();">
+                    <?php liste_options($langues, $_SESSION['lang'], true); ?>
+                </select> 
+            </div>
+
+            <!-- Champ Entité -->
+            <div class="mb-3">
+                <label for="codeSociete_mobile" class="form-label required" style="font-size: 14px; color: #7D4FFE; font-weight: 600; display: block; margin-bottom: 5px;">
+                    Entité
+                </label>
+                <input class="form-control" type="text" name="codeSociete_mobile" id="codeSociete_mobile" 
+                       value="<?= $codeSociete ?>" placeholder="Entité" 
+                       style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid #7D4FFE !important; font-size: 14px; color: #7D4FFE; text-align: center; background-color: #ffffff; box-sizing: border-box;"
+                       required AUTOCOMPLETE="off" onChange="javascript:changer_entite_portail_mobile();">
+            </div>
+
+            <!-- Champ Identifiant -->
+            <div class="mb-3" id="div_login_portail_mobile">
+                <label for="login_mobile" class="form-label required" style="font-size: 14px; color: #7D4FFE; font-weight: 600; display: block; margin-bottom: 5px;">
+                    Identifiant
+                </label>
+                <input class="form-control" type="text" name="login_mobile" id="login_mobile" 
+                       value="<?= $codeUtilisateur ?>" placeholder="Identifiant" 
+                       style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid #7D4FFE !important; font-size: 14px; color: #7D4FFE; text-align: center; background-color: #ffffff; box-sizing: border-box;"
+                       required AUTOCOMPLETE="off">
+            </div>
+
+            <!-- Champ Mot de passe -->
+            <div class="mb-4">
+                <label for="mdp_mobile" class="form-label required" style="font-size: 14px; color: #7D4FFE; font-weight: 600; display: block; margin-bottom: 5px;">
+                    Mot de passe
+                </label>
+                <input class="form-control" type="password" name="mdp_mobile" id="mdp_mobile" 
+                       placeholder="Mot de passe" 
+                       style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid #7D4FFE !important; font-size: 14px; color: #7D4FFE; text-align: center; background-color: #ffffff; box-sizing: border-box;"
+                       required AUTOCOMPLETE="off">
+            </div>
+
+            <!-- Bouton Connexion -->
+            <div class="text-center">
+                <button name="btn_connexion_mobile" id="btn_connexion_mobile" 
+                        class="btn login-btn-mobile"
+                        style="width: 100%; padding: 12px; background: #7D4FFE; color: white; font-size: 16px; font-weight: 700; border-radius: 8px; border: none; transition: all 0.3s;">
+                    Connexion
+                </button>
+            </div>
+
+        </div> <!-- Fin de la carte -->
+
+        <!-- Footer mobile -->
+        <div class="footer-mobile text-center mt-4" style="font-size: 11px; color: #666; padding: 0 10px;">
+            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; ?>
+        
+    </div>
+</div>
+
+<!-- Styles spécifiques mobile -->
+<style>
+    .mobile-login-container {
+        height: 100%;
         display: flex;
         flex-direction: column;
-        color: #e5e5e5;
-        font-family: Arial, sans-serif;
+        justify-content: center;
     }
-
-    .mobile-header {
-        padding: 12px 16px;
-        text-align: center;
-        font-size: 20px;
-        font-family: Play-Bold, Arial, sans-serif;
-        color: #e5e5e5; /* même couleur que ton titre desktop */
+    
+    .login-btn-mobile:hover {
+        background: white !important;
+        color: #7D4FFE !important;
+        border: solid 2px #7D4FFE !important;
     }
-
-    .mobile-main {
-        flex: 1;
-        padding: 8px 12px 4px 12px;
-        overflow-y: auto; /* léger scroll vertical possible si petit écran */
+    
+    .form-control::placeholder {
+        font-weight: bold;
+        color: #7D4FFE;
+        opacity: 0.7;
     }
-
-    .mobile-card {
-        background: #2a2a2a;
-        border-radius: 10px;
-        padding: 12px;
-        box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-        animation: fadeInUpMobile 0.35s ease-out;
-    }
-
-    .mobile-field {
-        margin-bottom: 8px;
-    }
-
-    .mobile-field label {
-        display: block;
-        font-size: 13px;
-        margin-bottom: 3px;
-        color: #cccccc;
-    }
-
-    .mobile-input,
-    .mobile-select {
-        width: 100%;
-        height: 40px;
-        border-radius: 6px;
-        border: 1px solid #444;
-        background: #1f1f1f;
-        color: #e5e5e5;
-        text-align: center;
-        font-size: 14px;
-        padding: 0 8px;
-    }
-
-    .mobile-input::placeholder {
-        color: #777;
-    }
-
-    .mobile-select:focus,
-    .mobile-input:focus {
+    
+    .form-control:focus {
         outline: none;
-        border-color: #007bff;
-        box-shadow: 0 0 4px rgba(0,123,255,0.7);
+        border-color: #7D4FFE !important;
+        box-shadow: 0 0 0 3px rgba(125, 79, 254, 0.1);
     }
-
-    .mobile-alert {
-        background: #8b1a1a;
-        border-radius: 6px;
-        padding: 8px;
-        font-size: 13px;
-        text-align: center;
-        margin-bottom: 8px;
-    }
-
-    .mobile-btn {
-        width: 100%;
-        height: 42px;
-        border-radius: 20px;
-        border: none;
-        background: #007bff; /* bleu type bouton bootstrap, proche de ce que tu as sûrement */
-        color: #fff;
-        font-size: 16px;
-        margin-top: 6px;
-        transition: background 0.2s ease, transform 0.1s ease;
-    }
-
-    .mobile-btn:active {
-        transform: scale(0.97);
-        background: #0062cc;
-    }
-
-    .mobile-footer {
-        text-align: center;
-        font-size: 11px;
-        padding: 4px 6px 6px 6px;
-        color: #999999;
-        background: #1c1c1c;
-    }
-
-    .mobile-footer a {
-        color: #e5e5e5;
-        text-decoration: none;
-    }
-
-    .mobile-footer a:hover {
-        text-decoration: underline;
-    }
-
-    @keyframes fadeInUpMobile {
-        from { opacity: 0; transform: translateY(10px); }
-        to   { opacity: 1; transform: translateY(0); }
+    
+    /* Ajustement pour les très petits écrans */
+    @media screen and (max-width: 360px) {
+        .mobile-login-card {
+            padding: 20px 15px;
+        }
+        
+        .login100-form-title {
+            font-size: 22px !important;
+        }
     }
 </style>
 
-<div class="mobile-portail-assure d-md-none">
+<script>
+// Adaptation des fonctions JavaScript pour mobile
+function changer_langue_connexion_mobile() {
+    // À adapter avec votre logique existante
+    changer_langue_connexion();
+}
 
-    <!-- HEADER -->
-    <div class="mobile-header">
-        Portail Assuré
-    </div>
+function changer_entite_portail_mobile() {
+    // À adapter avec votre logique existante
+    changer_entite_portail();
+}
 
-    <!-- CONTENU PRINCIPAL -->
-    <div class="mobile-main">
-        <div class="mobile-card">
-
-            <!-- Message d'erreur -->
-            <?php if (isset($msgErreur) and $msgErreur>" "): ?>
-                <div class="mobile-alert">
-                    <?= $msgErreur ?>
-                </div>
-            <?php else: ?>
-                <div id="div_msgErreur"></div>
-            <?php endif; ?>
-
-            <?php if($maintenance!='1'): ?>
-
-            <!-- Langue -->
-            <div class="mobile-field">
-                <label for="langue">Langue</label>
-                <select class="mobile-select" id="langue" name="langue"
-                        required autocomplete="off"
-                        onchange="javascript:changer_langue_connexion();">
-                    <?php liste_options($langues, $_SESSION['lang'], true); ?>
-                </select>
-            </div>
-
-            <!-- Entité -->
-            <div class="mobile-field">
-                <label for="codeSociete">Entité</label>
-                <input class="mobile-input" type="text" name="codeSociete" id="codeSociete"
-                       value="<?= $codeSociete ?>" placeholder="Entité" required autocomplete="off"
-                       onchange="javascript:changer_entite_portail();">
-            </div>
-
-            <!-- Identifiant -->
-            <div class="mobile-field">
-                <label for="login">Identifiant</label>
-                <input class="mobile-input" type="text" name="login" id="login"
-                       value="<?= $codeUtilisateur ?>" placeholder="Identifiant" required autocomplete="off">
-            </div>
-
-            <!-- Mot de passe -->
-            <div class="mobile-field">
-                <label for="mdp">Mot de passe</label>
-                <input class="mobile-input" type="password" name="mdp" id="mdp"
-                       placeholder="Mot de passe" required autocomplete="off">
-            </div>
-
-            <!-- Bouton -->
-            <button name="btn_connexion" id="btn_connexion" class="mobile-btn">
-                Connexion
-            </button>
-
-            <?php endif; ?>
-        </div>
-    </div>
-
-    <!-- FOOTER -->
-    <div class="mobile-footer">
-        Tous droits réservés
-        <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
-    </div>
-
-</div>
\ No newline at end of file
+// Gestion du bouton de connexion mobile
+document.getElementById('btn_connexion_mobile')?.addEventListener('click', function() {
+    // Récupération des valeurs des champs mobiles
+    const codeSociete = document.getElementById('codeSociete_mobile').value;
+    const login = document.getElementById('login_mobile').value;
+    const mdp = document.getElementById('mdp_mobile').value;
+    const langue = document.getElementById('langue_mobile').value;
+    
+    // Ici, ajoutez votre logique de connexion
+    // Pour l'instant, on utilise les mêmes fonctions que le desktop
+    // Vous devrez adapter selon votre architecture
+    console.log('Connexion mobile:', {codeSociete, login, mdp, langue});
+});
+</script>
\ No newline at end of file