diff --git a/Vue/Nouveauproduit/index.php b/Vue/Nouveauproduit/index.php
index 4f34c0a4..e9eaf5cd 100755
--- a/Vue/Nouveauproduit/index.php
+++ b/Vue/Nouveauproduit/index.php
@@ -1,63 +1,90 @@
 <?php $this->titre = "INTER SANTE - Créer un nouveau Produit"; ?>
 
-<legend> <?= _("Créer un Nouveau Produit") ?> </legend>
+<div class="page-content animate__animated animate__fadeIn">
+    
+    <div class="header-section mb-1">
+        <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-plus-circle fs-4"></i>
+            </div>
+            <div>
+                <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Créer un Nouveau Produit") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Définition du catalogue produit et des règles de tarification") ?></p>
+            </div>
+        </div>
+    </div>
 
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr> 
-			<td width="10%" class="required"> <?= _("Nom") ?> </td>
-			<td colspan="3"><INPUT style="font-size:10pt;" class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle" required AUTOCOMPLETE="OFF"></td>
-		
-			<td width="12%" class="required" align="center"> <?= _("Garant") ?> </td>
-			<td width="35%">
-				<SELECT style="font-size:10pt;" class="form-control selectpicker" data-live-search="true" id="codeGcAssureur" NAME="codeGcAssureur" required AUTOCOMPLETE="OFF">
-					<?php liste_options($garant,$_SESSION['garant']); ?>						
-				</SELECT>	
-			</td>
-		
-		</tr>
-		
-		<tr>
-			<td > <?= _("Plafond Famille") ?> </td>
-			<td >
-				<INPUT style="font-size:10pt;" class="form-control" TYPE="text" id="plafondAdherent" NAME="plafondAdherent" AUTOCOMPLETE="OFF" onfocus="javascript:formatNumerique(this);" 
-				onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);" value="0">
-			</td>
-		
-			<td class="required" align="center">  <?= _("Etat") ?> </td>
-			<td  >
-				<SELECT style="font-size:10pt; height:30px;" class="form-select" id="codeEtatProduit" NAME="codeEtatProduit" required AUTOCOMPLETE="OFF">
-					<?php liste_options($etatproduit,"1",true); ?>						
-				</SELECT>	
-			</td>
-			
-			<td class="required" align="center">  <?= _("Mode Calcul Prime") ?> </td>
-			<td  >
-				<SELECT style="font-size:10pt; height:30px;" class="form-select" id="codeModecalculPrime" NAME="codeModecalculPrime" required AUTOCOMPLETE="OFF" onChange="javascript:modecalculeprime()">
-					<?php liste_options($calculprime,"",false); ?>						
-				</SELECT>	
-			</td>
-		</tr>
-	</tbody>
-</table>
+    <form id="form_nouveau_produit">
+        <div class="card border-0 shadow-sm mb-1">
+            <div class="card-header bg-white py-3 border-bottom border-2 border-primary-light">
+                <h6 class="mb-0 fw-bold text-primary text-uppercase small"><i class="fas fa-info-circle me-2"></i><?= _("Informations Générales") ?></h6>
+            </div>
+            <div class="card-body p-4">
+                <div class="row g-3">
+                    <div class="col-md-7">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Nom du Produit") ?> <span class="text-danger">*</span></label>
+                        <input class="form-control majuscule border-2 shadow-none" type="text" id="libelle" name="libelle" required placeholder="<?= _("Ex: PLAN SANTÉ ÉLITE") ?>" autocomplete="off">
+                    </div>
+                    <div class="col-md-5">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Garant") ?> <span class="text-danger">*</span></label>
+                        <select class="form-control selectpicker shadow-none" data-live-search="true" id="codeGcAssureur" name="codeGcAssureur" required>
+                            <?php liste_options($garant, $_SESSION['garant']); ?>
+                        </select>
+                    </div>
 
-<div id="div_prime_lienparente">
-	
+                    <div class="col-md-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Plafond Famille") ?></label>
+                        <div class="input-group">
+                            <span class="input-group-text bg-light border-2 border-end-0"><i class="fas fa-wallet text-muted"></i></span>
+                            <input class="form-control border-2 border-start-0 shadow-none fw-bold" type="text" id="plafondAdherent" name="plafondAdherent" 
+                                   value="0" onfocus="formatNumerique(this);" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);">
+                        </div>
+                    </div>
+                    <div class="col-md-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("État") ?> <span class="text-danger">*</span></label>
+                        <select class="form-select border-2 shadow-none" id="codeEtatProduit" name="codeEtatProduit" required>
+                            <?php liste_options($etatproduit, "1", true); ?>
+                        </select>
+                    </div>
+                    <div class="col-md-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Mode Calcul Prime") ?> <span class="text-danger">*</span></label>
+                        <select class="form-select border-2 shadow-none fw-bold text-primary" id="codeModecalculPrime" name="codeModecalculPrime" required onchange="modecalculeprime()">
+                            <?php liste_options($calculprime, "", false); ?>
+                        </select>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="div_prime_lienparente" class="animate__animated animate__fadeIn"></div>
+        <div id="div_typetrancheage" class="animate__animated animate__fadeIn mb-4"></div>
+
+        <div class="card border-0 shadow-sm mb-1 bg-light">
+            <div class="card-body d-flex justify-content-end gap-2 py-3">
+                <button type="button" class="btn btn-light rounded-pill px-4 fw-bold text-muted border shadow-xs" onclick="retour_liste_produits();">
+                    <i class="fas fa-times me-2"></i> <?= _("Annuler") ?>
+                </button>
+                <button type="button" id="btn_enreg" class="btn btn-primary rounded-pill px-5 fw-bold shadow-sm" onclick="creer_produit();">
+                    <i class="fas fa-save me-2"></i> <?= _("Enregistrer le Produit") ?>
+                </button>
+            </div>
+        </div>
+    </form>
 </div>
 
-<div id="div_typetrancheage" style="margin-bottom:10px;">
-</div>
-
-<table class="table table-responsive table-condensed table-bordered" style="font-size:12pt;">
-	<tbody>						
-		<tr style='background-color:white'> 
-			<td > <input id="btn_enreg" name="btn_enreg"  class = "form-control btn btn-primary" type="button" value="<?= _("Enregistrer") ?>" onClick="javascript:creer_produit();" style='font-size:10pt;' > </td>
-
-			<td > </td>
-			
-			<td > <input class = "form-control btn btn-warning" type="button" value="<?= _("Annuler") ?>" onClick="javascript:retour_liste_produits();" style='font-size:10pt;' > </td>
-		</tr>
-	</tbody>
-</table>
-
-
+<style>
+    .bg-primary-ghost { background-color: rgba(33, 46, 83, 0.08) !important; }
+    .border-primary-light { border-color: rgba(33, 46, 83, 0.1) !important; }
+    .majuscule { text-transform: uppercase; }
+    
+    /* Focus Style */
+    .form-control:focus, .form-select:focus {
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 0.25rem rgba(33, 46, 83, 0.1);
+    }
+    
+    /* Séparateur pour les zones AJAX */
+    #div_prime_lienparente:not(:empty), #div_typetrancheage:not(:empty) {
+        margin-bottom: 1.5rem;
+    }
+</style>
\ No newline at end of file