8ba9fc9161
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>
272 lines
17 KiB
HTML
272 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Service Commande — MVA Global Fret</title>
|
|
<meta name="description" content="MVA Global Fret commande à votre place sur les sites européens. 10% de commission, acompte de 50%, livraison à Madagascar.">
|
|
<link rel="icon" type="image/png" href="PNG MVA GLOBAL FRET.png">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@600;700&display=swap" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<a href="#main" class="skip-link">Aller au contenu principal</a>
|
|
|
|
<header class="header" id="header">
|
|
<div class="container header-inner">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Prochainement</a>
|
|
</nav>
|
|
<div class="header-right">
|
|
<div class="lang-switcher" role="group" aria-label="Choisir la langue">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Ouvrir le menu"><span></span><span></span><span></span></button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<nav class="mobile-nav" id="mobileNav">
|
|
<a href="accueil.html" data-i18n="nav.home">Accueil</a>
|
|
<a href="about.html" data-i18n="nav.about">Qui sommes-nous</a>
|
|
<a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a>
|
|
<a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a>
|
|
<a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a>
|
|
<a href="contact.html" data-i18n="nav.contact">Contact</a>
|
|
<a href="application.html" data-i18n="nav.app">Prochainement</a>
|
|
<div class="lang-switcher" style="margin-top:16px">
|
|
<button data-lang="fr" class="active">FR</button>
|
|
<button data-lang="en">EN</button>
|
|
<button data-lang="mg">MG</button>
|
|
</div>
|
|
</nav>
|
|
<div class="overlay" id="overlay"></div>
|
|
|
|
<main id="main">
|
|
|
|
<!-- HERO -->
|
|
<section class="hero hero-sub" style="background-image: url('https://images.unsplash.com/photo-1607082348824-0a96f2a4b9da?w=1600&q=80');">
|
|
<div class="hero-content animate-on-scroll">
|
|
<h1 data-i18n="serviceCommande.heroTitle">Service Commande pour Vous</h1>
|
|
<p data-i18n="serviceCommande.heroSubtitle">Nous commandons pour vous sur les sites européens, vous récupérez à Madagascar</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- INTRO -->
|
|
<section class="section" aria-labelledby="intro-title">
|
|
<div class="container">
|
|
<div class="section-header animate-on-scroll">
|
|
<h2 id="intro-title" data-i18n="serviceCommande.introTitle">Vous ne pouvez pas commander vous-même ?</h2>
|
|
<div class="gold-line"></div>
|
|
<p data-i18n="serviceCommande.introSubtitle">Pas de carte bancaire européenne, pas d'adresse en France, ou simplement pas le temps : nous nous en occupons pour vous.</p>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- COMMENT ÇA MARCHE -->
|
|
<section class="section" style="background: var(--light-gray);" aria-labelledby="how-title">
|
|
<div class="container">
|
|
<div class="section-header animate-on-scroll">
|
|
<h2 id="how-title" data-i18n="serviceCommande.howTitle">Comment ça marche ?</h2>
|
|
<div class="gold-line"></div>
|
|
<p data-i18n="serviceCommande.howSubtitle">Trois étapes simples</p>
|
|
</div>
|
|
|
|
<div class="steps-grid">
|
|
<div class="step-card animate-on-scroll delay-1">
|
|
<div class="step-number">1</div>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TARIFICATION -->
|
|
<section class="section" aria-labelledby="pricing-title">
|
|
<div class="container">
|
|
<div class="section-header animate-on-scroll">
|
|
<h2 id="pricing-title" data-i18n="serviceCommande.pricingTitle">Notre tarification</h2>
|
|
<div class="gold-line"></div>
|
|
</div>
|
|
|
|
<!-- Carte commission -->
|
|
<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>
|
|
<h3 data-i18n="serviceCommande.commissionTitle">10% du montant total de la commande</h3>
|
|
<p style="color: var(--text-light); margin-top: 12px;" data-i18n="serviceCommande.commissionDesc">Cette commission couvre la recherche du produit, la validation du panier, le passage de commande et le suivi jusqu'à réception au dépôt de Paris.</p>
|
|
</div>
|
|
|
|
<!-- Modalités de paiement -->
|
|
<div class="animate-on-scroll" style="max-width: 720px; margin: 0 auto;">
|
|
<h3 style="margin-bottom: 20px; color: var(--navy);" data-i18n="serviceCommande.paymentTitle">Modalités de paiement</h3>
|
|
<div style="display: grid; gap: 16px;">
|
|
<div style="display:flex; gap:16px; padding: 20px; background: var(--white); border: 1px solid rgba(197,165,90,0.25); border-left: 4px solid var(--gold); border-radius: 10px;">
|
|
<i class="fa-solid fa-circle-half-stroke" style="color: var(--gold); font-size: 1.5rem; flex-shrink: 0; margin-top: 2px;"></i>
|
|
<div>
|
|
<strong style="color: var(--navy);" data-i18n="serviceCommande.payment1Title">Acompte de 50% à la confirmation</strong>
|
|
<p style="color: var(--text-light); margin-top: 6px; font-size: 0.95rem;" data-i18n="serviceCommande.payment1Desc">Une fois le devis validé, vous versez 50% du montant total (produit + commission) pour que nous puissions passer la commande.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; gap:16px; padding: 20px; background: var(--white); border: 1px solid rgba(197,165,90,0.25); border-left: 4px solid var(--gold); border-radius: 10px;">
|
|
<i class="fa-solid fa-check-double" style="color: var(--gold); font-size: 1.5rem; flex-shrink: 0; margin-top: 2px;"></i>
|
|
<div>
|
|
<strong style="color: var(--navy);" data-i18n="serviceCommande.payment2Title">50% restants une fois la commande validée</strong>
|
|
<p style="color: var(--text-light); margin-top: 6px; font-size: 0.95rem;" data-i18n="serviceCommande.payment2Desc">Dès que le marchand confirme votre commande, vous réglez le solde des 50% restants.</p>
|
|
</div>
|
|
</div>
|
|
<div style="display:flex; gap:16px; padding: 20px; background: #fff8ec; border: 1px solid #ffd784; border-left: 4px solid var(--amber); border-radius: 10px;">
|
|
<i class="fa-solid fa-triangle-exclamation" style="color: var(--amber); font-size: 1.5rem; flex-shrink: 0; margin-top: 2px;"></i>
|
|
<div>
|
|
<strong style="color: #7a5c00;" data-i18n="serviceCommande.payment3Title">Commandes importantes : 100% à l'avance</strong>
|
|
<p style="color: #7a5c00; margin-top: 6px; font-size: 0.95rem;" data-i18n="serviceCommande.payment3Desc">Pour les commandes de montant élevé, nous nous réservons le droit de demander la totalité du paiement avant de passer commande. Le seuil est défini au cas par cas et communiqué dans le devis.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- TRANSPORT -->
|
|
<section class="section" style="background: var(--light-gray);" aria-labelledby="transport-title">
|
|
<div class="container">
|
|
<div class="section-header animate-on-scroll">
|
|
<h2 id="transport-title" data-i18n="serviceCommande.transportTitle">Et le transport ?</h2>
|
|
<div class="gold-line"></div>
|
|
</div>
|
|
|
|
<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 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>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- FAQ -->
|
|
<section class="section" aria-labelledby="faq-title">
|
|
<div class="container">
|
|
<div class="section-header animate-on-scroll">
|
|
<h2 id="faq-title" data-i18n="serviceCommande.faqTitle">Questions fréquentes</h2>
|
|
<div class="gold-line"></div>
|
|
</div>
|
|
|
|
<div class="faq-list" style="max-width: 800px; margin: 0 auto;">
|
|
<div class="faq-item animate-on-scroll">
|
|
<button class="faq-question"><span data-i18n="serviceCommande.faq1Q">Sur quels sites pouvez-vous commander ?</span><i class="fa-solid fa-chevron-down"></i></button>
|
|
<div class="faq-answer"><p data-i18n="serviceCommande.faq1A">Nous commandons sur la plupart des sites européens : Amazon, Cdiscount, Zalando, Shein, Decathlon, Fnac, Asos, Aliexpress (livré en Europe)… Si le site accepte une livraison en France, nous pouvons commander.</p></div>
|
|
</div>
|
|
<div class="faq-item animate-on-scroll">
|
|
<button class="faq-question"><span data-i18n="serviceCommande.faq2Q">Comment se passe le paiement de l'acompte ?</span><i class="fa-solid fa-chevron-down"></i></button>
|
|
<div class="faq-answer"><p data-i18n="serviceCommande.faq2A">Vous pouvez régler par mobile money à Madagascar (MVola, Orange Money, Airtel Money) ou par virement. Les coordonnées vous sont communiquées avec le devis.</p></div>
|
|
</div>
|
|
<div class="faq-item animate-on-scroll">
|
|
<button class="faq-question"><span data-i18n="serviceCommande.faq3Q">Que se passe-t-il en cas de problème avec le marchand ?</span><i class="fa-solid fa-chevron-down"></i></button>
|
|
<div class="faq-answer"><p data-i18n="serviceCommande.faq3A">Nous vous tenons informé à chaque étape. En cas de rupture de stock ou d'annulation par le marchand, l'acompte vous est intégralement restitué (la commission n'est pas retenue tant que la commande n'a pas été expédiée).</p></div>
|
|
</div>
|
|
<div class="faq-item animate-on-scroll">
|
|
<button class="faq-question"><span data-i18n="serviceCommande.faq4Q">Pouvez-vous regrouper plusieurs commandes ?</span><i class="fa-solid fa-chevron-down"></i></button>
|
|
<div class="faq-answer"><p data-i18n="serviceCommande.faq4A">Oui, vous pouvez nous envoyer plusieurs liens. Nous établissons un devis global avec une seule commission de 10% sur le total. Le transport sera ensuite facturé sur le poids cumulé.</p></div>
|
|
</div>
|
|
<div class="faq-item animate-on-scroll">
|
|
<button class="faq-question"><span data-i18n="serviceCommande.faq5Q">Quels produits ne pouvez-vous pas commander ?</span><i class="fa-solid fa-chevron-down"></i></button>
|
|
<div class="faq-answer"><p data-i18n="serviceCommande.faq5A">Tous les articles interdits par la réglementation IATA (batteries lithium seules, liquides inflammables, etc.) sont exclus. Consultez notre <a href="guide-envoi.html" style="color: var(--gold); font-weight: 600;">guide d'envoi</a> pour la liste complète.</p></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CTA -->
|
|
<section class="cta-banner">
|
|
<div class="container animate-on-scroll">
|
|
<h2 style="color: var(--white);" data-i18n="serviceCommande.ctaTitle">Une commande à passer ?</h2>
|
|
<p style="color: rgba(255,255,255,0.75); margin-bottom: 24px;" data-i18n="serviceCommande.ctaSubtitle">Contactez-nous avec votre lien produit, nous vous établissons un devis sous 24h.</p>
|
|
<div style="display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;">
|
|
<a href="contact.html" class="btn btn-primary">
|
|
<i class="fa-solid fa-paper-plane"></i> <span data-i18n="serviceCommande.ctaContact">Nous contacter</span>
|
|
</a>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" class="btn btn-white">
|
|
<i class="fa-brands fa-facebook-messenger"></i> <span data-i18n="serviceCommande.ctaMessenger">Messenger</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<p data-i18n="footer.desc">Votre partenaire de confiance pour le fret aérien entre l'Europe et Madagascar.</p>
|
|
<div class="social-links">
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" aria-label="Messenger"><i class="fa-brands fa-facebook-messenger"></i></a>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.linksTitle">Liens Rapides</h4>
|
|
<ul class="footer-links">
|
|
<li><a href="accueil.html" data-i18n="nav.home">Accueil</a></li>
|
|
<li><a href="about.html" data-i18n="nav.about">Qui sommes-nous</a></li>
|
|
<li><a href="tarifs.html" data-i18n="nav.pricing">Tarifs</a></li>
|
|
<li><a href="service-commande.html" data-i18n="nav.serviceCommande">Service Commande</a></li>
|
|
<li><a href="guide-envoi.html" data-i18n="nav.guide">Guide d'envoi</a></li>
|
|
<li><a href="contact.html" data-i18n="nav.contact">Contact</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h4 data-i18n="footer.contactTitle">Contact</h4>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+261384973751">+261 38 49 737 51</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-phone"></i><a href="tel:+33780970825">+33 7 80 97 08 25</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-envelope"></i><a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a></div>
|
|
<div class="footer-contact-item"><i class="fa-solid fa-location-dot"></i><span>Antananarivo 101, Madagascar</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer-bottom">
|
|
<div class="container">
|
|
<p data-i18n="footer.copyright">© 2026 MVA Global Fret. Tous droits réservés.</p>
|
|
<p style="margin-top:4px;"><a href="cgv.html" style="color:rgba(255,255,255,0.45); font-size:0.8rem;" data-i18n="footer.cgv">Conditions Générales de Vente</a></p>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
<script src="js/translations.js"></script>
|
|
<script src="js/main.js"></script>
|
|
</body>
|
|
</html>
|