From 73746f2f8dc9c49c77bdddc4e4e66227aebbc12e Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Sat, 13 Dec 2025 13:08:14 +0000
Subject: [PATCH] Connexion mobile

---
 Vue/Ajaxconnexioncookie/french.php | 161 ++++++++++++++++++++---------
 1 file changed, 114 insertions(+), 47 deletions(-)

diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index e6bed19..4d59d4a 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -70,19 +70,97 @@
 </div>
 
 <!-- Affichage mobile (cartes) -->
-<div class="d-md-none" style="height:100vh; display:flex; flex-direction:column; background:#f5f5f5;">
+<style>
+    /* Empêche tout scroll horizontal */
+    .mobile-app {
+        width: 100%;
+        max-width: 100%;
+        overflow-x: hidden;
+        background: #f0f0f0;
+        height: 100vh;
+        display: flex;
+        flex-direction: column;
+    }
 
-    <!-- HEADER FIXE -->
-    <div style="padding:20px; background:#1a73e8; color:white; text-align:center; font-family:Play-Bold; font-size:22px;">
+    /* Contenu scrollable vertical uniquement */
+    .mobile-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 15px;
+    }
+
+    /* Cartes compactes */
+    .mobile-card {
+        background: white;
+        border-radius: 12px;
+        padding: 15px;
+        margin-bottom: 12px;
+        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
+        animation: fadeInUp 0.4s ease;
+    }
+
+    /* Animation d’apparition */
+    @keyframes fadeInUp {
+        from { opacity: 0; transform: translateY(15px); }
+        to   { opacity: 1; transform: translateY(0); }
+    }
+
+    /* Uniformisation des champs */
+    .mobile-input, .mobile-select {
+        width: 100%;
+        height: 48px;
+        border-radius: 8px;
+        border: 1px solid #ccc;
+        text-align: center;
+        font-size: 16px;
+        background: #fafafa;
+    }
+
+    /* Bouton connexion */
+    .mobile-btn {
+        width: 100%;
+        height: 50px;
+        border-radius: 30px;
+        background: #1a73e8;
+        color: white;
+        font-size: 18px;
+        border: none;
+        animation: fadeInUp 0.5s ease;
+    }
+
+    /* Header */
+    .mobile-header {
+        background: #1a73e8;
+        color: white;
+        padding: 18px;
+        text-align: center;
+        font-size: 22px;
+        font-family: Play-Bold;
+    }
+
+    /* Footer */
+    .mobile-footer {
+        text-align: center;
+        padding: 10px;
+        font-size: 13px;
+        color: #666;
+    }
+</style>
+
+
+<div class="mobile-app d-md-none">
+
+    <!-- HEADER -->
+    <div class="mobile-header">
         Portail Assuré
     </div>
 
-    <!-- CONTENU SCROLLABLE -->
-    <div style="flex:1; overflow-y:auto; padding:15px;">
+    <!-- CONTENU -->
+    <div class="mobile-content">
 
         <!-- Message d'erreur -->
         <?php if (isset($msgErreur) and $msgErreur>" "): ?>
-            <div class="alert alert-danger text-center" style="font-size:15px;">
+            <div class="alert alert-danger text-center mobile-card">
                 <?= $msgErreur ?>
             </div>
         <?php else: ?>
@@ -91,60 +169,49 @@
 
         <?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>
+        <!-- Langue -->
+        <div class="mobile-card">
+            <label for="langue">Langue</label>
+            <select class="mobile-select" id="langue" name="langue"
+                    onchange="javascript:changer_langue_connexion();" required>
+                <?php liste_options($langues, $_SESSION['lang'], true); ?>
+            </select>
         </div>
 
-        <!-- 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>
+        <!-- Entité -->
+        <div class="mobile-card">
+            <label for="codeSociete">Entité</label>
+            <input class="mobile-input" type="text" name="codeSociete" id="codeSociete"
+                   value="<?= $codeSociete ?>" placeholder="Entité" autocomplete="off"
+                   onchange="javascript:changer_entite_portail();" required>
         </div>
 
-        <!-- 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>
+        <!-- Identifiant -->
+        <div class="mobile-card">
+            <label for="login">Identifiant</label>
+            <input class="mobile-input" type="text" name="login" id="login"
+                   value="<?= $codeUtilisateur ?>" placeholder="Identifiant"
+                   autocomplete="off" required>
         </div>
 
-        <!-- 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>
+        <!-- Mot de passe -->
+        <div class="mobile-card">
+            <label for="mdp">Mot de passe</label>
+            <input class="mobile-input" type="password" name="mdp" id="mdp"
+                   placeholder="Mot de passe" autocomplete="off" required>
         </div>
 
-        <!-- 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>
+        <!-- Bouton -->
+        <button class="mobile-btn" id="btn_connexion" name="btn_connexion">
+            Connexion
+        </button>
 
         <?php endif; ?>
 
     </div>
 
-    <!-- FOOTER FIXE -->
-    <div style="padding:10px; text-align:center; font-size:13px; color:#666;">
+    <!-- FOOTER -->
+    <div class="mobile-footer">
         Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
     </div>