diff --git a/Vue/Creergcassureur/index.php b/Vue/Creergcassureur/index.php
index d2db979c..f3edf99a 100755
--- a/Vue/Creergcassureur/index.php
+++ b/Vue/Creergcassureur/index.php
@@ -1,184 +1,204 @@
-<?php $this->titre = "INTER SANTE - Nouveau Garant"; ?>
+<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"><?= _("Nouveau Porteur de Risque") ?></h4>
+                <p class="text-muted small mb-0"><?= _("Création d'une nouvelle entité garante et configuration des paramètres de gestion") ?></p>
+            </div>
+        </div>
+    </div>
 
+    <form id="form_nouveau_garant">
+        <div class="row g-2">
+            
+            <div class="col-lg-12">
+                <div class="card border-0 shadow-sm">
+                    <div class="card-header bg-light py-3">
+                        <h6 class="mb-0 fw-bold text-muted small text-uppercase"><i class="fas fa-id-card me-2"></i><?= _("Identification & Type") ?></h6>
+                    </div>
+                    <div class="card-body p-4">
+                        <div class="row g-3">
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Nom du Garant") ?> <span class="text-danger">*</span></label>
+                                <input class="form-control majuscule shadow-none border-2" type="text" id="libelle" name="libelle" required placeholder="<?= _("Ex: ASSURANCES ALLIANCE") ?>">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Type de Garant") ?> <span class="text-danger">*</span></label>
+                                <select name="typeGarant" id="typeGarant" class="form-select selectpicker shadow-none border-2" data-live-search="true" required>
+                                    <?= liste_options($gctypegarant,'',false) ?>
+                                </select>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
+            <div class="col-lg-7">
+                <div class="card border-0 shadow-sm h-100">
+                    <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"><i class="fas fa-percentage me-2"></i><?= _("Paramétrage des Taux & Frais") ?></h6>
+                    </div>
+                    <div class="card-body p-4">
+                        <div class="row g-3">
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Comm. Primes (%)") ?></label>
+                                <input class="form-control" id="gcTauxCommissionGerant" name="gcTauxCommissionGerant" type="number" value="0" min="0" max="100">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Taux Ristourne (%)") ?></label>
+                                <input class="form-control" id="gcTauxRistourne" name="gcTauxRistourne" type="number" value="100" min="0" max="100">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Comm. Sinistres (%)") ?></label>
+                                <input class="form-control" id="gcTauxFraisReel" name="gcTauxFraisReel" type="number" value="0" min="0" max="100">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Taux Redressement (%)") ?></label>
+                                <input class="form-control" id="gcTauxRedressement" name="gcTauxRedressement" type="number" value="0" min="0" max="100">
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("TVA (%)") ?></label>
+                                <input class="form-control" id="gcTauxTva" name="gcTauxTva" type="number" value="<?= $tauxTva; ?>">
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Taux Suspension (%)") ?></label>
+                                <input class="form-control" id="gcLimiteConsommation" name="gcLimiteConsommation" type="number" value="0">
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Seuil RD (%)") ?></label>
+                                <input class="form-control" id="seuilRdGarant" name="seuilRdGarant" type="number" value="0">
+                            </div>
+                            
+                            <hr class="my-3 opacity-10">
+                            
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Frais Carte (Nouv.)") ?></label>
+                                <input class="form-control" type="text" id="fraisCarteAfn" name="fraisCarteAfn" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);">
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Frais Carte (Ren.)") ?></label>
+                                <input class="form-control" type="text" id="fraisCarteRen" name="fraisCarteRen" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);">
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Frais Ré-impression") ?></label>
+                                <input class="form-control" type="text" id="fraisCarteImp" name="fraisCarteImp" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-<legend> <?= _("Nouveau Garant") ?> </legend>
+            <div class="col-lg-5">
+                <div class="card border-0 shadow-sm mb-4">
+                    <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"><i class="fas fa-map-marked-alt me-2"></i><?= _("Coordonnées & Contacts") ?></h6>
+                    </div>
+                    <div class="card-body p-4">
+                        <div class="row g-3">
+                            <div class="col-12">
+                                <label class="form-label small fw-bold text-muted"><?= _("Email") ?></label>
+                                <input class="form-control" type="email" id="emailGcAssureur" name="emailGcAssureur" placeholder="contact@garant.com">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Téléphone") ?></label>
+                                <input class="form-control" type="tel" id="telephoneGarant" name="telephoneGarant">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Adresse Postale") ?></label>
+                                <input class="form-control majuscule" type="text" id="adressePostale" name="adressePostale">
+                            </div>
+                            <div class="col-12">
+                                <label class="form-label small fw-bold text-muted"><?= _("Adresse Géographique") ?></label>
+                                <input class="form-control majuscule" type="text" id="adresseGeographique" name="adresseGeographique">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Représentant") ?></label>
+                                <input class="form-control majuscule" type="text" id="representant" name="representant">
+                            </div>
+                            <div class="col-md-6">
+                                <label class="form-label small fw-bold text-muted"><?= _("Tél. Représentant") ?></label>
+                                <input class="form-control" type="text" id="telephonerepresentant" name="telephonerepresentant">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
+            <div class="col-lg-12">
+                <div class="card border-0 shadow-sm">
+                    <div class="card-header bg-light py-3">
+                        <h6 class="mb-0 fw-bold text-muted small text-uppercase"><i class="fas fa-file-invoice-dollar me-2"></i><?= _("Comptabilité & Mode de Règlement") ?></h6>
+                    </div>
+                    <div class="card-body p-4">
+                        <div class="row g-3">
+                            <div class="col-md-3">
+                                <label class="form-label small fw-bold text-muted"><?= _("Compte RD") ?></label>
+                                <input class="form-control majuscule" type="text" id="numerodeCompteComptableRD" name="numerodeCompteComptableRD">
+                            </div>
+                            <div class="col-md-3">
+                                <label class="form-label small fw-bold text-muted"><?= _("Compte TP") ?></label>
+                                <input class="form-control majuscule" type="text" id="numerodeCompteComptableTP" name="numerodeCompteComptableTP">
+                            </div>
+                            <div class="col-md-3">
+                                <label class="form-label small fw-bold text-muted"><?= _("Mode Paiement") ?> <span class="text-danger">*</span></label>
+                                <select class="form-select selectpicker" name="codeModePaiementDemande" id="codeModePaiementDemande" required>
+                                    <?php liste_options($modepaiement, ""); ?>
+                                </select>
+                            </div>
+                            <div class="col-md-3">
+                                <label class="form-label small fw-bold text-muted"><?= _("Type Remboursement") ?></label>
+                                <select class="form-select selectpicker" name="codeTypeRemboursement" id="codeTypeRemboursement">
+                                    <?php liste_options($typeremboursement,"RDTP",true); ?>
+                                </select>
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Tarif Actes") ?></label>
+                                <select name="codeTarifActe" id="codeTarifActe" class="form-select selectpicker" data-live-search="true">
+                                    <?= liste_options($tarifActe,"", false) ?>
+                                </select>
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("Exiger encaissement ?") ?></label>
+                                <select class="form-select" id="encaissementExige" name="encaissementExige">
+                                    <?php liste_options($encaissementExigeOuinon, "0", true); ?>
+                                </select>
+                            </div>
+                            <div class="col-md-4">
+                                <label class="form-label small fw-bold text-muted"><?= _("No Compte Contribuable") ?></label>
+                                <input class="form-control majuscule" type="text" id="numeroCompteContribuable" name="numeroCompteContribuable">
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
 
