- overflow-y: auto pour scroll vertical quand le menu déborde
- height: 100dvh (dynamic viewport) pour meilleur rendu mobile (barre URL)
- -webkit-overflow-scrolling: touch (smooth iOS)
- overscroll-behavior: contain (pas de scroll-chain sur le body en dessous)
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Avant: border-left 4px (juste à gauche).
Maintenant: border 2px tout autour pour bien encadrer.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
J'utilisais --space-xxl qui n'existe pas dans le système (les vraies
variables sont --space-2xl/3xl). Du coup margin-top tombait à 0 et le
bloc collait au formulaire.
Corrigé : margin-top=96px (--space-3xl) + max-width réduit à 680px
pour un meilleur centrage visuel.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Avant : le bloc 'Rappel tarifaire' était collé en bas de la colonne droite,
créant un déséquilibre visuel avec le formulaire plus court à gauche.
Maintenant : sorti de la grille, centré avec max-width 720px sous les
deux colonnes, en grille 2 colonnes sur ses items pour une lecture
plus dense et équilibrée.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- 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>
Remplace le prix unique de 6 000 Ar par 3 paliers (5/10/20 kg) plus
une ligne « Nous contacter » pour les colis plus lourds.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Bundle the actual SVG logos in images/payment-logos/ and reference
them with <img> instead of Font Awesome glyphs:
- mvola.svg (from mvola.mg, the green wordmark)
- orange.svg (Wikimedia Commons, square orange)
- airtel.svg (Wikimedia Commons, red wordmark)
- visa.svg (Wikimedia Commons)
- mastercard.svg (Wikimedia Commons)
New CSS block (.payment-logos-grid + .payment-logo-card) gives a
clean 4-column white-card layout with hover lift, gold border tint
on hover, and a 2-column responsive layout on mobile. The bank-card
slot now displays both Visa and Mastercard logos side-by-side.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
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>
- Replace the cramped map-container layout with a polished map-card
- Centered section header (h2 + gold-line + subtitle) above the card
- Navy gradient header inside the card with gold location icon
- Address displayed in the header alongside an "open in Google Maps" CTA
- Increased map height to 420px (320px on mobile)
- Soft shadow and gold-tinted border for premium feel
- Added mapSubtitle translation key (FR/EN/MG)
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
