* { margin: 0; padding: 0; box-sizing: border-box; }
body { background-color: #f0f4fa; }
.form-container { max-width: 700px; width: 100%; margin: 0 auto; background: #ffffff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 24px rgba(26,58,107,0.13); }
.form-header { background: linear-gradient(135deg,#1A3A6B 0%,#22518F 60%,#1A3A6B 100%); padding: 0; }
.form-header-top { display: flex; align-items: center; padding: 20px 28px; }
.form-header-left { flex: 1; }
.form-header-logo { font-size: 20px; font-weight: 800; color: #FFCC00; letter-spacing: 1px; }
.form-header-logo-sub { font-size: 9px; color: #aac4e8; letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }
.form-header-icon { font-size: 36px; opacity: 0.35; }
.stripe-top { width: 6px; background: #FFCC00; margin-right: 20px; }
.form-title-bar { background: #FFCC00; padding: 12px 28px; }
.form-title { margin: 0; font-size: 14px; font-weight: 800; color: #1A3A6B; text-transform: uppercase; letter-spacing: 1.5px; }
.form-content { padding: 28px 32px; }
.form-intro { margin: 0 0 20px 0; font-size: 15px; line-height: 1.7; color: #1A3A6B; font-weight: 600; }
.form-intro-sub { margin: 10px 0 0 0; font-size: 14px; line-height: 1.7; color: #333333; }
.form-divider { margin: 14px 0; border: none; border-top: 3px solid #FFCC00; border-bottom: 1px solid #e0e8f5; }
.form-group { margin-bottom: 16px; }
.form-label { display: block; padding-bottom: 6px; font-size: 12px; font-weight: 700; color: #1A3A6B; text-transform: uppercase; letter-spacing: 0.8px; }
.form-input { width: 100%; padding: 13px 16px; background: #f4f7fc; border: 1.5px solid #d0dced; border-radius: 7px; font-size: 13px; color: #333; }
.form-input::placeholder { color: #b0bece; }
.form-input:focus { outline: none; border-color: #1A3A6B; background: #fff; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) { .form-row { grid-template-columns: 1fr; } }
.form-cta { background: linear-gradient(135deg,#1A3A6B,#22518F); border-radius: 9px; padding: 16px 20px; margin: 10px 0 24px 0; border-left: 5px solid #FFCC00; }
.form-cta-title { margin: 0 0 6px 0; font-size: 13px; font-weight: 700; color: #FFCC00; text-transform: uppercase; letter-spacing: 1px; }
.form-cta-text { margin: 0; font-size: 13px; color: #d6e4f7; line-height: 1.6; }
.form-cta-highlight { color: #FFCC00; font-weight: 600; }
.form-benefit { background: #fffce8; border: 1.5px solid #FFCC00; border-radius: 8px; padding: 14px 18px; margin-bottom: 20px; display: flex; gap: 12px; }
.form-benefit-icon { font-size: 20px; flex-shrink: 0; }
.form-benefit-content { flex: 1; }
.form-benefit-title { margin: 0; font-size: 13px; color: #1A3A6B; font-weight: 700; }
.form-benefit-text { margin: 4px 0 0 0; font-size: 12px; color: #555555; line-height: 1.5; }
.form-footer-text { text-align: center; margin: 4px 0 28px 0; font-size: 16px; font-weight: 700; color: #1A3A6B; letter-spacing: 0.5px; }
.form-footer-sub { text-align: center; margin: 6px 0 0 0; font-size: 12px; color: #888888; }
.form-footer-bar { background: #1A3A6B; padding: 0; }
.form-footer-stripe { height: 3px; background: #FFCC00; }
.form-footer-content { padding: 16px 28px; }
.form-footer-info { font-size: 11px; color: #aac4e8; line-height: 1.6; margin: 0; }
.form-footer-info a { color: #FFCC00; text-decoration: none; }
.form-footer-regions { font-size: 9px; color: #5a7aaa; text-transform: uppercase; letter-spacing: 1px; text-align: right; }
.form-footer-legal { padding: 8px 28px; border-top: 1px solid #253f6b; font-size: 9px; color: #3d5a8a; line-height: 1.5; }
.form-footer-legal a { color: #5a7aaa; text-decoration: underline; }
.alert { padding: 12px 16px; border-radius: 6px; margin-bottom: 16px; display: none; }
.alert.show { display: block; }
.alert-success { background: #e8f5e9; border-left: 4px solid #4caf50; }
.alert-success h3 { color: #2e7d32; margin: 0 0 6px 0; font-size: 13px; font-weight: 700; }
.alert-success p { color: #388e3c; margin: 0; font-size: 13px; }
.alert-error { background: #ffebee; border-left: 4px solid #f44336; }
.alert-error h3 { color: #c62828; margin: 0 0 6px 0; font-size: 13px; font-weight: 700; }
.alert-error p { color: #d32f2f; margin: 0; font-size: 13px; }
.loading { display: none; text-align: center; padding: 10px; }
.loading.show { display: block; }
.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid #1A3A6B; border-top: 2px solid #FFCC00; border-radius: 50%; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
(function() {
const form = document.getElementById('flashForm');
const submitBtn = document.getElementById('submitBtn');
const successAlert = document.getElementById('successAlert');
const errorAlert = document.getElementById('errorAlert');
const errorMsg = document.getElementById('errorMsg');
// ⚠️ REMPLACEZ CETTE URL PAR VOTRE ZAPIER WEBHOOK
// Voir : Guide_Etapes_5_6_7_PublierWordPress.txt pour les instructions
const ZAPIER_WEBHOOK_URL = 'https://hooks.zapier.com/hooks/catch/VOTRE_ZAPIER_ID/VOTRE_CATCH_HOOK_ID';
form.addEventListener('submit', async (e) => {
e.preventDefault();
if (!form.checkValidity()) {
form.reportValidity();
return;
}
submitBtn.disabled = true;
successAlert.classList.remove('show');
errorAlert.classList.remove('show');
const formData = new FormData(form);
const payload = {
consommation: formData.get('consommation') + ' kWh',
secteur: formData.get('secteur'),
adresse: formData.get('adresse'),
nom: formData.get('nom'),
email: formData.get('email'),
telephone: formData.get('telephone'),
timestamp: new Date().toLocaleString('fr-FR'),
source: 'WordPress - Formulaire Étude Flash'
};
try {
await fetch(ZAPIER_WEBHOOK_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(payload),
mode: 'no-cors'
});
successAlert.classList.add('show');
form.reset();
successAlert.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} catch (error) {
console.error('Erreur:', error);
errorMsg.textContent = 'Erreur lors de l\'envoi. Contactez : mbouvier@excelnergy-partner.fr';
errorAlert.classList.add('show');
errorAlert.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
} finally {
submitBtn.disabled = false;
}
});
})();