diff --git a/assets/utils.js b/assets/utils.js
index 9dd3c88..610c29b 100644
--- a/assets/utils.js
+++ b/assets/utils.js
@@ -231,9 +231,10 @@ export function setupCitySearch(inputId, suggestionListId, onSelect) {
       const data = await response.json();
       const citySuggestions = data.map(city => ({
         name: city.nom,
-        postcode: city.codesPostaux[0],
         insee: city.code,
-        display_name: `${city.nom} (${city.codesPostaux[0]})`
+        postcodes: city.codesPostaux,
+        postcode: city.codesPostaux && city.codesPostaux.length > 0 ? city.codesPostaux[0] : '',
+        display_name: `${city.nom} (${city.codesPostaux && city.codesPostaux.length > 0 ? city.codesPostaux[0] : ''})`
       }));
       displaySuggestions(citySuggestions);
     } catch (error) {
@@ -248,10 +249,10 @@ export function setupCitySearch(inputId, suggestionListId, onSelect) {
       item.classList.add('suggestion-item');
       // Nouveau rendu : nom en gras, INSEE et CP en petit/gris
       item.innerHTML = `
-        <span class="suggestion-name">${suggestion.name}</span>
-        <span class="suggestion-details">
-          <span>INSEE : <b>${suggestion.insee}</b></span>
-          <span style="margin-left:8px;">CP : <b>${Array.isArray(suggestion.postcodes) ? suggestion.postcodes.join(', ') : suggestion.postcode}</b></span>
+        <span class="suggestion-name" style="font-weight:bold;">${suggestion.name}</span><br>
+        <span class="suggestion-details" style="font-size:0.95em;color:#666;">
+          <span>INSEE&nbsp;: <b>${suggestion.insee}</b></span>
+          <span style="margin-left:12px;">CP&nbsp;: <b>${Array.isArray(suggestion.postcodes) ? suggestion.postcodes.join(', ') : suggestion.postcode}</b></span>
         </span>
       `;
       item.addEventListener('click', () => {