From c03b412f40e6e33bdb96e0cd343cd6828627d1bd Mon Sep 17 00:00:00 2001
From: Nicolas Doby <nicolas.doby@itsonus.fr>
Date: Tue, 10 Dec 2024 11:18:32 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20add=20minor=20corrections=20-=20Modifica?=
 =?UTF-8?q?tion=20du=20titre=20en=20haut=20de=20la=20page=20-=20R=C3=A9org?=
 =?UTF-8?q?anisation=20de=20la=20disposition=20des=20agences=20en=20bas=20?=
 =?UTF-8?q?de=20la=20page=20-=20Correction=20des=20coordonn=C3=A9es=20(cer?=
 =?UTF-8?q?taines=20agences=20=C3=A9taient=20associ=C3=A9es=20=C3=A0=20des?=
 =?UTF-8?q?=20num=C3=A9ros=20de=20t=C3=A9l=C3=A9phone=20incorrects)=20-=20?=
 =?UTF-8?q?Ajout=20d=E2=80=99une=20agence=20manquante=20et=20suppression?=
 =?UTF-8?q?=20d=E2=80=99un=20doublon=20concernant=20celle=20de=20Wignehies?=
 =?UTF-8?q?.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html      | 69 +++++++++++++++++++++----------------------------
 sass/style.scss | 64 ++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 87 insertions(+), 46 deletions(-)

diff --git a/index.html b/index.html
index b3e951c..3c15e83 100644
--- a/index.html
+++ b/index.html
@@ -11,9 +11,9 @@
 <header class="header">
     <img class="decoration-pipes--top" src="images/pipes.webp" alt="">
     <p class="header__information">
-        <span aria-hidden="true">Site internet est encours d’évolution</span>
-        <span>Site internet est encours d’évolution</span>
-        <span aria-hidden="true">Site internet est encours d’évolution</span>
+        <span aria-hidden="true">Site internet est en cours d’évolution</span>
+        <span>Site internet est en cours d’évolution</span>
+        <span aria-hidden="true">Site internet est en cours d’évolution</span>
     </p>
     <div class="header-content">
         <h1 class="header-content__title">
@@ -96,53 +96,44 @@
         <ul class="section-contact__addresses">
             <li class="address-item">
                 <span class="address-item__title">Saint-Rémy-du-Nord</span>
-                <span>03 27 63 66 00</span>
-                <address>
-                    12 Rue Jean Messager, 59330 Saint-Remy-du-Nord
-                </address>
-            </li>
-            <li class="address-item">
-                <span class="address-item__title">Estaires</span>
-                <span>03 28 48 83 98</span>
-                <address>
-                    52 Rue de la Chapelle, 59940 Estaires
-                </address>
+                <span class="address-item__phone">03 27 63 66 00</span>
+                <address>12 Rue Jean Messager<br/>59330 Saint-Remy-du-Nord</address>
             </li>
             <li class="address-item">
                 <span class="address-item__title">Auby</span>
-                <span>03 27 63 66 00</span>
-                <address>
-                    Rue Jean-Jacques Rousseau, 59950 Auby
-                </address>
-            </li>
-            <li class="address-item">
-                <span class="address-item__title">Raillencourt-Sainte-Olle</span>
-                <span>03 27 85 06 47</span>
-                <address>81 Av. des Deux Vallées, 59554
-                    Raillencourt-Sainte-Olle
-                </address>
+                <span class="address-item__phone">03 27 63 66 00</span>
+                <address>Rue Jean-Jacques Rousseau <br/>59950 Auby</address>
             </li>
+
             <li class="address-item">
                 <span class="address-item__title">Bondues</span>
-                <span>03 20 26 00 15</span>
-                <address>Rue du Moulin Cardon, 59910 Bondues</address>
+                <span class="address-item__phone">03 20 26 00 15</span>
+                <address>Rue du Moulin Cardon<br/>59910 Bondues</address>
             </li>
             <li class="address-item">
-                <span class="address-item__title">Wignehies</span>
-                <span>03 27 63 66 00</span>
-                <address>Adresse à confirmer</address>
-            </li>
-            <li class="address-item">
-                <span class="address-item__title">Wignehies</span>
-                <span>03 27 63 66 00</span>
-                <address>Adresse à confirmer</address>
+                <span class="address-item__title">Caudry</span>
+                <span class="address-item__phone">03 27 85 06 47</span>
+                <address>29 rue Edouard Vaillant <br/>59540 Caudry</address>
             </li>
             <li class="address-item">
                 <span class="address-item__title">Dunkerque</span>
-                <span>03 20 26 00 15</span>
-                <address>241 rue du Meunynck
-                    ZI de Petite Synthe 59640 Dunkerque
-                </address>
+                <span class="address-item__phone">03 28 44 21 82</span>
+                <address>241 rue du Meunynck <br/>ZI de Petite Synthe <br/>59640 Dunkerque</address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Estaires</span>
+                <span class="address-item__phone">03 28 48 83 98</span>
+                <address>52 Rue de la Chapelle<br/>59940 Estaires</address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Raillencourt-Sainte-Olle</span>
+                <span class="address-item__phone">03 27 85 06 47</span>
+                <address>81 Av. des Deux Vallées <br/>59554 Raillencourt-Sainte-Olle</address>
+            </li>
+            <li class="address-item">
+                <span class="address-item__title">Wignehies</span>
+                <span class="address-item__phone">03 27 57 26 12</span>
+                <address>8 route Féron <br/>59212 Wigneghies</address>
             </li>
         </ul>
     </section>
diff --git a/sass/style.scss b/sass/style.scss
index b667aa5..9217281 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -2,6 +2,7 @@ $page-width: 1280px;
 $color-black: #231f20;
 $color-white: #fafafa;
 $color-red: #d7191e;
+$color-blue: #0056b3;
 
 *,
 ::before,
@@ -239,29 +240,78 @@ body {
 }
 
 .section-contact {
-  margin: 48px 0;
+  padding: 40px 20px;
+  background-color: #fff;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+  margin: 40px 0;
 
   &__title {
     display: flex;
+    flex-direction: column;
     align-items: center;
-    gap: 48px;
+    gap: 8px;
+    text-align: center;
+    margin-bottom: 40px;
+
+    @media only screen and (min-width: 768px) {
+      flex-direction: row;
+      gap: 48px;
+    }
+
+    h2 {
+      font-size: 2.5em;
+      color: #333;
+    }
+
+    a {
+      font-size: 1.2em;
+      color: $color-blue;
+      text-decoration: none;
+      font-weight: bold;
+    }
   }
 
   &__addresses {
     display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 16px;
-    margin-block: 32px;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 30px;
+    margin-block-start: 32px;
   }
 
   .address-item {
     display: flex;
     flex-direction: column;
-    gap: 4px;
+    gap: 14px;
+
+    background-color: #f9f9f9;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.3s, box-shadow 0.3s;
+
+    &:hover {
+      transform: translateY(-10px);
+      box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
+    }
 
     &__title {
+      font-weight: 600;
       text-transform: uppercase;
-      margin-bottom: 6px;
+      font-size: 1.5em;
+      color: #333;
+    }
+
+    &__phone {
+      font-size: 1.2em;
+      color: $color-blue;
+      font-weight: bold;
+      flex-grow: 1;
+    }
+
+    address {
+      font-style: normal;
+      color: #666;
+      justify-self: end;
     }
   }
 }
\ No newline at end of file