diff --git a/Js/fonctions.js b/Js/fonctions.js
index 6dac8429..9bbb95af 100755
--- a/Js/fonctions.js
+++ b/Js/fonctions.js
@@ -75045,24 +75045,42 @@ function valider_tarif_lettrecle()
 	
 }
 
-function ajouter_une_expression_complexite_pass(idExpression, actif)
-{
-	donnees = 'idExpression='+idExpression+'&actif='+actif;
-	
-	$.ajax({
-		url: $("#racineWeb").val()+"Paramreinitmotpass/majcomplexitepassword/",
-		type: 'POST',			
-		data: donnees,
-		success: function(data) {
-			$("#div_complexite_pass").html(data);
-		},
-		error: function(data) {
-		},
-		complete: function() {
-		}
-	});
-}
+function ajouter_une_expression_complexite_pass(idExpression, actif) {
+    const racineWeb = $("#racineWeb").val();
+    const $divCible = $("#div_complexite_pass");
+    const codeLangue = $("#codeLangue").val();
 
+    // 1. Préparation des données (Format Objet)
+    const donnees = {
+        idExpression: idExpression,
+        actif: actif
+    };
+
+    // 2. Feedback visuel (Opacité pendant le chargement)
+    $divCible.css('opacity', '0.6');
+
+    $.ajax({
+        url: racineWeb + "Paramreinitmotpass/majcomplexitepassword/",
+        type: 'POST',
+        data: donnees,
+        success: function(data) {
+            // Mise à jour du contenu HTML (Dual List)
+            $divCible.html(data);
+            
+            // Notification Toastr discrète
+            let v_msg = (codeLangue === "en_US") ? "Security policy updated" : "Politique de sécurité mise à jour";
+            toastr.success(v_msg);
+        },
+        error: function() {
+            let v_err = (codeLangue === "en_US") ? "Update failed" : "Échec de la mise à jour";
+            toastr.error(v_err);
+        },
+        complete: function() {
+            // Rétablir l'opacité
+            $divCible.css('opacity', '1');
+        }
+    });
+}
 
 //25-09-2023
 function maj_composante_effettarif_lettrecle(idDetail, dateEffet, maxDateEffetActe, ligne){
diff --git a/Vue/Paramreinitmotpass/index.php b/Vue/Paramreinitmotpass/index.php
index e2a0681e..f0227776 100755
--- a/Vue/Paramreinitmotpass/index.php
+++ b/Vue/Paramreinitmotpass/index.php
@@ -1,3 +1,16 @@
+<?php
+// Fonction d'aide pour mapper les icônes de sécurité
+function getSecurityIcon($libelle) {
+    $l = strtolower($libelle);
+    if (strpos($l, 'majuscule') !== false) return 'fa-font-case';
+    if (strpos($l, 'chiffre') !== false || strpos($l, 'numérique') !== false) return 'fa-hashtag';
+    if (strpos($l, 'spécial') !== false || strpos($l, 'caractère') !== false) return 'fa-at';
+    if (strpos($l, 'longueur') !== false || strpos($l, 'caractères') !== false) return 'fa-ruler-horizontal';
+    if (strpos($l, 'minuscule') !== false) return 'fa-font';
+    return 'fa-shield-alt';
+}
+?>
+
 <div class="page-content">
     <div class="header-section mb-4">
         <div class="d-flex align-items-center bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
@@ -18,10 +31,10 @@
 
     <div class="row g-4">
         <div class="col-lg-5">
-            <div class="card border-0 shadow-sm" style="border-radius: var(--radius-md);">
+            <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--radius-md);">
                 <div class="card-header bg-white border-0 py-3">
                     <h6 class="mb-0 fw-bold text-primary">
-                        <i class="fas fa-key me-2"></i><?= _("Réinitialisation du mot de passe par défaut") ?>
+                        <i class="fas fa-key me-2"></i><?= _("Réinitialisation du mot de passe") ?>
                     </h6>
                 </div>
                 <div class="card-body">
@@ -31,7 +44,7 @@
                         <div class="mb-3">
                             <label class="form-label small fw-bold required"><?= _("Ancien mot de passe") ?></label>
                             <div class="input-group">
-                                <input type="password" class="form-control border-2" id="ancmdp" name="ancmdp" required autocomplete="off" autofocus>
+                                <input type="password" class="form-control border-2" id="ancmdp" name="ancmdp" required autofocus>
                                 <button class="btn btn-outline-secondary border-2 border-start-0 toggle-password" type="button" data-target="#ancmdp">
                                     <i class="fas fa-eye"></i>
                                 </button>
@@ -41,25 +54,21 @@
                         <div class="mb-3">
                             <label class="form-label small fw-bold required"><?= _("Nouveau mot de passe") ?></label>
                             <div class="input-group">
