diff --git a/Vue/Paramreinitmotpass/index.php b/Vue/Paramreinitmotpass/index.php
index 19a3e205..51dc5beb 100755
--- a/Vue/Paramreinitmotpass/index.php
+++ b/Vue/Paramreinitmotpass/index.php
@@ -1,117 +1,132 @@
-<?php $this->titre = "INTER SANTE - "._("Paramètres changement de mot de passe") 
+<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);">
+            <div class="icon-shape bg-primary-ghost text-primary rounded-circle me-3" style="width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;">
+                <i class="fas fa-user-shield fs-4"></i>
+            </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>
+            </div>
+        </div>
+    </div>
 
-//var_dump($societeuser['activerOtp']);
+    <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-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>
+                </div>
+                <div class="card-body">
+                    <form action="Paramreinitmotpass/changerpass" method="post" id="formChangerPass">
+                        <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>
+                        <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>
+                        <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>
 
-?>
+                        <?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>
+                        <?php endif; ?>
 
+                        <div class="row g-2 mt-4">
+                            <div class="col-6">
+                                <button type="submit" class="btn btn-primary w-100 fw-bold shadow-sm">
+                                    <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/">
+                                    <?= _("Annuler") ?>
+                                </a>
+                            </div>
+                        </div>
+                    </form>
+                </div>
+            </div>
+        </div>
 
-<form class="form-horizontal" action="Paramreinitmotpass/changerpass" method="post" style='font-size:10pt;'>
-	<fieldset>
+        <div class="col-lg-7">
+            <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-dark"><i class="fas fa-lock me-2 text-warning"></i><?= _("Exigences de Complexité") ?></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;">
+                                    <?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']) ?>
+                                        <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>
+                                    </div>
+                                    <?php endforeach; ?>
+                                </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="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">
+                                        <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']) ?>
+                                    </div>
+                                    <?php endforeach; ?>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-		 <legend> <?= _("Mot de passe à utiliser en cas de réinitialisation") ?> </legend>
-		 
-		<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-			<tbody>	
-				<tr> 
-					<td width="45%" class="required"><?= _("Veuillez saisir ancien mot de passe") ?> </td>
-					<td align="center" width="5%">:</td>
-					<td><INPUT style='font-size:10pt;'  class="form-control" TYPE="password" id="ancmdp" NAME="ancmdp" required AUTOCOMPLETE="OFF" autofocus></td>
-				</tr>
-			
-				<tr> 
-					<td class="required"> <?= _("Veuillez saisir nouveau mot de passe") ?>  </td>
-					<td align="center">:</td>
-					<td><INPUT  style='font-size:10pt;' onBlur="controle_longeur_passe(this);" class="form-control" TYPE="password" id="nvmdp" NAME="nvmdp"  required AUTOCOMPLETE="OFF"></td>
-				</tr>
+            <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>
 
-				<tr> 
-					<td class="required"> <?= _("Veuillez confirmer nouveau mot de passe")  ?> </td>
-					<td align="center">:</td>
-					<td><INPUT  style='font-size:10pt;' onBlur="ChangerPass();" class="form-control" TYPE="password" id="cfnvmdp" NAME="cfnvmdp"  required AUTOCOMPLETE="OFF"></td>
-				</tr>
-				
-				<tr> 
-					<td><input  style='font-size:10pt;'  class = "form-control btn btn-primary" type="submit" value="<?= _("Enregistrer") ?>"  /></td>
-					<td></td>
-					<td><a  style='font-size:10pt;'  class="form-control btn btn-warning" href="Parametresgeneraux/"> <?=_("Annuler") ?> </a></td>
-				</tr>
-			</tbody>
-		</table>	
-		
-	</fieldset>	
-</form> 
-
-<?php if (isset($msgErreur)): ?>
-	<div class="alert alert-danger" style="height:30px; padding:5px;" >
-	  <H4><?= $msgErreur ?></H4>
-	</div>	
-<?php endif; ?>
-
-
-<legend> <?= _("Complexité des mots de passe") ?> </legend>
-
-<div id="div_complexite_pass">
-
-	<div class="row">	
-		<div id="div_expression_non_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'> <?= _("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>	
-
-<legend> <?= _("Double authentification par OTP (One Time PassWord)") ?> </legend>
-<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-	<tbody>	
-		<tr> 
-			<td width="45%"><?= _("Activer la double authentification par OTP") ?> </td>
-			<td align="center" width="5%">?</td>
-			<td>
-				<select class="form-select" id="activerOtp" NAME="activerOtp" style='font-size:10pt; text-align:center;' onChange="javascript:maj_authentification_otp();">
-					<?php liste_options($activerOtpouinon, $this->nettoyer($societeuser['activerOtp']), true); ?>							
-				</select>
-			</td>
-		</tr>
-	</tbody>
-</table>
\ No newline at end of file
+<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; }
+</style>
\ No newline at end of file