43e576249c
translations.js a Cache-Control max-age=7j sans versioning -> les visiteurs gardaient l'ancien menu en cache. Cache-buster pour rendre le renommage Contact->Inscription visible immédiatement par tous. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
180 lines
6.9 KiB
HTML
180 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Inscription confirmée — MVA Global Fret</title>
|
|
<meta name="description" content="Votre inscription chez MVA Global Fret est confirmée. Votre numéro de référence client vient d'être envoyé par email.">
|
|
<meta name="robots" content="noindex, nofollow">
|
|
<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">
|
|
|
|
<style>
|
|
.confirmation-shell {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.confirmation-main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 80px 24px 40px;
|
|
background: linear-gradient(135deg, var(--navy) 0%, #2a2a5e 100%);
|
|
}
|
|
.confirmation-card {
|
|
max-width: 560px;
|
|
width: 100%;
|
|
background: var(--white);
|
|
border-radius: 20px;
|
|
padding: 48px 36px;
|
|
text-align: center;
|
|
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
|
|
border: 2px solid var(--gold);
|
|
}
|
|
.confirmation-card .icon-circle {
|
|
width: 88px;
|
|
height: 88px;
|
|
margin: 0 auto 24px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, var(--gold), #e0c98a);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: 0 12px 30px rgba(197, 165, 90, 0.45);
|
|
}
|
|
.confirmation-card .icon-circle i {
|
|
font-size: 2.4rem;
|
|
color: var(--navy);
|
|
}
|
|
.confirmation-card h1 {
|
|
color: var(--navy);
|
|
margin-bottom: 16px;
|
|
font-size: clamp(1.6rem, 4vw, 2.2rem);
|
|
}
|
|
.confirmation-card p {
|
|
color: var(--text-light);
|
|
margin-bottom: 14px;
|
|
line-height: 1.6;
|
|
}
|
|
.confirmation-card .ref-block {
|
|
margin-top: 28px;
|
|
padding: 18px 24px;
|
|
background: var(--navy);
|
|
border-radius: 12px;
|
|
border: 2px solid var(--gold);
|
|
text-align: center;
|
|
}
|
|
.confirmation-card .ref-block small {
|
|
display: block;
|
|
color: var(--gold);
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
margin-bottom: 6px;
|
|
}
|
|
.confirmation-card .ref-block strong {
|
|
color: var(--white);
|
|
font-size: 1.6rem;
|
|
font-weight: 700;
|
|
letter-spacing: 2px;
|
|
}
|
|
.confirmation-card .actions {
|
|
margin-top: 32px;
|
|
display: flex;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
}
|
|
.confirmation-card .actions .btn {
|
|
flex: 1 1 200px;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
.confirmation-card .loader {
|
|
display: inline-block;
|
|
width: 18px;
|
|
height: 18px;
|
|
border: 2px solid rgba(26,26,62,0.2);
|
|
border-top-color: var(--navy);
|
|
border-radius: 50%;
|
|
animation: spin 0.7s linear infinite;
|
|
vertical-align: middle;
|
|
margin-right: 8px;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.confirmation-card.is-error .icon-circle {
|
|
background: linear-gradient(135deg, #ff5a5a, #ff8a8a);
|
|
box-shadow: 0 12px 30px rgba(255, 90, 90, 0.45);
|
|
}
|
|
.confirmation-card.is-error .icon-circle i { color: var(--white); }
|
|
.confirmation-card.is-error { border-color: #ff5a5a; }
|
|
</style>
|
|
</head>
|
|
<body class="confirmation-shell">
|
|
|
|
<header class="header" id="header" style="background: rgba(26,26,62,0.95);">
|
|
<div class="container header-inner">
|
|
<a href="accueil.html" class="logo"><img src="PNG MVA GLOBAL FRET.png" alt="MVA Global Fret"></a>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="confirmation-main">
|
|
<!-- État : chargement (par défaut) -->
|
|
<div class="confirmation-card" id="cardLoading">
|
|
<div class="icon-circle"><i class="fa-solid fa-envelope-open-text"></i></div>
|
|
<h1 data-i18n="confirmation.loadingTitle">Confirmation en cours…</h1>
|
|
<p data-i18n="confirmation.loadingDesc">Nous finalisons votre inscription et préparons votre numéro de référence client.</p>
|
|
<p style="margin-top:18px;"><span class="loader"></span><span data-i18n="confirmation.loadingHint">Quelques secondes…</span></p>
|
|
</div>
|
|
|
|
<!-- État : succès -->
|
|
<div class="confirmation-card" id="cardSuccess" style="display:none;">
|
|
<div class="icon-circle"><i class="fa-solid fa-circle-check"></i></div>
|
|
<h1 data-i18n="confirmation.successTitle">Inscription confirmée !</h1>
|
|
<p data-i18n="confirmation.successDesc">Bienvenue chez MVA Global Fret. Votre numéro de référence client vous a été envoyé par email.</p>
|
|
<div class="ref-block" id="refBlock" style="display:none;">
|
|
<small data-i18n="confirmation.refLabel">VOTRE NUMÉRO DE RÉFÉRENCE CLIENT</small>
|
|
<strong id="refDisplay"></strong>
|
|
</div>
|
|
<p style="margin-top:18px; font-size:0.9rem;" data-i18n="confirmation.successHint">📧 Pensez aussi à vérifier vos spams.</p>
|
|
<div class="actions">
|
|
<a href="accueil.html" class="btn btn-primary" data-i18n="confirmation.backHome">Retour à l'accueil</a>
|
|
<a href="guide-envoi.html" class="btn btn-secondary" data-i18n="confirmation.guide">Guide d'envoi</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- État : erreur -->
|
|
<div class="confirmation-card is-error" id="cardError" style="display:none;">
|
|
<div class="icon-circle"><i class="fa-solid fa-circle-exclamation"></i></div>
|
|
<h1 data-i18n="confirmation.errorTitle">Confirmation reçue</h1>
|
|
<p data-i18n="confirmation.errorDesc">Votre confirmation est bien enregistrée chez MVA Global Fret. En cas de question sur votre numéro de référence, contactez-nous directement.</p>
|
|
<div class="actions">
|
|
<a href="contact.html" class="btn btn-primary" data-i18n="confirmation.contactUs">Nous contacter</a>
|
|
<a href="accueil.html" class="btn btn-secondary" data-i18n="confirmation.backHome">Retour à l'accueil</a>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer style="background: var(--navy-dark, #050518); color: rgba(255,255,255,0.6); padding: 18px 24px; text-align:center; font-size: 0.85rem;">
|
|
© 2026 MVA Global Fret. Tous droits réservés.
|
|
</footer>
|
|
|
|
<script src="js/translations.js?v=20260603"></script>
|
|
<script src="js/main.js"></script>
|
|
<script src="js/confirmation.js"></script>
|
|
</body>
|
|
</html>
|