4a79136525
New page service-commande.html explaining the order-on-behalf service: - 10% commission on total order amount - 50% deposit + 50% on order validation - Right to request 100% upfront for large orders - Standard 70,000 Ar/kg shipping fee on top, paid on receipt - 5-question FAQ - CTA to contact / Messenger Trilingual content (FR / EN / MG) added to translations.js with full serviceCommande section + nav.serviceCommande key. Menu link inserted right after "Tarifs" in main nav, mobile nav and footer links across all pages: index, about, tarifs, contact, guide-envoi, application, cgv, service-commande. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
315 lines
18 KiB
HTML
315 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Contact & Inscription — MVA Global Fret</title>
|
|
<meta name="description" content="Inscrivez-vous chez MVA Global Fret pour envoyer vos colis de Paris à Antananarivo. Recevez votre numéro de référence client et l'adresse de dépôt à Paris.">
|
|
<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="index.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<nav class="nav" aria-label="Navigation principale">
|
|
<a href="index.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="index.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="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-1423666639041-f56000c27a9a?w=1600&q=80');">
|
|
<div class="hero-content animate-on-scroll">
|
|
<h1 data-i18n="contact.heroTitle">Contactez-Nous</h1>
|
|
<p data-i18n="contact.heroSubtitle">Inscrivez-vous et commencez à envoyer vos colis dès aujourd'hui</p>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- CONTACT SECTION -->
|
|
<section class="section" aria-labelledby="form-title">
|
|
<div class="container">
|
|
<div class="contact-grid">
|
|
|
|
<!-- FORMULAIRE -->
|
|
<div class="animate-on-scroll">
|
|
<h2 id="form-title" data-i18n="contact.formTitle">Formulaire d'inscription</h2>
|
|
<div class="gold-line" style="margin: 16px 0 24px;"></div>
|
|
<p style="color: var(--text-light); margin-bottom: 32px;" data-i18n="contact.formSubtitle">Remplissez ce formulaire pour recevoir votre numéro de référence client et l'adresse de dépôt à Paris.</p>
|
|
|
|
<div class="form-success" id="formSuccess" role="alert">
|
|
<i class="fa-solid fa-circle-check" style="font-size: 2rem; color: var(--green); display: block; margin-bottom: 12px;"></i>
|
|
<strong data-i18n="contact.successTitle">Inscription réussie !</strong><br>
|
|
<span data-i18n="contact.successMsg">Merci ! Votre inscription a bien été enregistrée.</span>
|
|
<div id="refNumberBlock" style="margin-top: 16px; padding: 14px 20px; background: var(--navy); border-radius: 8px; border: 2px solid var(--gold);">
|
|
<p style="margin:0 0 4px; font-size:0.85rem; color: var(--gold); font-weight:600;" data-i18n="contact.refLabel">VOTRE NUMÉRO DE RÉFÉRENCE CLIENT</p>
|
|
<p id="refNumberDisplay" style="margin:0; font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:2px;"></p>
|
|
</div>
|
|
<p style="margin-top:12px; font-size:0.9rem; color: var(--text-light);" data-i18n="contact.successNote">Conservez ce numéro précieusement.</p>
|
|
<p style="margin-top:8px; font-size:0.85rem; color: var(--text-light);" data-i18n="contact.emailSent">📧 Un email de confirmation vous a été envoyé. Vérifiez aussi vos spams.</p>
|
|
</div>
|
|
|
|
<!-- DÉJÀ INSCRIT -->
|
|
<div class="form-success" id="alreadyRegistered" role="alert" style="border-color: var(--gold); background: rgba(197,165,90,0.08);">
|
|
<i class="fa-solid fa-circle-info" style="font-size: 2rem; color: var(--gold); display: block; margin-bottom: 12px;"></i>
|
|
<strong data-i18n="contact.alreadyTitle">Vous êtes déjà client !</strong><br>
|
|
<span data-i18n="contact.alreadyMsg">Votre adresse email est déjà enregistrée dans notre système.</span>
|
|
<div id="existingRefBlock" style="margin-top: 16px; padding: 14px 20px; background: var(--navy); border-radius: 8px; border: 2px solid var(--gold);">
|
|
<p style="margin:0 0 4px; font-size:0.85rem; color: var(--gold); font-weight:600;" data-i18n="contact.alreadyRefLabel">VOTRE NUMÉRO DE RÉFÉRENCE EXISTANT</p>
|
|
<p id="existingRefDisplay" style="margin:0; font-size:1.6rem; font-weight:700; color:#fff; letter-spacing:2px;"></p>
|
|
</div>
|
|
<p style="margin-top:12px; font-size:0.9rem; color: var(--text-light);" data-i18n="contact.alreadyContact">Pour toute question, contactez-nous directement.</p>
|
|
</div>
|
|
|
|
<form id="contactForm" novalidate>
|
|
<div class="grid-2" style="gap: 16px;">
|
|
<div class="form-group">
|
|
<label for="lastname" data-i18n="contact.labelNom">Nom</label>
|
|
<input type="text" id="lastname" name="lastname" autocomplete="family-name" required
|
|
data-i18n-placeholder="contact.placeholderNom" placeholder="Votre nom de famille">
|
|
<div class="form-error" id="error-lastname"></div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label for="firstname" data-i18n="contact.labelPrenom">Prénom</label>
|
|
<input type="text" id="firstname" name="firstname" autocomplete="given-name" required
|
|
data-i18n-placeholder="contact.placeholderPrenom" placeholder="Votre prénom">
|
|
<div class="form-error" id="error-firstname"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="phone" data-i18n="contact.labelTel">Numéro de téléphone</label>
|
|
<input type="tel" id="phone" name="phone" autocomplete="tel" required
|
|
data-i18n-placeholder="contact.placeholderTel" placeholder="+261 38 00 000 00">
|
|
<div class="form-error" id="error-phone"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="email" data-i18n="contact.labelEmail">Adresse email</label>
|
|
<input type="email" id="email" name="email" autocomplete="email" required
|
|
data-i18n-placeholder="contact.placeholderEmail" placeholder="votre@email.com">
|
|
<div class="form-error" id="error-email"></div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="address" data-i18n="contact.labelAdresse">Adresse de livraison</label>
|
|
<textarea id="address" name="address" required
|
|
data-i18n-placeholder="contact.placeholderAdresse" placeholder="Adresse complète..."></textarea>
|
|
<div class="form-error" id="error-address"></div>
|
|
</div>
|
|
|
|
<!-- Case CGV -->
|
|
<div class="form-group" style="margin-bottom: 20px;">
|
|
<label style="display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:400; color:var(--text-light); font-size:0.9rem;">
|
|
<input type="checkbox" id="cgv" name="cgv" required
|
|
style="width:18px; height:18px; margin-top:2px; flex-shrink:0; accent-color:var(--gold); cursor:pointer;">
|
|
<span data-i18n-html="contact.cgvLabel">J'ai lu et j'accepte les <a href="cgv.html" target="_blank" style="color:var(--gold); font-weight:600; text-decoration:underline;">Conditions Générales de Vente</a> de MVA Global Fret.</span>
|
|
</label>
|
|
<div class="form-error" id="error-cgv"></div>
|
|
</div>
|
|
|
|
<div id="formErrorGlobal" style="display:none; color: var(--red); margin-bottom: 16px; font-size: 0.9rem;"></div>
|
|
|
|
<button type="submit" class="btn btn-primary" id="submitBtn" style="width: 100%; justify-content: center;">
|
|
<i class="fa-solid fa-paper-plane"></i>
|
|
<span id="submitText" data-i18n="contact.submitBtn">S'inscrire</span>
|
|
</button>
|
|
</form>
|
|
</div>
|
|
|
|
<!-- COORDONNÉES -->
|
|
<div class="animate-on-scroll delay-2">
|
|
<h2 data-i18n="contact.infoTitle">Nos Coordonnées</h2>
|
|
<div class="gold-line" style="margin: 16px 0 24px;"></div>
|
|
|
|
<div class="contact-info-card">
|
|
<div style="text-align:center; margin-bottom: 24px;">
|
|
<div style="display:inline-flex; align-items:center; gap:8px; background: rgba(197,165,90,0.15); color: var(--gold); padding: 8px 16px; border-radius: 50px; font-size: 0.85rem; font-weight: 600;">
|
|
<i class="fa-solid fa-circle" style="font-size: 8px; animation: pulse 2s infinite;"></i>
|
|
<span data-i18n="contact.infoAvailable">Disponible tous les jours</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.phoneMG">Numéro Madagascar</span>
|
|
<a href="tel:+261384973751">+261 38 49 737 51</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-phone" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.phoneFR">Numéro France</span>
|
|
<a href="tel:+33780970825">+33 7 80 97 08 25</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-envelope" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.email">Email</span>
|
|
<a href="mailto:mvaglobalfret@gmail.com">mvaglobalfret@gmail.com</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-solid fa-location-dot" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.address">Adresse</span>
|
|
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-brands fa-facebook" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.facebook">Facebook</span>
|
|
<a href="https://www.facebook.com/profile.php?id=61573448820736" target="_blank" rel="noopener noreferrer">MVA Global Fret</a>
|
|
</div>
|
|
</div>
|
|
<div class="contact-info-item">
|
|
<i class="fa-brands fa-facebook-messenger" aria-hidden="true"></i>
|
|
<div>
|
|
<span class="label" data-i18n="contact.messenger">Messenger</span>
|
|
<a href="https://m.me/61573448820736" target="_blank" rel="noopener noreferrer" data-i18n="contact.messengerAction">Discuter sur Messenger</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Info tarifs rapide -->
|
|
<div style="margin-top: 24px; background: var(--light-gray); border-radius: 12px; padding: 20px; border-left: 4px solid var(--gold);">
|
|
<h4 style="margin-bottom: 12px; display:flex; align-items:center; gap:8px;">
|
|
<i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
|
|
</h4>
|
|
<ul style="list-style: none; padding: 0; font-size: 0.9rem; color: var(--text-light);">
|
|
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
|
|
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
|
|
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
|
|
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- CARTE -->
|
|
<div class="map-section animate-on-scroll">
|
|
<div class="section-header">
|
|
<h2 data-i18n="contact.mapTitle">Notre Localisation</h2>
|
|
<div class="gold-line"></div>
|
|
<p data-i18n="contact.mapSubtitle">Notre siège au cœur d'Antananarivo</p>
|
|
</div>
|
|
<div class="map-card">
|
|
<div class="map-card-header">
|
|
<div class="map-card-icon"><i class="fa-solid fa-location-dot"></i></div>
|
|
<div class="map-card-info">
|
|
<strong>MVA Global Fret</strong>
|
|
<span data-i18n="contact.addressValue">Antananarivo 101, Madagascar</span>
|
|
</div>
|
|
<a href="https://www.google.com/maps/place/Antananarivo,+Madagascar" target="_blank" rel="noopener noreferrer" class="map-card-cta" aria-label="Ouvrir dans Google Maps">
|
|
<i class="fa-solid fa-arrow-up-right-from-square"></i>
|
|
</a>
|
|
</div>
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d119722.82983154597!2d47.46117785!3d-18.91368105!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x21f07e967738b369%3A0x3fac7a9b7c8ac!2sAntananarivo%2C%20Madagascar!5e0!3m2!1sfr!2sfr!4v1700000000000!5m2!1sfr!2sfr"
|
|
width="100%" height="420" style="border:0; display:block;" allowfullscreen="" loading="lazy"
|
|
referrerpolicy="no-referrer-when-downgrade"
|
|
title="Carte Antananarivo Madagascar — MVA Global Fret">
|
|
</iframe>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</section>
|
|
|
|
</main>
|
|
|
|
<footer class="footer" role="contentinfo">
|
|
<div class="container">
|
|
<div class="footer-grid">
|
|
<div class="footer-brand">
|
|
<a href="index.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="index.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">© 2025 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="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script>
|
|
<script src="js/translations.js"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/form-handler.js"></script>
|
|
|
|
<style>
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.3; }
|
|
}
|
|
</style>
|
|
</body>
|
|
</html>
|