<?php
/*
Template Name: Demande de devis commerciale V1
*/
get_header();
?>
<div id="Content" role="main">
<div class="content_wrapper clearfix">
<main class="sections_group">
<div class="entry-content" itemprop="mainContentOfPage">
<style>
/* --- SÉCURITÉ ANTI-DÉPASSEMENT --- */
.pyro-wrapper, .pyro-wrapper * {
box-sizing: border-box !important;
}
.pyro-wrapper {
width: 100%;
max-width: 950px;
margin: 40px auto;
padding: 40px;
background-color: #fcfcfc;
border-top: 6px solid #6F3080; /* Violet Pyrobox */
font-family: 'Segoe UI', Helvetica, Arial, sans-serif;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
border-radius: 0 0 8px 8px;
}
.pyro-header { text-align: center; margin-bottom: 30px; }
.pyro-header h1 { color: #333; font-size: 2em; margin-bottom: 10px; line-height: 1.3; }
.pyro-header p { color: #666; font-size: 1.1em; }
.form-section-title {
background-color: #f1f1f1;
padding: 12px 15px;
margin-top: 35px; margin-bottom: 20px;
color: #333; font-size: 1.1em;
text-transform: uppercase; font-weight: bold;
border-left: 4px solid #6F3080;
border-radius: 0 4px 4px 0;
}
/* --- LE NOUVEAU SYSTÈME DE GRILLE (Anti-Scroll) --- */
.pyro-row {
display: flex;
flex-direction: column; /* Par défaut sur mobile : L'un en dessous de l'autre */
gap: 20px;
margin-bottom: 20px;
}
.pyro-col {
width: 100%; /* Prend toute la largeur disponible */
}
/* Uniquement sur Ordinateur et Tablette (Côte à côte) */
@media (min-width: 768px) {
.pyro-row { flex-direction: row; }
.pyro-col { flex: 1; }
}
/* --------------------------------------------------- */
.pyro-input {
width: 100%; padding: 12px; border: 1px solid #ccc;
border-radius: 4px; font-size: 15px; background-color: #fff;
transition: border-color 0.3s;
}
.pyro-input:focus { border-color: #6F3080; outline: none; box-shadow: 0 0 5px rgba(111, 48, 128, 0.2); }
.pyro-label { font-weight: 600; font-size: 0.95em; display: block; margin-bottom: 8px; color: #444; }
.btn-generate {
width: 100%; padding: 18px; font-size: 18px;
background-color: #6F3080; color: #fff;
border: none; cursor: pointer; text-transform: uppercase;
margin-top: 30px; font-weight: bold; border-radius: 6px;
transition: background-color 0.3s, transform 0.1s;
}
.btn-generate:hover { background-color: #5a2668; }
.btn-generate:active { transform: scale(0.98); }
#form-response {
margin-top: 20px; font-weight: bold; text-align: center;
display: none; padding: 15px; border-radius: 4px;
}
/* Ajustements d'espacement pour petits téléphones */
@media (max-width: 600px) {
.pyro-header h1 { font-size: 1.6em; }
.pyro-wrapper { padding: 20px; margin: 20px auto; border-radius: 8px; border-top-width: 4px;}
}
</style>
<div class="pyro-wrapper">
<div class="pyro-header">
<h1>Demande de Devis Spectacle</h1>
<p>Décrivez-nous votre projet, notre équipe concevra un feu d'artifice sur-mesure.</p>
</div>
<form id="pyroForm">
<div class="form-section-title">1. Vos Coordonnées</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Vous êtes : *</label>
<select name="TypeClient" class="pyro-input" required>
<option value="" disabled selected>Choisissez une option...</option>
<option value="Particulier">Un Particulier</option>
<option value="Association">Une Association / Comité des Fêtes</option>
<option value="Collectivité">Une Mairie / Collectivité</option>
<option value="Entreprise">Une Entreprise</option>
</select>
</div>
<div class="pyro-col">
<label class="pyro-label">Nom de l'Organisateur / Client *</label>
<input type="text" name="Responsable" class="pyro-input" placeholder="Ex: Mairie de Paris / Mme Dupont" required>
</div>
</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Email *</label>
<input type="email" name="Email" class="pyro-input" placeholder="votre.email@exemple.com" required>
</div>
<div class="pyro-col">
<label class="pyro-label">Téléphone *</label>
<input type="tel" name="Telephone" class="pyro-input" required>
</div>
</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Adresse Postale (Facturation)</label>
<input type="text" name="FactuAdresse" class="pyro-input" placeholder="N° et Rue">
</div>
<div class="pyro-col">
<label class="pyro-label">Code Postal / Ville (Facturation)</label>
<input type="text" name="FactuCPVille" class="pyro-input" placeholder="Ex: 63000 Clermont-Ferrand">
</div>
</div>
<div class="form-section-title">2. Votre Événement</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Date souhaitée du tir *</label>
<input type="date" name="DateTir" class="pyro-input" required>
</div>
<div class="pyro-col">
<label class="pyro-label">Commune du tir *</label>
<input type="text" name="Commune" class="pyro-input" placeholder="Ex: Aydat" required>
</div>
</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Lieu exact (Domaine, Stade...) *</label>
<input type="text" name="SiteTir" class="pyro-input" placeholder="Ex: Parc du Château" required>
</div>
<div class="pyro-col">
<label class="pyro-label">Distance de sécurité estimée (en mètres)</label>
<input type="number" name="DistanceSecu" class="pyro-input" placeholder="Ex: 50">
</div>
</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Catégorie envisagée</label>
<select name="Categorie" class="pyro-input">
<option value="" selected>Je ne sais pas, conseillez-moi</option>
<option value="F2">F2 (Petite distance)</option>
<option value="F3">F3 (Intermédiaire)</option>
<option value="F2/F3 Mix">Mix F2/F3 (Standard)</option>
<option value="T2">T2 (Scène / Stade)</option>
</select>
</div>
</div>
<div class="form-section-title">3. Concept & Budget</div>
<div class="pyro-row">
<div class="pyro-col">
<label class="pyro-label">Ambiance souhaitée</label>
<select name="Ambiance" class="pyro-input">
<option value="Conseillez-moi">Laissez libre cours à votre créativité</option>
<option value="Dynamique & Festif">Dynamique & Festif</option>
<option value="Poétique & Émotion">Poétique & Émotion</option>
<option value="Épique & Grandiose">Épique & Grandiose</option>
<option value="Patriotique">Patriotique (Bleu Blanc Rouge)</option>
</select>
</div>
<div class="pyro-col">
<label class="pyro-label">Budget HT Global estimé (€) *</label>
<input type="number" name="Budget" class="pyro-input" placeholder="Ex: 1500" required>
</div>
</div>
<div class="pyro-row" style="margin-bottom: 0;">
<div class="pyro-col">
<label class="pyro-label">Note d'intention / Détails particuliers</label>
<textarea name="NoteIntention" class="pyro-input" rows="4" placeholder="Ex: Couleurs spécifiques souhaitées, musiques, contraintes du terrain..."></textarea>
</div>
</div>
<button type="submit" class="btn-generate" id="submitBtn">ENVOYER MA DEMANDE</button>
<div id="form-response"></div>
</form>
</div>
<script>
document.getElementById('pyroForm').addEventListener('submit', function(e) {
e.preventDefault();
var btn = document.getElementById('submitBtn');
var responseDiv = document.getElementById('form-response');
var formData = new FormData(this);
// ⚠️ N'OUBLIEZ PAS L'URL DE VOTRE SCRIPT GOOGLE ICI :
var webhookUrl = 'VOTRE_URL_WEB_APP_ICI';
btn.innerHTML = 'Envoi en cours...'; btn.disabled = true; btn.style.backgroundColor = '#999';
fetch(webhookUrl, { method: 'POST', body: formData })
.then(response => response.text())
.then(text => {
responseDiv.style.display = 'block'; responseDiv.style.backgroundColor = '#e8f5e9';
responseDiv.style.color = '#2e7d32'; responseDiv.style.border = '1px solid #c8e6c9';
responseDiv.innerHTML = '✅ Succès ! Votre demande a bien été transmise à notre équipe.';
btn.innerHTML = 'DEMANDE ENVOYÉE'; document.getElementById('pyroForm').reset();
})
.catch(error => {
responseDiv.style.display = 'block'; responseDiv.style.backgroundColor = '#ffebee';
responseDiv.style.color = '#c62828'; responseDiv.style.border = '1px solid #ffcdd2';
responseDiv.innerHTML = '❌ Erreur de communication. Veuillez réessayer.';
btn.innerHTML = 'RÉESSAYER'; btn.disabled = false; btn.style.backgroundColor = '#6F3080';
});
});
</script>
</div> </main>
<?php get_sidebar(); ?>
</div>
</div>
<?php get_footer(); ?>
