From a8bf913e68768b2f6e03c7e7f985bce281f06660 Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Tue, 5 May 2026 21:54:57 +0200
Subject: [PATCH] Service Commande: clean up step cards (remove tiny icons, add
 proper grid)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Retirer les icônes <i> minuscules à côté de chaque étape
- Ajouter le style CSS .steps-grid (grille 3 colonnes desktop, stack mobile)
- Ajouter le style .step-card (carte blanche, ombre, hover lift)
- Badge numéroté agrandi (64px) avec drop-shadow doré
- Ligne dorée discrète qui relie les 3 étapes en desktop

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

diff --git a/css/style.css b/css/style.css
index cc387a1..28638a6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -617,6 +617,69 @@ p {
   }
 }
 
+/* --- Steps grid (Service Commande page) --- */
+.steps-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: var(--space-xl);
+  position: relative;
+}
+
+.step-card {
+  position: relative;
+  background: var(--white);
+  padding: var(--space-xl) var(--space-lg) var(--space-lg);
+  border-radius: var(--radius-md);
+  box-shadow: 0 4px 20px rgba(26, 26, 62, 0.06);
+  border: 1px solid rgba(26, 26, 62, 0.06);
+  text-align: center;
+  transition: transform 0.3s ease, box-shadow 0.3s ease;
+}
+
+.step-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 12px 32px rgba(26, 26, 62, 0.12);
+}
+
+.step-card .step-number {
+  width: 64px;
+  height: 64px;
+  margin: 0 auto var(--space-md);
+  font-size: 1.75rem;
+  box-shadow: 0 6px 18px rgba(197, 165, 90, 0.35);
+}
+
+.step-card h3 {
+  margin-bottom: var(--space-sm);
+  color: var(--navy);
+  font-size: 1.2rem;
+}
+
+.step-card p {
+  color: var(--text-light);
+  font-size: 0.95rem;
+  line-height: 1.6;
+  margin: 0;
+}
+
+@media (min-width: 768px) {
+  .steps-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+  .steps-grid::before {
+    content: '';
+    position: absolute;
+    top: 56px;
+    left: 16%;
+    right: 16%;
+    height: 2px;
+    background: linear-gradient(90deg, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
+    z-index: 0;
+    opacity: 0.5;
+  }
+  .step-card { z-index: 1; }
+}
+
 /* --- About section preview --- */
 .about-preview {
   display: grid;
diff --git a/service-commande.html b/service-commande.html
index 89fcd5e..f16bef8 100644
--- a/service-commande.html
+++ b/service-commande.html
@@ -88,19 +88,16 @@
         <div class="steps-grid">
           <div class="step-card animate-on-scroll delay-1">
             <div class="step-number">1</div>
-            <i class="fa-solid fa-link" aria-hidden="true"></i>
             <h3 data-i18n="serviceCommande.step1Title">Vous nous envoyez le lien</h3>
             <p data-i18n="serviceCommande.step1Desc">Envoyez-nous le lien du produit (Amazon, Cdiscount, Zalando, Shein, etc.) avec la taille, la couleur et la quantité souhaitée.</p>
           </div>
           <div class="step-card animate-on-scroll delay-2">
             <div class="step-number">2</div>
-            <i class="fa-solid fa-credit-card" aria-hidden="true"></i>
             <h3 data-i18n="serviceCommande.step2Title">Nous commandons</h3>
             <p data-i18n="serviceCommande.step2Desc">Nous validons le devis avec vous (produit + commission), vous versez l'acompte, puis nous passons commande sur le site.</p>
           </div>
           <div class="step-card animate-on-scroll delay-3">
             <div class="step-number">3</div>
-            <i class="fa-solid fa-box-open" aria-hidden="true"></i>
             <h3 data-i18n="serviceCommande.step3Title">Vous récupérez à Madagascar</h3>
             <p data-i18n="serviceCommande.step3Desc">Une fois reçu à notre dépôt de Paris, votre colis part par fret aérien et arrive à Antananarivo en 2 semaines.</p>
           </div>