-<table class="table table-responsive table-condensed" style='font-size:10pt;'>
-	<tbody>	
-		<tr> 
-			<td width="19%"  class="required"> <?= _("Nom") ?> </td>
-			<td width="32%"><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="libelle" NAME="libelle"  required AUTOCOMPLETE="OFF"></td>
-		
-			<td width="15%" align="center" class="required"><?= _("Type Garant") ?></td>
-			<td>
-				<select name="typeGarant" id="typeGarant" class="form-control selectpicker" data-live-search="true" required AUTOCOMPLETE="OFF">
-					<?= liste_options($gctypegarant,'',false) ?>
-				</select>
-			</td>
-		
-		</tr>
-		
-		<tr>
-			<td class=""> <?= _("Adresse Postale") ?> </td>
-			<td><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="adressePostale" NAME="adressePostale"></td>
-		
-			
-			<td align="center"><?= _("Représentant") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="representant" NAME="representant" ></td>
-		</tr>
-		
-		<tr> 
-			<td ><?= _("Téléphone") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control" TYPE="tel" id="telephoneGarant" NAME="telephoneGarant" ></td>
+            <div class="col-lg-12">
+                <div class="card border-0 shadow-sm 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_gc_assureur();">
+                            <i class="fas fa-arrow-left me-2"></i> <?= _("Annuler") ?>
+                        </button>
+                        <button type="button" class="btn btn-primary rounded-pill px-5 fw-bold shadow-sm" onclick="creer_gc_assureur();">
+                            <i class="fas fa-save me-2"></i> <?= _("Enregistrer le Garant") ?>
+                        </button>
+                    </div>
+                </div>
+            </div>
 
