From d9c6da550a949e91675b19f856931ff24a48b930 Mon Sep 17 00:00:00 2001
From: Alexis Feron <alexisferon081@gmail.com>
Date: Mon, 2 Jun 2025 10:46:39 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=93=B1=20Responsive=20timeline?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 angular.json                                        |  5 +++--
 src/app/components/timeline/timeline.component.html | 13 ++++++++-----
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/angular.json b/angular.json
index 074d9fb..58c0c51 100644
--- a/angular.json
+++ b/angular.json
@@ -32,8 +32,9 @@
             ],
             "styles": [
               "src/styles.css",
-              "node_modules/leaflet/dist/leaflet.css"
-            , "node_modules/intro.js/introjs.css"],
+              "node_modules/leaflet/dist/leaflet.css",
+              "node_modules/intro.js/introjs.css"
+            ],
             "scripts": [
               "node_modules/flowbite/dist/flowbite.min.js",
               "node_modules/leaflet/dist/leaflet.js",
diff --git a/src/app/components/timeline/timeline.component.html b/src/app/components/timeline/timeline.component.html
index c57a5c1..019fa82 100644
--- a/src/app/components/timeline/timeline.component.html
+++ b/src/app/components/timeline/timeline.component.html
@@ -37,13 +37,16 @@
         <!-- Espace vide -->
         <div
           class="w-full sm:w-5/12"
-          [ngClass]="{ 'order-1': i % 2 === 0, 'order-2': i % 2 !== 0 }"
+          [ngClass]="{ 'sm:order-1': i % 2 === 0, 'sm:order-2': i % 2 !== 0 }"
         ></div>
 
         <!-- Bulle centrale avec la date -->
         <div
           class="z-20 flex items-center justify-center bg-white border-[6px] border-blue-600 text-blue-700 font-bold text-lg shadow-2xl w-32 h-32 rounded-full text-center px-4 leading-tight"
-          [ngClass]="{ 'order-2': i % 2 === 0, 'order-1': i % 2 !== 0 }"
+          [ngClass]="{
+            'sm:order-2': i % 2 === 0,
+            'sm:order-1': i % 2 !== 0
+          }"
         >
           <span>{{ pin.date | date : "dd/MM/yyyy" }}</span>
         </div>
@@ -52,8 +55,8 @@
         <div
           class="bg-white dark:bg-gray-800 rounded-3xl shadow-2xl px-10 py-8 w-full sm:w-5/12 transition-all duration-300 hover:scale-[1.02]"
           [ngClass]="{
-            'order-3 text-center sm:text-left': i % 2 === 0,
-            'order-0 text-center sm:text-right': i % 2 !== 0
+            'sm:order-3 sm:text-left text-center': i % 2 === 0,
+            'sm:order-0 sm:text-right text-left': i % 2 !== 0
           }"
         >
           <!-- Titre centré -->
@@ -134,7 +137,7 @@
             </div>
           </ng-container>
 
-          <!-- Fallback s’il n’y a pas d’image -->
+          <!-- Fallback s'il n'y a pas d'image -->
           <ng-container
             *ngIf="
               !imageUrls[pins.indexOf(pin)] ||