From baa71149b2178cb8796741bc90a52108b7645590 Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Tue, 5 May 2026 21:57:39 +0200
Subject: [PATCH] Contact: center the price reminder block below the 2-column
 grid
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avant : le bloc 'Rappel tarifaire' était collé en bas de la colonne droite,
créant un déséquilibre visuel avec le formulaire plus court à gauche.

Maintenant : sorti de la grille, centré avec max-width 720px sous les
deux colonnes, en grille 2 colonnes sur ses items pour une lecture
plus dense et équilibrée.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 contact.html  | 26 +++++++++++++-------------
 css/style.css | 51 +++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 13 deletions(-)

diff --git a/contact.html b/contact.html
index b67a084..7a589a8 100644
--- a/contact.html
+++ b/contact.html
@@ -211,23 +211,23 @@
                 </div>
               </div>
             </div>
-
-            <!-- Info tarifs rapide -->
-            <div style="margin-top: 24px; background: var(--light-gray); border-radius: 12px; padding: 20px; border-left: 4px solid var(--gold);">
-              <h4 style="margin-bottom: 12px; display:flex; align-items:center; gap:8px;">
-                <i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
-              </h4>
-              <ul style="list-style: none; padding: 0; font-size: 0.9rem; color: var(--text-light);">
-                <li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
-                <li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
-                <li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
-                <li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
-              </ul>
-            </div>
           </div>
 
         </div>
 
+        <!-- Info tarifs rapide — bloc centré pleine largeur -->
+        <div class="price-reminder animate-on-scroll">
+          <h4>
+            <i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
+          </h4>
+          <ul>
+            <li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
+            <li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
+            <li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
+            <li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
+          </ul>
+        </div>
+
         <!-- CARTE -->
         <div class="map-section animate-on-scroll">
           <div class="section-header">
diff --git a/css/style.css b/css/style.css
index 28638a6..9e53f93 100644
--- a/css/style.css
+++ b/css/style.css
@@ -680,6 +680,57 @@ p {
   .step-card { z-index: 1; }
 }
 
+/* --- Rappel tarifaire (page Contact, bloc centré) --- */
+.price-reminder {
+  max-width: 720px;
+  margin: var(--space-xxl) auto 0;
+  background: var(--light-gray);
+  border-radius: var(--radius-md);
+  padding: var(--space-lg) var(--space-xl);
+  border-left: 4px solid var(--gold);
+  box-shadow: 0 4px 16px rgba(26, 26, 62, 0.05);
+}
+
+.price-reminder h4 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  margin-bottom: var(--space-md);
+  color: var(--navy);
+  font-size: 1.15rem;
+}
+
+.price-reminder ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+  font-size: 0.95rem;
+  color: var(--text-light);
+}
+
+.price-reminder ul li {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 0;
+}
+
+.price-reminder ul li i {
+  color: var(--green);
+  flex-shrink: 0;
+}
+
+@media (min-width: 600px) {
+  .price-reminder ul {
+    grid-template-columns: 1fr 1fr;
+    column-gap: var(--space-xl);
+  }
+}
+
 /* --- About section preview --- */
 .about-preview {
   display: grid;