diff --git a/Vue/Paramreinitmotpass/index.php b/Vue/Paramreinitmotpass/index.php
index 51dc5beb..de15f693 100755
--- a/Vue/Paramreinitmotpass/index.php
+++ b/Vue/Paramreinitmotpass/index.php
@@ -6,48 +6,76 @@
             </div>
             <div>
                 <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Sécurité & Authentification") ?></h4>
-                <p class="text-muted small mb-0"><?= _("Gérez vos identifiants et les exigences de sécurité du système") ?></p>
+                <nav aria-label="breadcrumb">
+                    <ol class="breadcrumb mb-0 small">
+                        <li class="breadcrumb-item text-muted"><?= _("Paramètres") ?></li>
+                        <li class="breadcrumb-item active text-secondary fw-medium"><?= _("Gestion des accès") ?></li>
+                    </ol>
+                </nav>
             </div>
         </div>
     </div>
 
     <div class="row g-4">
         <div class="col-lg-5">
-            <div class="card border-0 shadow-sm h-100" style="border-radius: var(--radius-md);">
+            <div class="card border-0 shadow-sm" 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><?= _("Changer mon mot de passe") ?></h6>
+                    <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") ?>
+                    </h6>
                 </div>
                 <div class="card-body">
-                    <form action="Paramreinitmotpass/changerpass" method="post" id="formChangerPass">
+                    <form id="formChangerPass" action="Paramreinitmotpass/changerpass" method="post">
+                        <input type="hidden" id="nomForm" name="nomForm" value="modifierseuilalerte">
+                        
                         <div class="mb-3">
                             <label class="form-label small fw-bold required"><?= _("Ancien mot de passe") ?></label>
-                            <input class="form-control border-2" type="password" id="ancmdp" name="ancmdp" required autocomplete="off" autofocus>
+                            <div class="input-group">
+                                <input type="password" class="form-control border-2" id="ancmdp" name="ancmdp" required autocomplete="off" 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>
+                            </div>
                         </div>
+
                         <div class="mb-3">
                             <label class="form-label small fw-bold required"><?= _("Nouveau mot de passe") ?></label>
-                            <input class="form-control border-2" type="password" id="nvmdp" name="nvmdp" onBlur="controle_longeur_passe(this);" required autocomplete="off">
-                            <div class="form-text small"><?= _("Respectez les règles de complexité à droite.") ?></div>
+                            <div class="input-group">
+                                <input type="password" class="form-control border-2" id="nvmdp" name="nvmdp" required autocomplete="off">
+                                <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-3">
-                            <label class="form-label small fw-bold required"><?= _("Confirmer le mot de passe") ?></label>
-                            <input class="form-control border-2" type="password" id="cfnvmdp" name="cfnvmdp" onBlur="ChangerPass();" required autocomplete="off">
+
+                        <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">
+                                <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)): ?>
-                            <div class="alert alert-danger d-flex align-items-center py-2" role="alert">
-                                <i class="fas fa-exclamation-triangle me-2"></i>
-                                <div class="small fw-bold"><?= $msgErreur ?></div>
+                            <div class="alert alert-danger py-2 border-0 shadow-xs mb-3">
+                                <i class="fas fa-exclamation-circle me-2"></i> <?= $msgErreur ?>
                             </div>
                         <?php endif; ?>
 
-                        <div class="row g-2 mt-4">
+                        <div class="row g-2">
                             <div class="col-6">
-                                <button type="submit" class="btn btn-primary w-100 fw-bold shadow-sm">
+                                <button type="submit" id="btnSubmitPass" class="btn btn-primary w-100 fw-bold shadow-sm py-2">
                                     <i class="fas fa-save me-2"></i><?= _("Enregistrer") ?>
                                 </button>
                             </div>
                             <div class="col-6">
-                                <a class="btn btn-light w-100 fw-bold border text-muted" href="Parametresgeneraux/">
+                                <a class="btn btn-light border w-100 fw-bold py-2" href="Parametresgeneraux/">
                                     <?= _("Annuler") ?>
                                 </a>
                             </div>
@@ -55,22 +83,38 @@
                     </form>
                 </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-body">
+                    <div class="d-flex align-items-center justify-content-between">
+                        <div>
+                            <h6 class="mb-1 fw-bold"><?= _("Double Authentification") ?></h6>
+                            <p class="text-muted small mb-0"><?= _("Sécurité renforcée par OTP") ?></p>
+                        </div>
+                        <select class="form-select w-auto fw-bold" id="activerOtp" name="activerOtp" onChange="maj_authentification_otp();">
+                            <?php liste_options($activerOtpouinon, $this->nettoyer($societeuser['activerOtp']), true); ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
         </div>
 
         <div class="col-lg-7">
-            <div class="card border-0 shadow-sm mb-4" style="border-radius: var(--radius-md);">
+            <div class="card border-0 shadow-sm h-100" style="border-radius: var(--radius-md);">
                 <div class="card-header bg-white border-0 py-3">
-                    <h6 class="mb-0 fw-bold text-dark"><i class="fas fa-lock me-2 text-warning"></i><?= _("Exigences de Complexité") ?></h6>
+                    <h6 class="mb-0 fw-bold text-dark">
+                        <i class="fas fa-shield-alt me-2 text-warning"></i><?= _("Complexité des mots de passe") ?>
+                    </h6>
                 </div>
                 <div class="card-body bg-light-subtle">
                     <div id="div_complexite_pass" class="row g-3">
