diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index c18acbb..e6bed19 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -1,72 +1,151 @@
-<?php  
-    $maintenance = $societeusersaas['maintenance'];
-    if($maintenance=='1') {
-        $msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard!';
-    }
+<?php 
+	$maintenance = $societeusersaas['maintenance'];
+	if($maintenance=='1')
+	{
+		$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;">
+		Portail Assuré
+	</span>
 
-<div class="container py-4" style="max-width: 420px;">
-    
-    <!-- Titre -->
-    <h2 class="text-center mb-3" style="font-family: Play-Bold; color:#e5e5e5;">
+	<?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="height:100vh; display:flex; flex-direction:column; background:#f5f5f5;">
+
+    <!-- HEADER FIXE -->
+    <div style="padding:20px; background:#1a73e8; color:white; text-align:center; font-family:Play-Bold; font-size:22px;">
         Portail Assuré
-    </h2>
+    </div>
 
-    <!-- Message d'erreur -->
-    <?php if (isset($msgErreur) && trim($msgErreur) !== ""): ?>
-        <div class="alert alert-danger text-center">
-            <?= $msgErreur ?>
-        </div>
-    <?php else: ?>
-        <div id="div_msgErreur" class="text-center mb-2"></div>
-    <?php endif; ?>
+    <!-- CONTENU SCROLLABLE -->
+    <div style="flex:1; overflow-y:auto; padding:15px;">
 
-    <?php if($maintenance!='1'): ?>
+        <!-- Message d'erreur -->
+        <?php if (isset($msgErreur) and $msgErreur>" "): ?>
+            <div class="alert alert-danger text-center" style="font-size:15px;">
+                <?= $msgErreur ?>
+            </div>
+        <?php else: ?>
+            <div id="div_msgErreur"></div>
+        <?php endif; ?>
 
-        <!-- Langue -->
-        <div class="mb-3">
-            <label for="langue" class="form-label">Langue</label>
-            <select class="form-select" id="langue" name="langue" required autocomplete="off"
-                    onchange="changer_langue_connexion();">
-                <?php liste_options($langues, $_SESSION['lang'], true); ?>
-            </select>
+        <?php if($maintenance!='1'): ?>
+
+        <!-- Carte Langue -->
+        <div class="card shadow-sm mb-3" style="border-radius:14px;">
+            <div class="card-body">
+                <label for="langue" class="form-label">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>
 
-        <!-- Entité -->
-        <div class="mb-3">
-            <label for="codeSociete" class="form-label">Entité</label>
-            <input type="text" class="form-control text-center" name="codeSociete" id="codeSociete"
-                   value="<?= $codeSociete ?>" placeholder="Entité" required autocomplete="off"
-                   onchange="changer_entite_portail();">
+        <!-- Carte Entité -->
+        <div class="card shadow-sm mb-3" style="border-radius:14px;">
+            <div class="card-body">
+                <label for="codeSociete" class="form-label">Entité</label>
+                <input class="form-control text-center" type="text" name="codeSociete" id="codeSociete"
+                       value="<?= $codeSociete ?>" placeholder="Entité" required autocomplete="off"
+                       onchange="javascript:changer_entite_portail();">
+            </div>
         </div>
 
-        <!-- Identifiant -->
-        <div class="mb-3">
-            <label for="login" class="form-label">Identifiant</label>
-            <input type="text" class="form-control text-center" name="login" id="login"
-                   value="<?= $codeUtilisateur ?>" placeholder="Identifiant" required autocomplete="off">
+        <!-- Carte Identifiant -->
+        <div class="card shadow-sm mb-3" style="border-radius:14px;">
+            <div class="card-body">
+                <label for="login" class="form-label">Identifiant</label>
+                <input class="form-control text-center" type="text" name="login" id="login"
+                       value="<?= $codeUtilisateur ?>" placeholder="Identifiant" required autocomplete="off">
+            </div>
         </div>
 
-        <!-- Mot de passe -->
-        <div class="mb-3">
-            <label for="mdp" class="form-label">Mot de passe</label>
-            <input type="password" class="form-control text-center" name="mdp" id="mdp"
-                   placeholder="Mot de passe" required autocomplete="off">
+        <!-- Carte Mot de passe -->
+        <div class="card shadow-sm mb-3" style="border-radius:14px;">
+            <div class="card-body">
+                <label for="mdp" class="form-label">Mot de passe</label>
+                <input class="form-control text-center" type="password" name="mdp" id="mdp"
+                       placeholder="Mot de passe" required autocomplete="off">
+            </div>
         </div>
 
-        <!-- Bouton connexion -->
-        <div class="d-grid mt-4">
-            <button name="btn_connexion" id="btn_connexion" class="btn btn-primary py-2">
+        <!-- Bouton Connexion -->
+        <div class="text-center mt-4">
+            <button name="btn_connexion" id="btn_connexion"
+                    class="btn btn-primary px-5 py-2"
+                    style="border-radius:30px; font-size:17px;">
                 Connexion
             </button>
         </div>
 
-        <!-- Footer -->
-        <div class="text-center mt-4 small text-muted">
-            Tous droits réservés 
-            <a href="https://www.ebene.info/" target="_blank">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
-        </div>
+        <?php endif; ?>
 
-    <?php endif; ?>
+    </div>
+
+    <!-- FOOTER FIXE -->
+    <div style="padding:10px; text-align:center; font-size:13px; color:#666;">
+        Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
+    </div>
 
 </div>
\ No newline at end of file