-			<td width="10%" align="center"><?= _("E-mail") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control" TYPE="email" id="emailGcAssureur" NAME="emailGcAssureur" ></td>
-			
-		</tr>
-		
-		<tr> 
-			<td > <?= _("Taux Commission Primes (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcTauxCommissionGerant" NAME="gcTauxCommissionGerant" TYPE="number" step="1" value="0" min="0" max="100"></td>
-			
-			<td align="center"> <?= _("Taux Ristourne (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcTauxRistourne" NAME="gcTauxRistourne" TYPE="number" step="1" value="100" min="0" max="100"></td>
-		</tr>
+        </div>
+    </form>
+</div>
 
-		<tr> 
-			<td > <?= _("Taux Commission Sinistres (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcTauxFraisReel" NAME="gcTauxFraisReel" TYPE="number" step="1" value="0" min="0" max="100"></td>
-			
-			<td align="center"> <?= _("Taux Redressement (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcTauxRedressement" NAME="gcTauxRedressement" TYPE="number" step="1" value="0" min="0" max="100"></td>
-		</tr>
-		
-		<!--
-		<tr> 
-			<td > <?= _("Taux Provision (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcTauxProvision" NAME="gcTauxProvision" TYPE="number" value="0" min="0" max="100"></td>
-
-			<td align="center"> <?= _("Forfait Provision") ?> </td>
-			<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="gcForfaitProvision" NAME="gcForfaitProvision" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"></td>
-		</tr>
-		-->
-		<tr> 
-			<td > <?= _("Taux Tva (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcTauxTva" NAME="gcTauxTva" TYPE="number" step="1" value="<?= $tauxTva; ?>" min="0" max="100"></td>
-			
-			<td align="center"> <?= _("Frais Nouvelle Carte") ?> </td>
-			<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="fraisCarteAfn" NAME="fraisCarteAfn" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"></td>
-		</tr>
-		
-		<tr> 
-			<td > <?= _("Frais Renouvellement Carte") ?> </td>
-			<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="fraisCarteRen" NAME="fraisCarteRen" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"></td>
-			
-			<td align="center"> <?= _("Frais RE-IMPRESSION") ?> </td>
-			<td><INPUT style='font-size:10pt;' class="form-control" TYPE="text" id="fraisCarteImp" NAME="fraisCarteImp" value="0" onkeyup="controle_numerique(this);" onblur="formatMonetaire(this);"></td>
-		</tr>
-		
-		<tr> 
-			<td > <?= _("Taux Suspension (%)") ?> </td>
-			<td> <INPUT style='font-size:10pt;'  class="form-control" id="gcLimiteConsommation" NAME="gcLimiteConsommation" TYPE="number" step="1" value="0" min="0" max="100"></td>
-			
-			<td align="center"> <?= _("Seuil RD (%)") ?> </td>
-			<td ><INPUT  style='font-size:10pt;' class="form-control" TYPE="text" id="seuilRdGarant" NAME="seuilRdGarant" TYPE="number" step="1" value="0" min="0" max="100"></td>
-		
-		</tr>
-		
-		<tr> 
-			<td ><?= _("Téléphone du Représentant") ?></td>
-			<td ><INPUT  style='font-size:10pt;' class="form-control" TYPE="text" id="telephonerepresentant" NAME="telephonerepresentant" value=""></td>
-			
-			<td align="center"><?= _("Sigle du Représentant") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="siglerepresentant" NAME="siglerepresentant" value=""></td>
-		</tr>
-			
-		<tr> 
-			<td ><?= _("No Compte Comptable RD") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="numerodeCompteComptableRD" NAME="numerodeCompteComptableRD" value=""></td>
-				
-				
-				<td align="center"><?= _("Adresse Géographique") ?></td>
-			<td >
-				<INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="adresseGeographique" NAME="adresseGeographique" value=""></td>
-			</td>
-		</tr>	
-				
-			
-				
-		<tr> 
-			<td ><?= _("No Compte Comptable TP") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="numerodeCompteComptableTP" NAME="numerodeCompteComptableTP" value=""></td>	
-				
-				
-			<td align="center"><?= _("No Compte Contribuable") ?></td>
-			<td >
-                <INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="numeroCompteContribuable" NAME="numeroCompteContribuable" value="">
-			</td>
-		</tr>	
-				
-				
-		<tr> 
-			<td ><?= _("Service du Représentant") ?></td>
-			<td><INPUT  style='font-size:10pt;' class="form-control majuscule" TYPE="text" id="servicerepresentant" NAME="servicerepresentant" value=""></td>	
-	
-			<td align="center"><?= _("Tarif Actes") ?></td>
-			<td >
-				<select name="codeTarifActe" id="codeTarifActe" class="form-control selectpicker" data-live-search="true">
-					<?= liste_options($tarifActe,"", false) ?>
-				</select>
-			</td>
-		</tr>
-		
-		<tr> 
-			<td > <?= _("Type Remboursement") ?> </td>
-			<td >
-				<SELECT style="font-size:10pt;" class="form-control selectpicker" data-live-search="true" id="codeTypeRemboursement" NAME="codeTypeRemboursement">
-					<?php liste_options($typeremboursement,"RDTP",true); ?>						
-				</SELECT>
-			</td>
-			
-			<td align="center" class="required"> <?= _("Mode Paiement") ?> </td>
-			<td>
-				<SELECT style="font-size:10pt;" class="form-control selectpicker" data-live-search="true" id="codeModePaiementDemande" NAME="codeModePaiementDemande" required AUTOCOMPLETE="OFF">
-					<?php liste_options($modepaiement, ""); ?>					
-				</SELECT>
-			</td>
-		</tr>
-		
-		<tr> 
-			<td > 
-				<?= _("Interdire prestation pour impayé ?") ?>
-			</td>
-			
-			<td>
-				<select class="form-select" id="encaissementExige" NAME="encaissementExige" style='font-size:10pt;' >
-					<?php liste_options($encaissementExigeOuinon, "0", true); ?>							
-				</SELECT>						
-			</td>
-			
-			<td align="center"></td>
-			<td >
-				<INPUT  class="form-control" TYPE="text" value="" disabled>
-			</td>
-		</tr>
-		<!--
-		<tr>
-			<td colspan="4" style="height:30px; background-color:white;"></td>
-		</tr>
-		-->
-		<tr> 
-			<td> </td>
-			<td > <input id="btn_enreg" name="btn_enreg"  class = "form-control btn btn-primary" type="button" value="<?= _("Enregistrer") ?>" onClick="javascript:creer_gc_assureur();" style='font-size:10pt;' > </td>
-
-			<td> </td>
-			<td > <input class = "form-control btn btn-warning" type="button" value="<?= _("Annuler") ?>" onClick="javascript:retour_liste_gc_assureur();" style='font-size:9pt;' > </td>
-		</tr>
-	</tbody>
-</table>	
-
-<div id="div_test_gc">	
-</div>
\ No newline at end of file
+<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; }
+    .form-control:focus, .form-select:focus {
+        border-color: var(--bs-primary);
+        box-shadow: 0 0 0 0.25rem rgba(33, 46, 83, 0.1);
+    }
+    label { letter-spacing: 0.5px; }
+</style>
\ No newline at end of file