From 39d34967580ae2c07598a79a2d2a09aa7013aebc Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Mon, 4 May 2026 17:58:39 +0200
Subject: [PATCH] Redesign contact map section with elegant card layout

- Replace the cramped map-container layout with a polished map-card
- Centered section header (h2 + gold-line + subtitle) above the card
- Navy gradient header inside the card with gold location icon
- Address displayed in the header alongside an "open in Google Maps" CTA
- Increased map height to 420px (320px on mobile)
- Soft shadow and gold-tinted border for premium feel
- Added mapSubtitle translation key (FR/EN/MG)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 contact.html       | 32 ++++++++++++----
 css/style.css      | 91 ++++++++++++++++++++++++++++++++++++++++++++++
 js/translations.js |  3 ++
 3 files changed, 118 insertions(+), 8 deletions(-)

diff --git a/contact.html b/contact.html
index 3031421..09cf69f 100644
--- a/contact.html
+++ b/contact.html
@@ -228,14 +228,30 @@
         </div>
 
         <!-- CARTE -->
-        <div class="map-container animate-on-scroll" style="margin-top: 64px;">
-          <h3 style="margin-bottom: 16px;" data-i18n="contact.mapTitle">Notre Localisation</h3>
-          <iframe
-            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119722.82983154597!2d47.46117785!3d-18.91368105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e967738b369%3A0x3fac7a9b7c8ac!2sAntananarivo%2C%20Madagascar!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
-            width="100%" height="400" style="border:0;" allowfullscreen="" loading="lazy"
-            referrerpolicy="no-referrer-when-downgrade"
-            title="Carte Antananarivo Madagascar — MVA Global Fret">
-          </iframe>
+        <div class="map-section animate-on-scroll">
+          <div class="section-header">
+            <h2 data-i18n="contact.mapTitle">Notre Localisation</h2>
+            <div class="gold-line"></div>
+            <p data-i18n="contact.mapSubtitle">Notre siège au cœur d'Antananarivo</p>
+          </div>
+          <div class="map-card">
+            <div class="map-card-header">
+              <div class="map-card-icon"><i class="fa-solid fa-location-dot"></i></div>
+              <div class="map-card-info">
+                <strong>MVA Global Fret</strong>
+                <span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
+              </div>
+              <a href="https://www.google.com/maps/place/Antananarivo,+Madagascar" target="_blank" rel="noopener noreferrer" class="map-card-cta" aria-label="Ouvrir dans Google Maps">
+                <i class="fa-solid fa-arrow-up-right-from-square"></i>
+              </a>
+            </div>
+            <iframe
+              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119722.82983154597!2d47.46117785!3d-18.91368105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e967738b369%3A0x3fac7a9b7c8ac!2sAntananarivo%2C%20Madagascar!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
+              width="100%" height="420" style="border:0; display:block;" allowfullscreen="" loading="lazy"
+              referrerpolicy="no-referrer-when-downgrade"
+              title="Carte Antananarivo Madagascar — MVA Global Fret">
+            </iframe>
+          </div>
         </div>
 
       </div>
diff --git a/css/style.css b/css/style.css
index b85f9f8..a455665 100644
--- a/css/style.css
+++ b/css/style.css
@@ -990,6 +990,97 @@ p {
   border: none;
 }
 
+/* Map section (Contact page) */
+.map-section {
+  margin-top: 80px;
+}
+
+.map-card {
+  background: var(--white);
+  border-radius: 20px;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(26, 26, 62, 0.12);
+  border: 1px solid rgba(197, 165, 90, 0.15);
+}
+
+.map-card-header {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 22px 28px;
+  background: linear-gradient(135deg, var(--navy) 0%, #2a2a5e 100%);
+  color: var(--white);
+}
+
+.map-card-icon {
+  flex-shrink: 0;
+  width: 52px;
+  height: 52px;
+  border-radius: 14px;
+  background: rgba(197, 165, 90, 0.18);
+  border: 1px solid rgba(197, 165, 90, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gold);
+  font-size: 1.3rem;
+}
+
+.map-card-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.map-card-info strong {
+  font-family: 'Poppins', sans-serif;
+  font-size: 1.05rem;
+  font-weight: 600;
+  letter-spacing: 0.2px;
+  margin-bottom: 2px;
+}
+
+.map-card-info span {
+  color: rgba(255, 255, 255, 0.7);
+  font-size: 0.88rem;
+}
+
+.map-card-cta {
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  border-radius: 12px;
+  background: var(--gold);
+  color: var(--navy);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-decoration: none;
+  font-size: 0.95rem;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.map-card-cta:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 20px rgba(197, 165, 90, 0.4);
+}
+
+.map-card iframe {
+  display: block;
+  width: 100%;
+}
+
+@media (max-width: 600px) {
+  .map-section { margin-top: 56px; }
+  .map-card-header { padding: 16px 18px; gap: 12px; }
+  .map-card-icon { width: 44px; height: 44px; font-size: 1.1rem; }
+  .map-card-info strong { font-size: 0.95rem; }
+  .map-card-info span { font-size: 0.8rem; }
+  .map-card-cta { width: 40px; height: 40px; }
+  .map-card iframe { height: 320px !important; }
+}
+
 /* --- Guide page --- */
 .prohibited-grid {
   display: grid;
diff --git a/js/translations.js b/js/translations.js
index dba0fbc..b17d6e9 100644
--- a/js/translations.js
+++ b/js/translations.js
@@ -154,6 +154,7 @@ const translations = {
       addressValue: "Antananarivo 101, Madagascar",
       facebook: "Facebook",
       mapTitle: "Notre Localisation",
+      mapSubtitle: "Notre siège au cœur d'Antananarivo",
       messenger: "Messenger",
       messengerAction: "Discuter sur Messenger",
       priceReminder: "Rappel tarifaire",
@@ -426,6 +427,7 @@ const translations = {
       addressValue: "Antananarivo 101, Madagascar",
       facebook: "Facebook",
       mapTitle: "Our Location",
+      mapSubtitle: "Our headquarters in the heart of Antananarivo",
       messenger: "Messenger",
       messengerAction: "Chat on Messenger",
       priceReminder: "Pricing Summary",
@@ -698,6 +700,7 @@ const translations = {
       addressValue: "Antananarivo 101, Madagasikara",
       facebook: "Facebook",
       mapTitle: "Ny Toeranay",
+      mapSubtitle: "Ny biraonay eo afovoan'Antananarivo",
       messenger: "Messenger",
       messengerAction: "Resaka amin'ny Messenger",
       priceReminder: "Tsahivana ny sarany",