-                                <input type="password" class="form-control border-2" id="nvmdp" name="nvmdp" required autocomplete="off">
+                                <input type="password" class="form-control border-2" id="nvmdp" name="nvmdp" required>
                                 <button class="btn btn-outline-secondary border-2 border-start-0 toggle-password" type="button" data-target="#nvmdp">
                                     <i class="fas fa-eye"></i>
                                 </button>
                             </div>
-                            <div id="password-strength" class="progress mt-2 d-none" style="height: 5px;">
-                                <div class="progress-bar" role="progressbar" style="width: 0%"></div>
-                            </div>
                         </div>
 
                         <div class="mb-4">
                             <label class="form-label small fw-bold required"><?= _("Confirmer nouveau mot de passe") ?></label>
                             <div class="input-group">
-                                <input type="password" class="form-control border-2" id="cfnvmdp" name="cfnvmdp" required autocomplete="off">
+                                <input type="password" class="form-control border-2" id="cfnvmdp" name="cfnvmdp" required>
                                 <button class="btn btn-outline-secondary border-2 border-start-0 toggle-password" type="button" data-target="#cfnvmdp">
                                     <i class="fas fa-eye"></i>
                                 </button>
                             </div>
-                            <div class="invalid-feedback" id="match-error"><?= _("Les mots de passe ne correspondent pas") ?></div>
                         </div>
 
                         <?php if (isset($msgErreur)): ?>
@@ -70,7 +79,7 @@
 
                         <div class="row g-2">
                             <div class="col-6">
-                                <button type="submit" id="btnSubmitPass" class="btn btn-primary w-100 fw-bold shadow-sm py-2">
+                                <button type="submit" id="btnSubmitPass" class="btn btn-primary w-100 fw-bold shadow-sm py-2" disabled>
                                     <i class="fas fa-save me-2"></i><?= _("Enregistrer") ?>
                                 </button>
                             </div>
@@ -84,7 +93,7 @@
                 </div>
             </div>
 
-            <div class="card border-0 shadow-sm mt-4 border-start border-info border-4" style="border-radius: var(--radius-md);">
+            <div class="card border-0 shadow-sm border-start border-info border-4" style="border-radius: var(--radius-md);">
                 <div class="card-body">
                     <div class="d-flex align-items-center justify-content-between">
                         <div>
@@ -112,9 +121,12 @@
                             <div class="border rounded bg-white p-3 h-100 shadow-xs">
                                 <p class="small fw-bold text-muted text-center border-bottom pb-2 mb-3"><?= _("Expressions Non Actives") ?></p>
                                 <div class="list-group list-group-flush scroll-custom" style="max-height: 400px; overflow-y: auto;">
-                                    <?php foreach ($expressionsinactives as $exp): ?>
-                                    <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
-                                        <span class="small text-dark"><?= $this->nettoyer($exp['libelle']) ?></span>
+                                    <?php foreach ($expressionsinactives as $exp): $icon = getSecurityIcon($exp['libelle']); ?>
+                                    <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
+                                        <div class="d-flex align-items-center">
+                                            <i class="fas <?= $icon ?> text-muted me-2" style="width: 20px; text-align: center; opacity: 0.5;"></i>
+                                            <span class="small text-dark"><?= $this->nettoyer($exp['libelle']) ?></span>
+                                        </div>
                                         <button class="btn btn-outline-primary btn-xs rounded-circle" onClick="ajouter_une_expression_complexite_pass('<?= $exp['code'] ?>', '1');">
                                             <i class="fas fa-chevron-right"></i>
                                         </button>
@@ -127,12 +139,15 @@
                             <div class="border rounded bg-white p-3 h-100 border-warning shadow-xs">
                                 <p class="small fw-bold text-warning text-center border-bottom pb-2 mb-3"><?= _("Expressions Actives") ?></p>
                                 <div class="list-group list-group-flush">
-                                    <?php foreach ($expressionsactives as $exp): ?>
-                                    <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
+                                    <?php foreach ($expressionsactives as $exp): $icon = getSecurityIcon($exp['libelle']); ?>
+                                    <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0 py-2">
                                         <button class="btn btn-outline-danger btn-xs rounded-circle" onClick="ajouter_une_expression_complexite_pass('<?= $exp['code'] ?>', '0');">
                                             <i class="fas fa-chevron-left"></i>
                                         </button>
-                                        <span class="small fw-bold text-dark"><?= $this->nettoyer($exp['libelle']) ?></span>
+                                        <div class="d-flex align-items-center">
+                                            <span class="small fw-bold text-dark me-2"><?= $this->nettoyer($exp['libelle']) ?></span>
+                                            <i class="fas <?= $icon ?> text-warning" style="width: 20px; text-align: center;"></i>
+                                        </div>
                                     </div>
                                     <?php endforeach; ?>
                                 </div>
