Files
html/contact.html

194 lines
9.2 KiB
HTML

<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Contactez WEVAL Consulting · Casablanca · Paris · Montréal. Parlons de votre projet de transformation digitale, SAP, IA, ou cybersécurité.">
<link rel="canonical" href="https://weval-consulting.com/contact.html">
<title>Contact · WEVAL Consulting · Casablanca · Paris</title>
<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=Unbounded:wght@400;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "WEVAL Consulting",
"url": "https://weval-consulting.com",
"logo": "https://weval-consulting.com/logo.png",
"contactPoint": [
{"@type": "ContactPoint", "contactType": "sales", "email": "contact@weval-consulting.com", "areaServed": ["MA", "FR", "CA", "DZ", "TN"], "availableLanguage": ["French", "English"]}
],
"address": [
{"@type": "PostalAddress", "addressLocality": "Casablanca", "addressCountry": "MA"},
{"@type": "PostalAddress", "addressLocality": "Paris", "addressCountry": "FR"}
]
}
</script>
<style>
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#080a10;--cy:#22d3ee;--pu:#a78bfa;--gr:#22c55e;--t1:#eef0f4;--t2:#94a3b8;--t3:#64748b;--bd:rgba(255,255,255,0.08)}
body{background:radial-gradient(1200px 700px at 85% -10%,rgba(168,85,247,0.08),transparent 60%),radial-gradient(900px 600px at -10% 40%,rgba(34,211,238,0.07),transparent 55%),var(--bg);color:var(--t1);font-family:'Inter',system-ui,sans-serif;font-size:16px;line-height:1.6;min-height:100vh;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px);pointer-events:none;z-index:0}
main,nav,footer{position:relative;z-index:1}
a{color:inherit;text-decoration:none}
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;border-bottom:1px solid var(--bd);background:rgba(8,10,16,0.9);backdrop-filter:blur(12px);position:sticky;top:0}
.nav-logo{font-family:'Unbounded',sans-serif;font-size:18px;font-weight:700;background:linear-gradient(135deg,var(--cy),var(--pu));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;gap:24px;font-size:14px;color:var(--t2)}
.nav-links a:hover{color:var(--cy)}
.hero{padding:80px 32px 40px;max-width:1100px;margin:0 auto;text-align:center}
h1{font-family:'Unbounded',sans-serif;font-size:clamp(42px,6vw,64px);font-weight:700;line-height:1.1;margin-bottom:20px;background:linear-gradient(135deg,#fff,#94a3b8);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.subtitle{color:var(--t2);font-size:20px;max-width:600px;margin:0 auto 40px}
.grid{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;padding:20px 32px 80px;max-width:1200px;margin:0 auto}
@media(max-width:860px){.grid{grid-template-columns:1fr}}
.card{padding:36px;background:rgba(15,20,32,0.6);border:1px solid var(--bd);border-radius:18px;backdrop-filter:blur(10px)}
.card h2{font-family:'Unbounded',sans-serif;font-size:24px;margin-bottom:24px;color:var(--t1)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13px;color:var(--t2);margin-bottom:6px;font-weight:500}
.field input,.field textarea,.field select{width:100%;padding:12px 14px;background:rgba(8,10,16,0.6);border:1px solid var(--bd);border-radius:10px;color:var(--t1);font:inherit;transition:border-color .15s}
.field input:focus,.field textarea:focus,.field select:focus{outline:0;border-color:var(--cy)}
.field textarea{min-height:110px;resize:vertical}
.cta{width:100%;padding:14px 28px;background:linear-gradient(135deg,var(--cy),var(--pu));color:white;border:0;border-radius:12px;font-weight:600;font-size:15px;cursor:pointer;transition:transform .15s}
.cta:hover{transform:translateY(-2px)}
.office{padding:18px 0;border-bottom:1px solid var(--bd)}
.office:last-child{border-bottom:0}
.office h3{font-size:15px;font-weight:600;margin-bottom:6px;color:var(--t1)}
.office-meta{font-size:13px;color:var(--t2);line-height:1.7}
.office-meta b{color:var(--cy);font-weight:500}
.kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.kpi-pill{padding:6px 12px;background:rgba(34,211,238,0.1);color:var(--cy);border-radius:16px;font-size:12px;font-weight:500}
footer{padding:40px 32px;border-top:1px solid var(--bd);text-align:center;color:var(--t3);font-size:13px}
.footer-links{display:flex;gap:24px;justify-content:center;flex-wrap:wrap;margin-bottom:16px;font-size:14px}
.footer-links a{color:var(--t2)}
.footer-links a:hover{color:var(--cy)}
</style>
<!-- DOCTRINE-60-UX-ENRICH direct-inject-20260424-144050 -->
<style id="doctrine60-ux-direct">
/* DOCTRINE-60-UX-ENRICH injected-direct */
body::before {
content: '';
position: fixed;
top: 0; left: 0; width: 100vw; height: 100vh;
background: radial-gradient(circle at 50% 50%, rgba(100,180,255,0.08), transparent 60%);
pointer-events: none;
z-index: -1;
}
.card, .kpi, .panel, .btn {
transition: all 0.3s cubic-bezier(0.2,0,0.1,1);
}
.card:hover, .kpi:hover, .panel:hover {
box-shadow: 0 4px 20px rgba(100,180,255,0.2);
border-color: rgba(100,180,255,0.5);
}
@keyframes pulseD60 {
0%,100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.7; transform: scale(1.05); }
}
.pulse, .live-indicator, .active, .online {
animation: pulseD60 3s ease-in-out infinite;
}
.modal, .chat, .speech, .overlay {
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.enter-stagger {
animation: enterStagD60 0.5s cubic-bezier(0.2,0,0.1,1) forwards;
}
@keyframes enterStagD60 {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
</head>
<body>
<nav class="nav">
<a href="/" class="nav-logo">WEVAL Consulting</a>
<div class="nav-links">
<a href="/">Accueil</a>
<a href="/solutions.html">Solutions</a>
<a href="/products/workspace.html">Produits</a>
<a href="/contact.html" style="color:var(--cy)">Contact</a>
</div>
</nav>
<main>
<section class="hero">
<h1>Parlons de votre projet</h1>
<p class="subtitle">Notre équipe vous répond sous 24h ouvrées · Diagnostic gratuit</p>
</section>
<section class="grid">
<div class="card">
<h2>Demande de contact</h2>
<form onsubmit="event.preventDefault(); alert('Merci — nous vous recontactons sous 24h.'); return false;">
<div class="field"><label>Nom complet *</label><input type="text" required></div>
<div class="field"><label>Email professionnel *</label><input type="email" required></div>
<div class="field"><label>Entreprise</label><input type="text"></div>
<div class="field"><label>Sujet</label>
<select>
<option>Transformation Digitale</option>
<option>SAP ERP & Vistex</option>
<option>Cloud & Infrastructure</option>
<option>Intelligence Artificielle</option>
<option>Cybersécurité</option>
<option>Pharma & Supply Chain</option>
<option>Formation</option>
<option>Autre</option>
</select>
</div>
<div class="field"><label>Message *</label><textarea required placeholder="Décrivez votre besoin en quelques lignes..."></textarea></div>
<button class="cta" type="submit">Envoyer ma demande</button>
</form>
</div>
<div class="card">
<h2>Nos bureaux</h2>
<div class="office">
<h3>Casablanca · Maroc</h3>
<div class="office-meta">Siège régional<br><b>contact@weval-consulting.com</b></div>
</div>
<div class="office">
<h3>Paris · France</h3>
<div class="office-meta">Bureau européen<br><b>france@weval-consulting.com</b></div>
</div>
<div class="office">
<h3>Montréal · Canada</h3>
<div class="office-meta">Amérique du Nord<br><b>canada@weval-consulting.com</b></div>
</div>
<div class="kpi-row">
<span class="kpi-pill">5 pays</span>
<span class="kpi-pill">120+ consultants</span>
<span class="kpi-pill">300+ projets</span>
</div>
</div>
</section>
</main>
<footer>
<div class="footer-links">
<a href="/">Accueil</a>
<a href="/solutions.html">Solutions</a>
<a href="/products/workspace.html">Produits</a>
<a href="/privacy-policy.html">Confidentialité</a>
</div>
<div>© 2026 WEVAL Consulting · Casablanca · Paris · Montréal</div>
</footer>
<script src="/opus-antioverlap-doctrine.js?v=1776776094" defer></script>
<!-- DOCTRINE-60-UX-JS --><script id="doctrine60-ux-js-direct">
// DOCTRINE-60-UX-JS staggered entrance
(function(){
if (!('IntersectionObserver' in window)) return;
const obs = new IntersectionObserver((entries) => {
entries.forEach((e, i) => {
if (e.isIntersecting) {
setTimeout(() => e.target.classList.add('enter-stagger'), i * 80);
obs.unobserve(e.target);
}
});
});
document.querySelectorAll('.card, .kpi, .panel').forEach(el => obs.observe(el));
})();
</script>
</body>
</html>