-                        <div class="col-md-6">
-                            <div class="border rounded bg-white p-2 h-100">
-                                <p class="small fw-bold text-muted text-center border-bottom pb-2"><?= _("Disponibles") ?></p>
-                                <div class="list-group list-group-flush" style="max-height: 250px; overflow-y: auto;">
+                        <div class="col-md-6" id="div_expression_non_actif">
+                            <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 py-2 border-0 small">
-                                        <?= $this->nettoyer($exp['libelle']) ?>
+                                    <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>
                                         <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>
@@ -79,16 +123,16 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="col-md-6">
-                            <div class="border rounded bg-white p-2 h-100 border-warning">
-                                <p class="small fw-bold text-warning text-center border-bottom pb-2"><?= _("Actives") ?></p>
+                        <div class="col-md-6" id="div_expression_actif">
+                            <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 py-2 border-0 small fw-bold">
+                                    <div class="list-group-item d-flex justify-content-between align-items-center border-0 px-0">
                                         <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>
-                                        <?= $this->nettoyer($exp['libelle']) ?>
+                                        <span class="small fw-bold text-dark"><?= $this->nettoyer($exp['libelle']) ?></span>
                                     </div>
                                     <?php endforeach; ?>
                                 </div>
@@ -97,36 +141,91 @@
                     </div>
                 </div>
             </div>
-
-            <div class="card border-0 shadow-sm border-start border-info border-4" style="border-radius: var(--radius-md);">
-                <div class="card-body py-3">
-                    <div class="d-flex align-items-center justify-content-between">
-                        <div class="d-flex align-items-center">
-                            <div class="icon-shape bg-info-ghost text-info rounded-circle me-3" style="width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;">
-                                <i class="fas fa-shield-alt"></i>
-                            </div>
-                            <div>
-                                <h6 class="mb-0 fw-bold"><?= _("Authentification OTP") ?></h6>
-                                <p class="text-muted small mb-0"><?= _("Activer la vérification par code (E-mail/SMS)") ?></p>
-                            </div>
-                        </div>
-                        <div style="width: 150px;">
-                            <select class="form-select form-select-sm fw-bold border-2" id="activerOtp" name="activerOtp" onChange="maj_authentification_otp();">
-                                <?php liste_options($activerOtpouinon, $this->nettoyer($societeuser['activerOtp']), true); ?>
-                            </select>
-                        </div>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </div>
 
+<script>
+	$(document).ready(function() {
+    // 1. GESTION AFFICHAGE MOT DE PASSE
+    $('.toggle-password').on('click', 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');
+        } else {
+            $input.attr('type', 'password');
+            $icon.removeClass('fa-eye-slash').addClass('fa-eye');
+        }
+    });
+
+    // 2. VALIDATION EN TEMPS RÉEL
+    const $nvmdp = $('#nvmdp');
+    const $cfnvmdp = $('#cfnvmdp');
+    const $btn = $('#btnSubmitPass');
+
+    function checkPass() {
+        const p1 = $nvmdp.val();
+        const p2 = $cfnvmdp.val();
+        
+        // Validation simple de correspondance
+        if (p2.length > 0) {
+            if (p1 === p2) {
+                $cfnvmdp.addClass('is-valid').removeClass('is-invalid');
+                $btn.prop('disabled', false);
+            } else {
+                $cfnvmdp.addClass('is-invalid').removeClass('is-valid');
+                $btn.prop('disabled', true);
+            }
+        }
+    }
+
+    $nvmdp.on('keyup', checkPass);
+    $cfnvmdp.on('keyup', checkPass);
+
+    // 3. INTERCEPTION DU FORMULAIRE (LIAISON AVEC VOTRE FONCTION)
+    $('#formChangerPass').on('submit', function(e) {
+        e.preventDefault();
+        const p1 = $("#nvmdp").val();
+        const p2 = $("#cfnvmdp").val();
+
+        if (p1 !== p2) {
+            // Utilisation de votre alerte bilingue
+            alert_ebene("Les mots de passe ne correspondent pas !", "Passwords do not match!");
+            return false;
+        }
+
+        // Si tout est ok, on utilise confirm_ebene avant l'envoi
+        confirm_ebene("Confirmez-vous le changement de mot de passe ?", "Confirm password change?")
+        .then((isConfirmed) => {
+            if (isConfirmed) {
+                this.submit();
+            }
+        });
+    });
+});
+</script>
+
 <style>
     .bg-primary-ghost { background: rgba(33, 46, 83, 0.08) !important; }
     .bg-info-ghost { background: rgba(0, 184, 212, 0.08) !important; }
-    .btn-xs { padding: 0.25rem 0.4rem; font-size: 0.75rem; }
-    .required:after { content:" *"; color: red; }
-    .list-group-item { transition: background 0.2s; }
-    .list-group-item:hover { background-color: #f8f9fa; }
+    .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;
+    }
+    
+    .scroll-custom::-webkit-scrollbar { width: 4px; }
+    .scroll-custom::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 10px; }
 </style>
\ No newline at end of file