From 8ba9fc9161d2e477706e9a691c7ea6fe92ae323f Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Tue, 5 May 2026 22:07:51 +0200
Subject: [PATCH] Service Commande: stack transport card on mobile (button no
 longer cropped)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Avant : flex row figé même sur mobile → l'icône 60px écrasait la colonne
texte → le bouton 'Voir nos tarifs détaillés' wrappait sur 2 lignes
avec un cadre asymétrique.

Maintenant : sous 600px de large, le layout passe en colonne (icône
au-dessus, contenu centré). Bouton avec white-space: nowrap pour rester
sur 1 ligne. Sur desktop (>=600px), le layout reste en row classique.

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

diff --git a/css/style.css b/css/style.css
index d38a521..4ac0a9e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -735,6 +735,64 @@ p {
   }
 }
 
+/* --- Transport card (page Service Commande) --- */
+.transport-card {
+  max-width: 720px;
+  margin: 0 auto;
+  background: var(--white);
+  border-radius: 16px;
+  padding: var(--space-xl);
+  box-shadow: 0 10px 30px rgba(26, 26, 62, 0.08);
+}
+
+.transport-card-row {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: var(--space-md);
+}
+
+.transport-card-icon {
+  flex-shrink: 0;
+  width: 60px;
+  height: 60px;
+  border-radius: 14px;
+  background: linear-gradient(135deg, var(--navy), #2a2a5e);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gold);
+  font-size: 1.5rem;
+}
+
+.transport-card-body h3 {
+  color: var(--navy);
+  margin-bottom: var(--space-sm);
+}
+
+.transport-card-body p {
+  color: var(--text-light);
+  margin: 0 0 var(--space-md);
+}
+
+.transport-card-cta {
+  display: inline-flex;
+  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);
+  }
+}
+
 /* --- About section preview --- */
 .about-preview {
   display: grid;
diff --git a/service-commande.html b/service-commande.html
index f16bef8..bf82db8 100644
--- a/service-commande.html
+++ b/service-commande.html
@@ -160,15 +160,15 @@
           <div class="gold-line"></div>
         </div>
 
-        <div class="animate-on-scroll" style="max-width: 720px; margin: 0 auto; background: var(--white); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(26,26,62,0.08);">
-          <div style="display:flex; gap: 20px; align-items: flex-start;">
-            <div style="flex-shrink: 0; width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), #2a2a5e); display:flex; align-items:center; justify-content:center; color: var(--gold); font-size: 1.5rem;">
+        <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>
-              <h3 style="color: var(--navy); margin-bottom: 12px;" data-i18n="serviceCommande.transportCardTitle">70 000 Ar par kilo</h3>
-              <p style="color: var(--text-light);" 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" style="margin-top: 16px;" data-i18n="serviceCommande.transportCardCta">Voir nos tarifs détaillés</a>
+            <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>
         </div>