diff --git a/Vue/Prestataires/index.php b/Vue/Prestataires/index.php
index f00502a..fa95acd 100755
--- a/Vue/Prestataires/index.php
+++ b/Vue/Prestataires/index.php
@@ -1,131 +1,175 @@
-<?php $this->titre = "INTER-SANTE - Réseau de soins"; ?>
+<?php $this->titre = "Intersanté - Réseau de soins"; ?>
 
-<div class="d-flex align-items-center mb-3">
-    <i class="fas fa-hospital-user fa-2x text-primary me-2"></i>
-    <h3 class="mb-0 text-uppercase fw-bold text-secondary" style="letter-spacing: 1px;">
-        <?= _("Réseau de soins") ?>
-    </h3>
-</div>
-
-<div class="card shadow-sm border-0 mb-4" style="border-radius: 12px;">
-    <div class="card-body bg-light" style="border-radius: 12px;">
-        <div class="row g-3">
-            <div class="col-12 col-md-4 col-lg-3">
-                <label class="form-label small fw-bold text-muted"><?= _("Type de prestataire") ?></label>
-                <select class="form-select form-select-sm" id="codeTypePrestataire" name="codeTypePrestataire">
-                    <?php liste_options_consultation($typeprestataire, ""); ?>
-                </select>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-3">
-                <label class="form-label small fw-bold text-muted"><?= _("Réseau") ?></label>
-                <select class="form-select form-select-sm" id="codeReseau" name="codeReseau">
-                    <?php liste_options_consultation($reseausoins, ""); ?>
-                </select>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-4">
-                <label class="form-label small fw-bold text-muted"><?= _("Nom du Prestataire") ?></label>
-                <div class="input-group input-group-sm">
-                    <span class="input-group-text bg-white"><i class="fas fa-search"></i></span>
-                    <input class="form-control" type="text" id="libelle" name="libelle" 
-                           placeholder="Rechercher un nom..." 
-                           onkeypress="javascript:ctrlkeypress_lite_prestataire(event);">
-                </div>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-2">
-                <label class="form-label small fw-bold text-muted"><?= _("Statut") ?></label>
-                <input class="form-control form-control-sm text-center bg-white" type="text" id="nbligne" name="nbligne" value="Lignes : 0" readonly>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-3">
-                <label class="form-label small fw-bold text-muted"><?= _("Pays") ?></label>
-                <select onChange="ajaxListerVilleConsultation();" class="form-select form-select-sm" id="codePays" name="codePays">
-                    <?php liste_options_consultation($pays, $_SESSION['codePaysSociete']); ?>
-                </select>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-3">
-                <label class="form-label small fw-bold text-muted">
-                    <?= (isset($_SESSION['affichagedynamique']['Province'])) ? _($_SESSION['affichagedynamique']['Province']) : _("Province") ?>
-                </label>
-                <div id="listeville">
-                    <select onChange="ajaxListerLocaliteConsultation();" class="form-select form-select-sm" id="codeVille" name="codeVille">
-                        <?php liste_options_consultation($ville, ""); ?>
-                    </select>
-                </div>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-3">
-                <label class="form-label small fw-bold text-muted">
-                    <?= (isset($_SESSION['affichagedynamique']['Commune'])) ? _($_SESSION['affichagedynamique']['Commune']) : _("Commune") ?>
-                </label>
-                <div id="listelocalite">
-                    <select class="form-select form-select-sm" id="codeLocalite" name="codeLocalite">
-                        <?php liste_options_consultation($listelocalite, "" ); ?>
-                    </select>
-                </div>
-            </div>
-
-            <div class="col-12 col-md-4 col-lg-3 d-flex align-items-end">
-                <button type="button" class="btn btn-primary btn-sm w-100 fw-bold shadow-sm" onclick="javascript:afficher_lite_prestataire();">
-                    <i class="fas fa-filter me-1"></i> <?= _("Afficher les résultats") ?>
-                </button>
-            </div>
+<div class="card shadow-lg border-0 mb-4 main-container-card">
+    <div class="card-header bg-primary text-white py-3">
+        <div class="d-flex align-items-center justify-content-center">
+            <i class="fas fa-project-diagram fa-lg me-3"></i>
+            <h4 id="h4_titre" class="mb-0 fw-bold">
+                <span id="id_titre_page"><?= _("Réseau des prestataires") ?></span>
+            </h4>
         </div>
     </div>
