diff --git a/loko/assets/templates/assets/base_assets_index.html b/loko/assets/templates/assets/base_assets_index.html
index 2d2a973..11393bf 100644
--- a/loko/assets/templates/assets/base_assets_index.html
+++ b/loko/assets/templates/assets/base_assets_index.html
@@ -93,12 +93,12 @@
 
         <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
         <div id="assets-search-widget"
-             style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;">
+             style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
             <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
                 <!-- Input + bouton X superposé à l'intérieur -->
-                <div style="position:relative; display:flex;">
+                <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
                     <input type="text" id="assets-search-input" class="form-control form-control-sm"
-                           style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
+                           style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
                            placeholder="{% translate 'Code, nom…' %}">
                     <button type="button" id="assets-search-clear"
                             style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@@ -109,7 +109,7 @@
                     </button>
                 </div>
                 <!-- AND/OR toggle -->
-                <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;">
+                <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
                     <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
                         <input type="radio" class="btn-check" name="assets-search-mode" id="assets-search-mode-and" value="and" checked>
                         <label class="btn btn-outline-secondary py-0 px-2" for="assets-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">AND</label>
@@ -118,8 +118,8 @@
                     </div>
                 </span>
                 <!-- Bouton recherche -->
-                <button class="btn btn-sm" type="button" id="assets-search-btn"
-                        style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;"
+                <button class="btn btn-sm px-3" type="button" id="assets-search-btn"
+                        style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
                         title="{% translate 'Rechercher' %}">
                     <i class="bi bi-search"></i>
                 </button>
diff --git a/loko/controls/static/controls/controls_index.css b/loko/controls/static/controls/controls_index.css
index ae412af..5ed25ff 100644
--- a/loko/controls/static/controls/controls_index.css
+++ b/loko/controls/static/controls/controls_index.css
@@ -10,6 +10,24 @@
     border-color: #dee2e6;
 }
 
+#controls-search-widget {
+    max-width: calc(100% - 310px);
+}
+
+@media (max-width: 767.98px) {
+    #controls-search-widget {
+        position: static !important;
+        transform: none !important;
+        max-width: 100% !important;
+        margin-top: 0.5rem;
+        margin-bottom: 0.5rem;
+        pointer-events: auto !important;
+    }
+    #controls-search-widget .input-group > div:first-child {
+        width: 100% !important;
+    }
+}
+
 /* Styles pour la modale de filtre */
 #filterModal .modal-dialog {
     max-width: 95%;
diff --git a/loko/controls/templates/controls/controls_index.html b/loko/controls/templates/controls/controls_index.html
index 94418d2..72a7216 100644
--- a/loko/controls/templates/controls/controls_index.html
+++ b/loko/controls/templates/controls/controls_index.html
@@ -113,7 +113,7 @@
                                 <span class="input-group-text bg-white"><i class="bi bi-search text-muted"></i></span>
                                 <input type="text" id="project-autocomplete-input" class="form-control" placeholder="{% translate 'Rechercher un projet à ajouter (nom ou code)…' %}" autocomplete="off">
                                 <button class="btn btn-outline-secondary" type="button" id="project-search-clear-btn" style="display:none;">
-                                    <i class="bi bi-x"></i>
+                                    <i class="bi bi-x-lg"></i>
                                 </button>
                             </div>
                             <div id="project-autocomplete-dropdown" class="list-group position-absolute w-100 shadow-sm d-none" style="z-index: 1055; max-height: 200px; overflow-y: auto;"></div>
@@ -179,11 +179,11 @@
 
     <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
     <div id="controls-search-widget"
-         style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;">
+         style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 310px);">
         <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
-            <div style="position:relative; display:flex;">
+            <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
                 <input type="text" id="controls-search-input" class="form-control form-control-sm"
-                       style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
+                       style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
                        placeholder="{% translate 'Code, description, lieu, projet…' %}">
                 <button type="button" id="controls-search-clear"
                         style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@@ -193,7 +193,7 @@
                     <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
                 </button>
             </div>
-            <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;">
+            <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
                 <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
                     <input type="radio" class="btn-check" name="ctrl-search-mode" id="ctrl-search-mode-and" value="and" checked>
                     <label class="btn btn-outline-secondary py-0 px-2" for="ctrl-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
@@ -201,8 +201,8 @@
                     <label class="btn btn-outline-secondary py-0 px-2" for="ctrl-search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
                 </div>
             </span>
