From 8f100fda7f7f6b97c5fc89006995c98b338391e3 Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Thu, 9 Apr 2026 16:49:36 +0000
Subject: [PATCH] der

---
 Vue/Modifierproduit/index.php       |  1 -
 Vue/Paysetendueterritoire/index.php | 86 ++++++++++++++++++++++-------
 2 files changed, 67 insertions(+), 20 deletions(-)

diff --git a/Vue/Modifierproduit/index.php b/Vue/Modifierproduit/index.php
index c6848914..aba480d1 100755
--- a/Vue/Modifierproduit/index.php
+++ b/Vue/Modifierproduit/index.php
@@ -3,7 +3,6 @@
 ?>
 
 <div class="page-content animate__animated animate__fadeIn">
-    
     <div class="header-section mb-1">
         <div class="d-flex align-items-center justify-content-between bg-white p-3 shadow border-start border-warning border-4" style="border-radius: var(--radius-md);">
             <div class="d-flex align-items-center">
diff --git a/Vue/Paysetendueterritoire/index.php b/Vue/Paysetendueterritoire/index.php
index 4310a3ef..ff426cab 100755
--- a/Vue/Paysetendueterritoire/index.php
+++ b/Vue/Paysetendueterritoire/index.php
@@ -1,23 +1,71 @@
-<?php $this->titre = "INTER SANTE - Pays par territoire"; ?>
+<div class="page-content animate__animated animate__fadeIn">
+    <div class="header-section mb-1">
+        <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-globe-africa fs-4"></i>
+                </div>
+                <div>
+                    <h4 id="titre-page" class="mb-0 fw-bold text-uppercase"><?= _("Pays par territoire") ?></h4>
+                    <p class="text-muted small mb-0"><?= _("Consultation et filtrage des pays selon leur étendue territoriale") ?></p>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <div class="card border-0 shadow-sm mb-3">
+        <div class="card-body p-4">
+            <div class="row align-items-center">
+                <div class="col-md-3 text-md-end">
+                    <label for="codeTerritoire" class="fw-bold text-uppercase small text-muted required">
+                        <?= _("Étendue Territoire") ?> :
+                    </label>
+                </div>
+                <div class="col-md-6">
+                    <div class="input-group">
+                        <span class="input-group-text bg-white border-primary-subtle text-primary">
+                            <i class="fas fa-map-marked-alt"></i>
+                        </span>
+                        <select class="form-select selectpicker" 
+                                data-live-search="true" 
+                                id="codeTerritoire" 
+                                name="codeTerritoire" 
+                                onChange="javascript:affiche_pays_territoire();" 
+                                required 
+                                autocomplete="off">
+                            <?php liste_options($etendueterritoire, "", false); ?>
+                        </select>
+                    </div>
+                </div>
+                <div class="col-md-3">
+                    <div id="loader_pays" class="spinner-border spinner-border-sm text-primary d-none" role="status"></div>
+                </div>
+            </div>
+        </div>
+    </div>
 
+    <div id="div_pays" class="animate__animated animate__fadeIn">
+        <div class="text-center p-5 opacity-50">
+            <i class="fas fa-arrow-up fa-2x mb-3 text-primary"></i>
+            <p class="fw-bold"><?= _("Veuillez sélectionner un territoire pour afficher les pays correspondants.") ?></p>
+        </div>
+    </div>
+</div>
 
-<legend> <?= _("Pays par étendu de territoire") ?> </legend>
+<style>
+    /* Ajustement spécifique pour aligner le selectpicker avec le style ESI */
+    .bootstrap-select .dropdown-toggle {
+        border-color: #dee2e6 !important;
+        font-weight: 500;
+        padding-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+    
+    .bg-primary-ghost {
+        background-color: rgba(13, 110, 253, 0.1);
+    }
 
-<table class="table table-responsive table-condensed" style="font-size:10pt;">
-	<tbody>	
-		<tr> 
-			<td width="10%" align="center" class="required"> <?= _("Territoire") ?> </td>
-			<td >
-				<SELECT style="font-size:9pt;" class="form-control selectpicker" data-live-search="true" id="codeTerritoire" NAME="codeTerritoire" 
-				onChange="javascript:affiche_pays_territoire();" required AUTOCOMPLETE="OFF">
-					<?php liste_options($etendueterritoire,"", false); ?>						
-				</SELECT>
-			</td>
-		</tr>
-	</tbody>
-</table>	
-
-<div id="div_pays">
-
-</div>	
+    .border-dashed {
+        border: 2px dashed #dee2e6 !important;
+    }
+</style>
\ No newline at end of file