-</div>
 
-<div class="card shadow-sm border-0">
-    <div class="card-header bg-white border-bottom py-3">
-        <h6 class="mb-0 fw-bold text-primary"><i class="fas fa-list me-2"></i><?= _("Liste des prestataires") ?></h6>
-    </div>
-    <div class="card-body p-0">
-        <div id="div_liste_prestataire" class="table-responsive">
-            <table class="table table-hover align-middle mb-0" style="font-size: 0.9rem;">
-                <thead class="table-light">
-                    <tr>
-                        <th class="ps-3"><?= _("Nom") ?></th>
-                        <th class="text-center" width="80 px">Code</th>
-                        <th>Type</th>
-                        <th><?= _("Réseau") ?></th>
-                        <th class="text-center"><?= _("Tarif") ?></th>
-                        <th class="text-center"><?= _("Cons") ?></th>
-                        <th class="text-center" width="50 px">Action</th>
-                    </tr>
-                </thead>
-                <tbody id="body_liste_prestataire">
-                    <tr>
-                        <td colspan="7" class="text-center text-muted py-4">
-                            <i class="fas fa-info-circle me-1"></i> Utilisez les filtres ci-dessus pour afficher les prestataires.
-                        </td>
-                    </tr>
-                </tbody>
-            </table>
+    <div class="card-body bg-light-subtle">
+        <div class="card shadow-sm border-0 mb-4 search-filter-card">
+            <div class="card-body p-4">
+                <div class="row g-3">
+                    <div class="col-12 col-md-6 col-lg-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Type du prestataire") ?></label>
+                        <select class="form-select select2-enable" id="codeTypePrestataire" name="codeTypePrestataire" autofocus>
+                            <?php liste_options_consultation($typeprestataire, ""); ?>
+                        </select>
+                    </div>
+
+                    <div class="col-12 col-md-6 col-lg-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Catégorie du réseau") ?></label>
+                        <select class="form-select" id="codeReseau" name="codeReseau">
+                            <?php liste_options_consultation($reseausoins, ""); ?>
+                        </select>
+                    </div>
+                    
+                    <div class="col-12 col-md-6 col-lg-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Nom du prestataire") ?></label>
+                        <input class="form-control" type="text" id="libelle" name="libelle" 
+                               placeholder="<?= _("Ex: Clinique...") ?>"
+                               onkeypress="javascript:ctrlkeypress_liste_prestataires_actif(event);">
+                    </div>
+                    
+                    <div class="col-12 col-md-6 col-lg-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Pays") ?></label>
+                        <select onChange="ajaxListerVilleConsultation();" class="form-select" id="codePays" name="codePays">
+                            <?php liste_options_consultation($pays, $_SESSION['codePaysSociete']); ?>
+                        </select>
+                    </div>
+                    
+                    <div class="col-12 col-md-6 col-lg-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("Région") ?></label>
+                        <div id="listeville">
+                            <select onChange="ajaxListerLocaliteConsultation();" class="form-select" id="codeVille" name="codeVille">
+                                <?php liste_options_consultation($ville, ""); ?>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="col-12 col-md-6 col-lg-4">
+                        <label class="form-label small fw-bold text-muted text-uppercase"><?= _("District") ?></label>
+                        <div id="listelocalite">
+                            <select class="form-select" id="codeLocalite" name="codeLocalite">
+                                <?php liste_options_consultation($listelocalite, "" ); ?>
+                            </select>
+                        </div>
+                    </div>
+                    
+                    <div class="col-12 mt-4">
+                        <button id="btn_filtre" type="button" class="btn btn-primary btn-lg w-100 shadow-sm transition-all" 
+                                onclick="handleSearchClick();">
+                            <span id="btn_text"><i class="fas fa-search me-2"></i> <?= _("Afficher les résultats") ?></span>
+                            <span id="btn_spinner" class="d-none spinner-border spinner-border-sm me-2" role="status"></span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div id="container_resultats" class="card shadow-sm border-0 d-none">
+            <div class="card-body p-0">
+                <div id="div_liste_prestataire" class="table-responsive">
+                    </div>
+            </div>
         </div>
     </div>
 </div>
 
 <style>
