Service Commande: redesign 'Et le transport ?' card

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

@@ -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;
+  border-radius: 20px;
-  padding: var(--space-xl);
+  padding: var(--space-2xl) var(--space-xl) var(--space-xl);
-  box-shadow: 0 10px 30px rgba(26, 26, 62, 0.08);
+  text-align: center;
+  box-shadow: 0 16px 40px rgba(26, 26, 62, 0.10);
+  overflow: hidden;
 }
 
-.transport-card-row {
+.transport-card::before {
-  display: flex;
+  content: "";
-  flex-direction: column;
+  position: absolute;
-  align-items: center;
+  top: 0; left: 0; right: 0;
-  text-align: center;
+  height: 6px;
-  gap: var(--space-md);
+  background: linear-gradient(90deg, var(--gold) 0%, #e0c98a 50%, var(--gold) 100%);
 }
 
 .transport-card-icon {
-  flex-shrink: 0;
+  width: 84px;
-  width: 60px;
+  height: 84px;
-  height: 60px;
+  margin: 0 auto var(--space-lg);
-  border-radius: 14px;
+  border-radius: 22px;
-  background: linear-gradient(135deg, var(--navy), #2a2a5e);
+  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-cta i {
-  .transport-card-row {
+  transition: transform 0.25s ease;
-    flex-direction: row;
+}
-    align-items: flex-start;
+.transport-card-cta:hover i {
-    text-align: left;
+  transform: translateX(4px);
-    gap: var(--space-lg);
+}
-  }
+
-  .transport-card-cta {
+@media (max-width: 480px) {
-    margin-top: var(--space-sm);
+  .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 --- */

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" aria-hidden="true">
-            <div class="transport-card-icon">
+            <i class="fa-solid fa-plane"></i>
-              <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>
+          <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>