From 0045a7d3b22677ed06f660cda916bde8c14cb575 Mon Sep 17 00:00:00 2001
From: MVA Global Fret <mvaglobalfret@gmail.com>
Date: Mon, 4 May 2026 21:02:33 +0200
Subject: [PATCH] Fix uneven border on Service Commande pricing card

The default .pricing-card has both a 3px gold border AND a 6px gold
gradient bar on top (::before). On the Service Commande page that
combination made the top edge look much thicker than the sides.

Add a .pricing-card--flat modifier that hides the ::before bar and
trims the border to 2px, then apply it to the commission card.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 css/style.css         | 4 ++++
 service-commande.html | 2 +-
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/css/style.css b/css/style.css
index a455665..4fae03e 100644
--- a/css/style.css
+++ b/css/style.css
@@ -687,6 +687,10 @@ p {
   background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
 }
 
+/* Variant: pricing card without the top gold gradient bar */
+.pricing-card--flat::before { display: none; }
+.pricing-card--flat { border-width: 2px; }
+
 .pricing-amount {
   font-family: var(--font-heading);
   font-size: clamp(2.5rem, 6vw, 4rem);
diff --git a/service-commande.html b/service-commande.html
index d42511a..8e4a526 100644
--- a/service-commande.html
+++ b/service-commande.html
@@ -117,7 +117,7 @@
         </div>
 
         <!-- Carte commission -->
-        <div class="pricing-card animate-on-scroll" style="max-width: 720px; margin: 0 auto 32px;">
+        <div class="pricing-card pricing-card--flat animate-on-scroll" style="max-width: 720px; margin: 0 auto 32px;">
           <div style="display:inline-flex; align-items:center; gap:8px; background: linear-gradient(135deg, var(--navy), #2a2a5e); color: var(--gold); padding: 6px 18px; border-radius: 50px; font-size: 0.85rem; font-weight: 600; margin-bottom: 24px;">
             <i class="fa-solid fa-percent"></i> <span data-i18n="serviceCommande.commissionBadge">Commission</span>
           </div>