-    /* Amélioration visuelle légère */
-    .form-select:focus, .form-control:focus {
-        border-color: #337ab7;
-        box-shadow: 0 0 0 0.2rem rgba(51, 122, 183, 0.25);
+    :root {
+        --primary-soft: #e7f1ff;
+        --transition-speed: 0.3s;
     }
-    .table thead th {
-        text-transform: uppercase;
-        font-size: 0.75rem;
-        letter-spacing: 0.5px;
-        color: #6c757d;
+
+    .main-container-card {
+        border-radius: 15px !important;
+        overflow: hidden;
     }
-    .btn-primary {
-        background-color: #337ab7;
-        border-color: #2e6da4;
-        transition: all 0.2s;
+
+    .search-filter-card {
+        border-radius: 12px !important;
+        transition: transform var(--transition-speed);
     }
+
+    .form-control, .form-select {
+        border-radius: 8px;
+        padding: 0.6rem 1rem;
+        border: 1px solid #dee2e6;
+        transition: all var(--transition-speed);
+    }
+
+    .form-control:focus, .form-select:focus {
+        border-color: #0d6efd;
+        box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
+        background-color: #fff;
+    }
+
+    .transition-all {
+        transition: all var(--transition-speed) ease;
+    }
+
     .btn-primary:hover {
-        background-color: #286090;
         transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3) !important;
     }
-</style>
\ No newline at end of file
+
+    /* Améliorations Tablettes & Mobiles */
+    @media (max-width: 768px) {
+        .card-header h4 { font-size: 1.1rem; }
+        .form-label { font-size: 0.75rem; }
+        
+        /* Empêche le zoom sur iOS */
+        input, select { font-size: 16px !important; }
+        
+        .p-4 { padding: 1.5rem !important; }
+    }
+
+    /* Animation de chargement */
+    .loading-opacity {
+        opacity: 0.6;
+        pointer-events: none;
+    }
+</style>
+
+<script>
+function handleSearchClick() {
+    const btn = document.getElementById('btn_filtre');
+    const text = document.getElementById('btn_text');
+    const spinner = document.getElementById('btn_spinner');
+    const resultContainer = document.getElementById('container_resultats');
+
+    // UI Feedback
+    btn.disabled = true;
+    text.classList.add('d-none');
+    spinner.classList.remove('d-none');
+
+    // Appel de votre fonction originale
+    if (typeof afficher_liste_prestataires_actifs === "function") {
+        afficher_liste_prestataires_actifs();
+        
+        // Simulation d'affichage du container de résultat
+        // (À intégrer idéalement dans le success de votre appel AJAX original)
+        setTimeout(() => {
+            resultContainer.classList.remove('d-none');
+            btn.disabled = false;
+            text.classList.remove('d-none');
+            spinner.classList.add('d-none');
+        }, 800);
+    }
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+    // Optimisation des interactions mobiles
+    const selects = document.querySelectorAll('.form-select');
+    selects.forEach(s => {
+        s.addEventListener('change', function() {
+            this.classList.add('is-valid');
+        });
+    });
+});
+</script>
\ No newline at end of file