@@ -146,7 +161,6 @@
 </div>
 
 <script>
-// On attend que TOUTE la page et les scripts du footer (jQuery) soient chargés
 window.addEventListener('load', function() {
     if (typeof jQuery === 'undefined') return;
 
@@ -155,7 +169,6 @@ window.addEventListener('load', function() {
         const target = $(this).attr('data-target');
         const $input = $(target);
         const $icon = $(this).find('i');
-
         if ($input.attr('type') === 'password') {
             $input.attr('type', 'text');
             $icon.removeClass('fa-eye').addClass('fa-eye-slash');
@@ -173,9 +186,8 @@ window.addEventListener('load', function() {
     function checkPass() {
         const p1 = $nvmdp.val();
         const p2 = $cfnvmdp.val();
-        
         if (p2.length > 0) {
-            if (p1 === p2) {
+            if (p1 === p2 && p1.length >= 4) { // Longueur mini par défaut
                 $cfnvmdp.addClass('is-valid').removeClass('is-invalid');
                 $btn.prop('disabled', false);
             } else {
@@ -184,9 +196,9 @@ window.addEventListener('load', function() {
             }
         } else {
             $cfnvmdp.removeClass('is-valid is-invalid');
+            $btn.prop('disabled', true);
         }
     }
-
     $nvmdp.on('keyup input', checkPass);
     $cfnvmdp.on('keyup input', checkPass);
 
@@ -195,24 +207,28 @@ window.addEventListener('load', function() {
     if (form) {
         form.addEventListener('submit', function(e) {
             e.preventDefault();
-            const p1 = $("#nvmdp").val();
-            const p2 = $("#cfnvmdp").val();
-
-            if (p1 !== p2) {
-                alert_ebene("Les mots de passe ne correspondent pas !", "Passwords do not match!");
-                return false;
-            }
-
             confirm_ebene("Confirmez-vous le changement de mot de passe ?", "Confirm password change?")
-            .then((isConfirmed) => {
-                if (isConfirmed) {
-                    // Utilisation de la méthode native pour éviter de reboucler sur l'event submit
-                    form.submit();
-                }
-            });
+            .then((isConfirmed) => { if (isConfirmed) form.submit(); });
         });
     }
 });
+
+// 4. FONCTION OTP
+function maj_authentification_otp() {
+    const activerOtp = $("#activerOtp").val();
+    const racineWeb = $("#racineWeb").val();
+    const codeLangue = $("#codeLangue").val();
+
+    $.ajax({
+        url: racineWeb + "Paramreinitmotpass/maj_otp/",
+        type: 'POST',
+        data: { activerOtp: activerOtp },
+        success: function() {
+            let msg = (codeLangue === "en_US") ? "OTP Security updated" : "Sécurité OTP mise à jour";
+            toastr.success(msg);
+        }
+    });
+}
 </script>
 
 <style>
@@ -220,18 +236,10 @@ window.addEventListener('load', function() {
     .bg-info-ghost { background: rgba(0, 184, 212, 0.08) !important; }
     .btn-xs { padding: 0.25rem 0.45rem; font-size: 0.7rem; }
     .required:after { content: " *"; color: #dc3545; }
-    
-    /* Harmonisation des inputs password avec toggle */
-    .input-group .btn-outline-secondary {
-        border-color: #dee2e6;
-        color: #adb5bd;
-    }
-    .input-group .btn-outline-secondary:hover {
-        background: transparent;
-        color: #212e53;
-        border-color: #212e53;
-    }
-    
+    .input-group .btn-outline-secondary { border-color: #dee2e6; color: #adb5bd; }
+    .input-group .btn-outline-secondary:hover { background: transparent; color: #212e53; border-color: #212e53; }
     .scroll-custom::-webkit-scrollbar { width: 4px; }
     .scroll-custom::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 10px; }
+    .list-group-item { transition: all 0.2s; }
+    .list-group-item:hover { background-color: #f8f9fa; }
 </style>
\ No newline at end of file
diff --git a/Vue/Paramreinitmotpass/majcomplexitepassword.php b/Vue/Paramreinitmotpass/majcomplexitepassword.php
index f7f8bec7..f1bac38f 100755
--- a/Vue/Paramreinitmotpass/majcomplexitepassword.php
+++ b/Vue/Paramreinitmotpass/majcomplexitepassword.php
@@ -1,47 +1,59 @@
-<div class="row">	
-	<div id="div_expression_non_actif" class="col-6" >
+<div class="row g-3">
+    <div id="div_expression_non_actif" class="col-md-6">
+        <div class="card border-0 shadow-xs h-100" style="border-radius: var(--radius-md); background: #fdfdfd;">
+            <div class="card-header bg-white border-0 py-3 text-center">
+                <h6 class="mb-0 fw-bold text-muted text-uppercase small">
+                    <i class="fas fa-list-check me-2"></i><?= _("Expressions Non Actives") ?>
+                </h6>
+            </div>
+            <div class="card-body p-0">
+                <div class="list-group list-group-flush border-top" style="max-height: 400px; overflow-y: auto;">
+                    <?php foreach ($expressionsinactives as $exp): 
+                        $idExpression = $exp['code'];
+                        $icon = getSecurityIcon($exp['libelle']);
+                    ?>
+                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 border-light">
+                        <div class="d-flex align-items-center ps-2">
+                            <i class="fas <?= $icon ?> text-muted me-3" style="width: 20px; text-align: center;"></i>
+                            <span class="text-dark fw-medium" style="font-size: 9.5pt;"><?= $this->nettoyer($exp['libelle']) ?></span>
+                        </div>
+                        <button type="button" class="btn btn-primary btn-xs rounded-circle shadow-sm" 
+                                onClick="javascript:ajouter_une_expression_complexite_pass('<?=$idExpression?>', '1');">
+                            <i class="fas fa-arrow-right"></i>
+                        </button>
+                    </div>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+        </div>
+    </div>
 
-		<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-			<thead>
-			  <tr>
-				<th style='text-align:center'> <?= _("Expressions Non Actives") ?>  </th>
-				<th style='text-align:center'> => </th>
-			  </tr>
-			</thead>
-
-			<tbody>
-				<?php foreach ($expressionsinactives as $expressionsinactive):
-					$idExpression	= $expressionsinactive['code'];
-				?>
-				<tr valign="top">
-					<td align='center'><?=  $this->nettoyer($expressionsinactive['libelle']) ?></td>
-					<td align='center'> <input type="button" value="=>" onClick="javascript:ajouter_une_expression_complexite_pass('<?=$idExpression?>', '1');" ></td>
-				</tr>
-				<?php endforeach; ?>
-			</tbody>
-		</table>
-	</div>
-
-	<div id="div_expression_actif" class="col-6" >
-
-		<table class="table table-striped table-bordered table-hover table-condensed table-responsive" style="font-size:10pt;">
-			<thead>
-			  <tr>
-				<th style='text-align:center'> <= </th>
-				<th style='text-align:center'> <?= _("Expressions Actives") ?> </th>
-			  </tr>
-			</thead>
-
-			<tbody>
-				<?php foreach ($expressionsactives as $expressionsactive):
-					$idExpression	= $expressionsactive['code'];
-				?>
-				<tr valign="top">
-					<td align='center'> <input type="button" value="<=" onClick="javascript:ajouter_une_expression_complexite_pass('<?=$idExpression?>', '0');" ></td>
-					<td align='center'><?=  $this->nettoyer($expressionsactive['libelle']) ?></td>
-				</tr>
-				<?php endforeach; ?>
-			</tbody>
-		</table>
-	</div>
-</div>	
+    <div id="div_expression_actif" class="col-md-6">
+        <div class="card border-0 shadow-sm h-100 border-start border-warning border-4" style="border-radius: var(--radius-md);">
+            <div class="card-header bg-white border-0 py-3 text-center">
+                <h6 class="mb-0 fw-bold text-warning text-uppercase small">
+                    <i class="fas fa-lock-keyhole me-2"></i><?= _("Expressions Actives") ?>
+                </h6>
+            </div>
+            <div class="card-body p-0">
+                <div class="list-group list-group-flush border-top">
+                    <?php foreach ($expressionsactives as $exp): 
+                        $idExpression = $exp['code'];
+                        $icon = getSecurityIcon($exp['libelle']);
+                    ?>
+                    <div class="list-group-item d-flex justify-content-between align-items-center py-3 border-light bg-warning-ghost">
+                        <button type="button" class="btn btn-outline-danger btn-xs rounded-circle shadow-sm" 
+                                onClick="javascript:ajouter_une_expression_complexite_pass('<?=$idExpression?>', '0');">
+                            <i class="fas fa-arrow-left"></i>
+                        </button>
+                        <div class="d-flex align-items-center pe-2">
+                            <span class="text-dark fw-bold me-3" style="font-size: 9.5pt;"><?= $this->nettoyer($exp['libelle']) ?></span>
+                            <i class="fas <?= $icon ?> text-warning" style="width: 20px; text-align: center;"></i>
+                        </div>
+                    </div>
+                    <?php endforeach; ?>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file