diff --git a/index.php b/index.php
index 2658028..544dca7 100644
--- a/index.php
+++ b/index.php
@@ -28,22 +28,7 @@
         </form>
     </div>
     <div class="container">
-        <div class="left-column">
-
-            <ul class="cities">
-                <?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
-                <?php if (isset($citiesList)): ?>
-                    <?php foreach ($citiesList as $city): ?>
-                        <li>
-                            <?php
-                             echo '<a href="' . $city['href'] . '" target="_blank">' . $city['name'] . '</a>' ; ?>
-                        </li>
-                    <?php endforeach; ?>
-                <?php endif; ?>
-            </ul>
-
-        </div>
-        <div class="right-column">
+        <div class="map-column">
             <?php
             if (isset($_GET['calendrier'])) {
                 $jour = $_GET['calendrier'];
@@ -72,6 +57,20 @@
                 </script>
             <?php } ?>
         </div>
+        <div class="cities-column">
+            <ul class="cities">
+                <?php $citiesList = getCities('https://www.sabradou.com/index.php'); ?>
+                <?php if (isset($citiesList)): ?>
+                    <?php foreach ($citiesList as $city): ?>
+                        <li>
+                            <?php
+                             echo '<a href="' . $city['href'] . '" target="_blank">' . $city['name'] . '</a>' ; ?>
+                        </li>
+                    <?php endforeach; ?>
+                <?php endif; ?>
+            </ul>
+
+        </div>
     </div>
 </body>
 
diff --git a/style.css b/style.css
index 367f8c1..873b55f 100644
--- a/style.css
+++ b/style.css
@@ -6,20 +6,19 @@
 
 .container {
     display: flex;
-    width: 100%;
-    align-content: center;
+    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
+    align-items: top; /* Centre les éléments verticalement */
 }
 
-.left-column {
-    display: flex;
-    width: 10%;
+.cities-column {
+    flex: 1; /* Occupe 100% de la largeur dans les petits écrans et 10% dans les grands écrans */
     padding: 10px;
 }
 
-.right-column {
-    display: flex;
-    width: 90%;
+.map-column {
+    flex: 9; /* Occupe 100% de la largeur dans les petits écrans et 90% dans les grands écrans */
     padding: 10px;
+    margin-top: 20px;
 }
 
 .cities > li {
@@ -30,3 +29,18 @@
     text-align: center;
 }
 
+/* Media queries pour les ajustements spécifiques à différentes tailles d'écran */
+
+/* Pour les écrans de taille moyenne */
+@media (max-width: 768px) {
+    .left-column, .right-column {
+        flex: 100%; /* Occupe 100% de la largeur */
+    }
+}
+
+/* Pour les écrans de petite taille */
+@media (max-width: 576px) {
+    .container {
+        flex-direction: column; /* Affiche les colonnes les unes au-dessus des autres */
+    }
+}