From e1032b1405dc80425b136431fa843b0f5f976a5d Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Wed, 6 May 2026 08:40:14 +0200
Subject: [PATCH] Service Commande: redesign 'Et le transport ?' card
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avant : layout row asymétrique, icône en coin haut-gauche, bouton outline
qui flotte, hiérarchie visuelle plate.

Maintenant :
- Carte centrée 560px max, padding plus respirant, bordure or 6px en haut
- Icône 84px navy/or avec drop-shadow → gros pop visuel
- Prix éclaté : '70 000' en gros chiffre, 'Ar / kg' en doré accent
- Description plus compacte, contenue à 440px
- Bouton primary (or solide) avec flèche animée au hover
- Variant mobile (<480px) avec tailles réduites

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 css/style.css         | 90 ++++++++++++++++++++++++++++---------------
 service-commande.html | 20 +++++-----
 2 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4ac0a9e..687e665 100644
--- a/css/style.css
+++ b/css/style.css
@@ -737,60 +737,90 @@ p {
 
 /* --- Transport card (page Service Commande) --- */
 .transport-card {
-  max-width: 720px;
+  position: relative;
+  max-width: 560px;
   margin: 0 auto;
   background: var(--white);
-  border-radius: 16px;
-  padding: var(--space-xl);
-  box-shadow: 0 10px 30px rgba(26, 26, 62, 0.08);
+  border-radius: 20px;
+  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
+  text-align: center;
+  box-shadow: 0 16px 40px rgba(26, 26, 62, 0.10);
+  overflow: hidden;
 }
 
-.transport-card-row {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: var(--space-md);
+.transport-card::before {
+  content: "";
+  position: absolute;
+  top: 0; left: 0; right: 0;
+  height: 6px;
+  background: linear-gradient(90deg, var(--gold) 0%, #e0c98a 50%, var(--gold) 100%);
 }
 
 .transport-card-icon {
-  flex-shrink: 0;
-  width: 60px;
-  height: 60px;
-  border-radius: 14px;
-  background: linear-gradient(135deg, var(--navy), #2a2a5e);
+  width: 84px;
+  height: 84px;
+  margin: 0 auto var(--space-lg);
+  border-radius: 22px;
+  background: linear-gradient(135deg, var(--navy) 0%, #2a2a5e 100%);
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--gold);
-  font-size: 1.5rem;
+  font-size: 2rem;
+  box-shadow: 0 12px 28px rgba(26, 26, 62, 0.25);
 }
 
-.transport-card-body h3 {
+.transport-card-price {
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  gap: 8px;
+  margin-bottom: var(--space-md);
+  font-family: 'Poppins', var(--font-heading), sans-serif;
+}
+
+.transport-card-amount {
+  font-size: clamp(2.4rem, 5vw, 3.2rem);
+  font-weight: 800;
   color: var(--navy);
-  margin-bottom: var(--space-sm);
+  letter-spacing: -1px;
+  line-height: 1;
 }
 
-.transport-card-body p {
+.transport-card-unit {
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--gold);
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.transport-card-desc {
   color: var(--text-light);
-  margin: 0 0 var(--space-md);
+  font-size: 0.95rem;
+  line-height: 1.65;
+  max-width: 440px;
+  margin: 0 auto var(--space-lg);
 }
 
 .transport-card-cta {
   display: inline-flex;
+  align-items: center;
+  gap: 10px;
   white-space: nowrap;
 }
 
-@media (min-width: 600px) {
-  .transport-card-row {
-    flex-direction: row;
-    align-items: flex-start;
-    text-align: left;
-    gap: var(--space-lg);
-  }
-  .transport-card-cta {
-    margin-top: var(--space-sm);
-  }
+.transport-card-cta i {
+  transition: transform 0.25s ease;
+}
+.transport-card-cta:hover i {
+  transform: translateX(4px);
+}
+
+@media (max-width: 480px) {
+  .transport-card { padding: var(--space-xl) var(--space-lg); }
+  .transport-card-icon { width: 72px; height: 72px; font-size: 1.7rem; margin-bottom: var(--space-md); }
+  .transport-card-desc { font-size: 0.92rem; }
 }
 
 /* --- About section preview --- */
diff --git a/service-commande.html b/service-commande.html
index bf82db8..2aee400 100644
--- a/service-commande.html
+++ b/service-commande.html
@@ -161,16 +161,18 @@
         </div>
 
         <div class="animate-on-scroll transport-card">
-          <div class="transport-card-row">
-            <div class="transport-card-icon">
-              <i class="fa-solid fa-plane"></i>
-            </div>
-            <div class="transport-card-body">
-              <h3 data-i18n="serviceCommande.transportCardTitle">70 000 Ar par kilo</h3>
-              <p data-i18n="serviceCommande.transportCardDesc">Une fois le colis arrivé à Madagascar, vous payez le transport au tarif standard de fret aérien : 70 000 Ar par kilo, à régler à la réception après contre-pesée. Comme pour tous nos envois.</p>
-              <a href="tarifs.html" class="btn btn-secondary transport-card-cta" data-i18n="serviceCommande.transportCardCta">Voir nos tarifs détaillés</a>
-            </div>
+          <div class="transport-card-icon" aria-hidden="true">
+            <i class="fa-solid fa-plane"></i>
           </div>
+          <div class="transport-card-price">
+            <span class="transport-card-amount">70 000</span>
+            <span class="transport-card-unit">Ar / kg</span>
+          </div>
+          <p class="transport-card-desc" data-i18n="serviceCommande.transportCardDesc">Une fois le colis arrivé à Madagascar, vous payez le transport au tarif standard de fret aérien : 70 000 Ar par kilo, à régler à la réception après contre-pesée. Comme pour tous nos envois.</p>
+          <a href="tarifs.html" class="btn btn-primary transport-card-cta" data-i18n="serviceCommande.transportCardCta">
+            <span>Voir nos tarifs détaillés</span>
+            <i class="fa-solid fa-arrow-right"></i>
+          </a>
         </div>
       </div>
     </section>