-            <button class="btn btn-sm" type="button" id="controls-search-btn"
-                    style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;"
+            <button class="btn btn-sm px-3" type="button" id="controls-search-btn"
+                    style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
                     title="{% translate 'Rechercher' %}">
                 <i class="bi bi-search"></i>
             </button>
diff --git a/loko/interventions/templates/interventions/interventions_index.html b/loko/interventions/templates/interventions/interventions_index.html
index 8ca2787..a361261 100644
--- a/loko/interventions/templates/interventions/interventions_index.html
+++ b/loko/interventions/templates/interventions/interventions_index.html
@@ -827,12 +827,12 @@
 
         <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
         <div id="interventions-search-widget"
-             style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;">
+             style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
             <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
                 <!-- Input + bouton X superposé à l'intérieur -->
-                <div style="position:relative; display:flex;">
+                <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
                     <input type="text" id="interventions-search-input" class="form-control form-control-sm"
-                           style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
+                           style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
                            placeholder="{% translate 'Titre, code, localisation, contrat…' %}">
                     <button type="button" id="interventions-search-clear"
                             style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@@ -842,7 +842,7 @@
                         <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
                     </button>
                 </div>
-                <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;">
+                <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
                     <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
                         <input type="radio" class="btn-check" name="search-mode" id="search-mode-and" value="and" checked>
                         <label class="btn btn-outline-secondary py-0 px-2" for="search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
@@ -850,8 +850,8 @@
                         <label class="btn btn-outline-secondary py-0 px-2" for="search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
                     </div>
                 </span>
-                <button class="btn btn-sm" type="button" id="interventions-search-btn"
-                        style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;"
+                <button class="btn btn-sm px-3" type="button" id="interventions-search-btn"
+                        style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
                         title="{% translate 'Rechercher' %}">
                     <i class="bi bi-search"></i>
                 </button>
diff --git a/loko/observations/templates/observations/observations_index.html b/loko/observations/templates/observations/observations_index.html
index 52c6fd6..3ddb88f 100644
--- a/loko/observations/templates/observations/observations_index.html
+++ b/loko/observations/templates/observations/observations_index.html
@@ -323,11 +323,11 @@
 
     <!-- Widget de recherche — centré sur toute la largeur (tableau + carte) -->
     <div id="observations-search-widget"
-         style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none;">
+         style="position:absolute; top:4px; left:50%; transform:translateX(-50%); z-index:10; pointer-events:none; max-width:calc(100% - 360px);">
         <div class="input-group" style="pointer-events:auto; flex-wrap:nowrap;">
-            <div style="position:relative; display:flex;">
+            <div style="position:relative; display:flex; width:360px; max-width:100%; min-width:60px;">
                 <input type="text" id="observations-search-input" class="form-control form-control-sm"
-                       style="width:320px; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
+                       style="width:100%; border-radius:20px 0 0 20px; border-color:#dee2e6; padding-right:1.6rem;"
                        placeholder="{% translate 'Description ou adresse…' %}">
                 <button type="button" id="observations-search-clear"
                         style="position:absolute; right:4px; top:50%; transform:translateY(-50%);
@@ -337,7 +337,7 @@
                     <i class="bi bi-x-lg" style="font-size:0.7rem;"></i>
                 </button>
             </div>
-            <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6;">
+            <span class="input-group-text bg-white px-1" style="border-left:0; border-right:0; border-color:#dee2e6; flex-shrink:0;">
                 <div class="btn-group btn-group-sm" role="group" aria-label="{% translate 'Mode' %}">
                     <input type="radio" class="btn-check" name="obs-search-mode" id="obs-search-mode-and" value="and" checked>
                     <label class="btn btn-outline-secondary py-0 px-2" for="obs-search-mode-and" title="{% translate 'Tous les mots doivent correspondre' %}">{% translate "AND" %}</label>
@@ -345,8 +345,8 @@
                     <label class="btn btn-outline-secondary py-0 px-2" for="obs-search-mode-or" title="{% translate 'Au moins un mot doit correspondre' %}">{% translate "OR" %}</label>
                 </div>
             </span>
-            <button class="btn btn-sm" type="button" id="observations-search-btn"
-                    style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057;"
+            <button class="btn btn-sm px-3" type="button" id="observations-search-btn"
+                    style="border-radius:0 20px 20px 0; border:1px solid #dee2e6; border-left:0; background:white; color:#495057; flex-shrink:0;"
                     title="{% translate 'Rechercher' %}">
                 <i class="bi bi-search"></i>
             </button>