diff --git a/Vue/Ajaxconnexioncookie/french.php b/Vue/Ajaxconnexioncookie/french.php
index 9ad080c..b6b862c 100755
--- a/Vue/Ajaxconnexioncookie/french.php
+++ b/Vue/Ajaxconnexioncookie/french.php
@@ -1,44 +1,42 @@
-<?php 
- echo "sorel"
-?>
-
-<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px;">
-	RADIANT : Portail Souscripteur
-</span>
-
-<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="sr-only">
-	<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 ?>"	>
+<div class="login-card">
+	
+	<div class="login-header">
+		<h2>RADIANT : Portail Souscripteur</h2>
 	</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 class="form-group">
+		<label for="langue" class="required">Langue</label>
+		<select class="form-select custom-input" id="langue" name="langue" required autocomplete="off" onchange="changer_langue_connexion();">
+			<?php liste_options($langues, $_SESSION['lang'], true); ?>
+		</select>
 	</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>
+	<input class="sr-only" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>">
 
-<div class="container-login100-form-btn">
-	<button name="btn_connexion" id="btn_connexion" class="btn login-btn">
+	<div class="form-group">
+		<label for="login" class="required">Identifiant</label>
+		<div class="input-icon">
+			<i class="zmdi zmdi-account"></i>
+			<input type="text" class="custom-input" name="login" id="login"
+				   placeholder="Identifiant" required autocomplete="off">
+		</div>
+	</div>
+
+	<div class="form-group">
+		<label for="mdp" class="required">Mot de passe</label>
+		<div class="input-icon">
+			<i class="zmdi zmdi-lock"></i>
+			<input type="password" class="custom-input" name="mdp" id="mdp"
+				   placeholder="Mot de passe" required autocomplete="off">
+		</div>
+	</div>
+
+	<button name="btn_connexion" id="btn_connexion" class="btn login-btn w-100 mt-3">
 		Connexion
 	</button>
-</div>
 
-<div class="footer">
-	Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
+	<div class="login-footer">
+		Tous droits réservés 
+		<a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
+	</div>
 </div>
diff --git a/Vue/portail.php b/Vue/portail.php
index c4eeca0..6889c38 100755
--- a/Vue/portail.php
+++ b/Vue/portail.php
@@ -394,7 +394,86 @@
 			}
 			
 		}
-		 
+
+		 .login-card {
+			max-width: 380px;
+			margin: auto;
+			padding: 35px 30px;
+			border-radius: 14px;
+			background: #ffffff;
+			box-shadow: 0 12px 35px rgba(0,0,0,0.10);
+			text-align: center;
+		}
+
+		.login-header h2 {
+			font-size: 24px;
+			color: #7D4FFE;
+			font-weight: 700;
+			margin-bottom: 25px;
+		}
+
+		.form-group {
+			text-align: left;
+			margin-bottom: 18px;
+		}
+
+		.custom-input {
+			width: 100%;
+			border: 2px solid #7D4FFE;
+			border-radius: 8px;
+			padding: 12px 36px 12px 12px;
+			font-size: 14px;
+			color: #7D4FFE;
+			background: transparent;
+		}
+
+		.custom-input:focus {
+			border-color: #5e36e0;
+			box-shadow: none;
+		}
+
+		.input-icon {
+			position: relative;
+		}
+
+		.input-icon i {
+			position: absolute;
+			right: 12px;
+			top: 50%;
+			transform: translateY(-50%);
+			font-size: 20px;
+			color: #7D4FFE;
+		}
+
+		.login-btn {
+			background: #7D4FFE;
+			color: #fff;
+			font-size: 18px;
+			font-weight: 700;
+			padding: 10px;
+			border-radius: 8px;
+			transition: .25s;
+		}
+
+		.login-btn:hover {
+			background: #fff;
+			color: #7D4FFE;
+			border: 2px solid #7D4FFE;
+		}
+
+		.login-footer {
+			margin-top: 18px;
+			font-size: 12px;
+			color: #7D4FFE;
+		}
+
+		@media (max-width: 768px) {
+			.login-card {
+				width: 90%;
+				padding: 25px 20px;
+			}
+		}
+
 	</style>
 
 	</head>