diff --git a/Vue/Parammessages/index.php b/Vue/Parammessages/index.php
index e25185a6..30b4d3a2 100755
--- a/Vue/Parammessages/index.php
+++ b/Vue/Parammessages/index.php
@@ -1,62 +1,85 @@
-<?php $this->titre = "INTER SANTE - Paramètres des messages systèmes"; ?>
+<div class="page-content">
+    <div class="header-section mb-4">
+        <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow-sm border-start border-primary border-4" style="border-radius: var(--radius-md);">
+            <div class="d-flex align-items-center">
+                <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-comment-alt fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Textes & Messages Système") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Personnalisez les messages d'alerte et les mentions légales des documents") ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <div class="accordion border-0 shadow-sm" id="accordionMessages" style="border-radius: var(--radius-md); overflow: hidden;">
+        
+        <div class="accordion-item border-0 border-bottom">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed fw-bold text-dark bg-white" type="button" 
+                        data-bs-toggle="collapse" data-bs-target="#collapseMotifs" 
+                        onclick="loadMessageSection('Motifs')">
+                    <i class="fas fa-exclamation-triangle me-3 text-warning"></i>
+                    <?= _("Messages des Motifs de Dépassement du Barème") ?>
+                </button>
+            </h2>
+            <div id="collapseMotifs" class="accordion-collapse collapse" data-bs-parent="#accordionMessages">
+                <div class="accordion-body bg-light p-0" id="content-Motifs">
+                    <div class="text-center p-5"><i class="fas fa-spinner fa-spin me-2"></i>Chargement...</div>
+                </div>
+            </div>
+        </div>
+
+        <div class="accordion-item border-0">
+            <h2 class="accordion-header">
+                <button class="accordion-button collapsed fw-bold text-dark bg-white" type="button" 
+                        data-bs-toggle="collapse" data-bs-target="#collapseFacturation" 
+                        onclick="loadMessageSection('Facturation')">
+                    <i class="fas fa-file-invoice-dollar me-3 text-primary"></i>
+                    <?= _("Textes de Facturation des Garants") ?>
+                </button>
+            </h2>
+            <div id="collapseFacturation" class="accordion-collapse collapse" data-bs-parent="#accordionMessages">
+                <div class="accordion-body bg-light p-0" id="content-Facturation">
+                    <div class="text-center p-5"><i class="fas fa-spinner fa-spin me-2"></i>Chargement...</div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<script>
+function loadMessageSection(section) {
+    let url = "";
+    let target = "#content-" + section;
+
+    if (section === 'Motifs') url = $("#racineWeb").val() + "Motifdepassement/";
+    if (section === 'Facturation') url = $("#racineWeb").val() + "Textefacturationgarant/";
+
+    // Éviter de recharger si déjà chargé (optionnel)
+    if ($(target).find('table').length > 0) return;
+
+    $.ajax({
+        url: url,
+        type: 'GET',
+        success: function(data) {
+            $(target).html(data);
+        },
+        error: function() {
+            $(target).html('<div class="alert alert-danger m-3">Erreur de chargement</div>');
+        }
+    });
+}
+</script>
 
 <style>
-.card {  
-	background: white;  
-	border-radius: 8px;  
-	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);  
-	margin: 10px;  
-	padding: 15px;  
-	transition: transform 0.2s;  
-}  
-
-.card:hover {  
-	transform: scale(1.02); 
-	background-color: #dcdcdc;
-}  
-
-.card-content {  
-	display: flex;  
-	justify-content: space-between;  
-	align-items: center;  
-}  
-
-.text {  
-	flex: 1;  
-	margin-left: 10px; 
-	font-size: 13pt;
-}  
-
-.card a {  
-	text-decoration: none;  
-	color: black;  
-	width: 100%;  
-}  
-
-.card a:hover{  
-	 color: #007bff;  
-} 
-
-</style>
-
-<legend> <?= _("PARAMETRES DES MESSAGES & TEXTES SYSTEMES") ?> </legend>
-
-<div class="card">  
-	<a href="Motifdepassement/">  
-		<div class="card-content">  
-			<i class="fas fa-exclamation-triangle"></i>  
-			<span class="text"> <?= _("Messages des Motifs de Dépassement du Barème") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
-
-<div class="card">  
-	<a href="Textefacturationgarant/">  
-		<div class="card-content">  
-			<i class="fas fa-sticky-note"></i>  
-			<span class="text"> <?= _("Textes de Facturation des Garants") ?> </span>  
-			<i class="fas fa-chevron-right"></i>  
-		</div>  
-	</a>  
-</div>
+.accordion-button:not(.collapsed) {
+    background-color: var(--color-primary-ghost) !important;
+    color: var(--color-primary) !important;
+    box-shadow: none;
+}
+.accordion-button:after { background-size: 1rem; }
+.accordion-button:focus { border-color: transparent; box-shadow: none; }
+</style>
\ No newline at end of file