<!-- Début Formulaire Style Bookly avec Progress Bar -->
<style>
.bookly-form {
  max-width: 750px;
  margin: 40px auto;
  padding: 30px;
  border-radius: 12px;
  background: #fff;
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #333;
  border: 1px solid #e0e0e0;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.bookly-form h2 {
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #2c2c2c;
}

/* Progress bar */
.progressbar {
  display: flex;
  justify-content: space-between;
  counter-reset: step;
  margin-bottom: 25px;
}

.progressbar li {
  list-style-type: none;
  width: 33%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  position: relative;
  color: #999;
}

.progressbar li:before {
  content: counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  line-height: 30px;
  border: 2px solid #ccc;
  display: block;
  text-align: center;
  margin: 0 auto 10px auto;
  border-radius: 50%;
  background-color: #fff;
  color: #999;
}

.progressbar li:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #ccc;
  top: 15px;
  left: -50%;
  z-index: -1;
}

.progressbar li:first-child:after {
  content: none;
}

.progressbar li.active {
  color: #4CAF50;
}

.progressbar li.active:before {
  border-color: #4CAF50;
  background-color: #4CAF50;
  color: #fff;
}

.progressbar li.active + li:after {
  background-color: #4CAF50;
}

/* Form steps */
.step {
  display: none;
}

.step.active {
  display: block;
}

.bookly-form .form-group {
  margin-bottom: 18px;
}

.bookly-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
  color: #555;
  font-size: 14px;
}

.bookly-form input,
.bookly-form select,
.bookly-form textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 15px;
  color: #333;
  background: #fafafa;
  transition: border 0.3s, background 0.3s;
}

.bookly-form input:focus,
.bookly-form select:focus,
.bookly-form textarea:focus {
  outline: none;
  border: 1px solid #4CAF50;
  background: #fff;
}

.bookly-form button {
  background: #4CAF50;
  color: #fff;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.3s, transform 0.2s;
}

.bookly-form button:hover {
  background: #43a047;
  transform: scale(1.02);
}

.btn-group {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

/* Success Message */
.success-msg {
  text-align: center;
  display: none;
  padding: 20px;
  border-radius: 10px;
  background: #e8f5e9;
  color: #2e7d32;
  font-weight: 600;
  margin-top: 20px;
}

.success-msg a {
  display: inline-block;
  margin-top: 15px;
  padding: 10px 18px;
  background: #4CAF50;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.3s;
}

.success-msg a:hover {
  background: #43a047;
}
</style>

<div class="bookly-form">
  <h2>📅 rendez-vous téléphoniques</h2>

  <!-- Progress Bar -->
  <ul class="progressbar">
    <li class="active">Infos</li>
    <li>RDV</li>
    <li>Confirmation</li>
  </ul>

  <form id="rdv-form" action="https://formspree.io/f/xvgbpokl" method="POST">

    <!-- Étape 1 -->
    <div class="step active">
      <div class="form-group">
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
      </div>

      <div class="form-group">
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
      </div>

      <div class="form-group">
        <label for="telephone">Téléphone :</label>
        <input type="tel" id="telephone" name="telephone" placeholder="0601020304" required>
      </div>

      <div class="btn-group">
        <div></div>
        <button type="button" onclick="nextStep()">Suivant ➡️</button>
      </div>
    </div>

    <!-- Étape 2 -->
    <div class="step">
      <div class="form-group">
        <label for="service">Service :</label>
        <select id="service" name="service" required>
          <option value="">-- Choisissez --</option>
          <option value="SITE INTERNET">SITE INTERNET</option>
          <option value="CONSEIL">CONSEIL</option>
        </select>
      </div>

      <div class="form-group">
        <label for="date">Date du RDV :</label>
        <input type="date" id="date" name="date" required>
      </div>

      <div class="form-group">
        <label for="heure">Créneau horaire :</label>
        <select id="heure" name="heure" required>
          <option value="">-- Choisissez --</option>
          <option value="09:00-10:00">09:00 - 10:00</option>
          <option value="10:00-11:00">10:00 - 11:00</option>
          <option value="11:00-12:00">11:00 - 12:00</option>
          <option value="14:00-15:00">14:00 - 15:00</option>
          <option value="15:00-16:00">15:00 - 16:00</option>
          <option value="16:00-17:00">16:00 - 17:00</option>
        </select>
      </div>

      <div class="btn-group">
        <button type="button" onclick="prevStep()">⬅️ Précédent</button>
        <button type="button" onclick="nextStep()">Suivant ➡️</button>
      </div>
    </div>

    <!-- Étape 3 -->
    <div class="step">
      <div class="form-group">
        <label for="message">Message (optionnel) :</label>
        <textarea id="message" name="message" rows="4"></textarea>
      </div>

      <div class="btn-group">
        <button type="button" onclick="prevStep()">⬅️ Précédent</button>
        <button type="submit">✅ Confirmer</button>
      </div>
    </div>
  </form>

  <!-- Message Succès -->
  <div class="success-msg" id="success-msg">
    ✅ Merci! Votre formulaire a été envoyé avec succès.<br>
    <a href="https://caromedia.fr">Retourner au site originel</a>
  </div>
</div>

<script>
let currentStep = 0;
const steps = document.querySelectorAll(".step");
const progressItems = document.querySelectorAll(".progressbar li");

function showStep(step) {
  steps.forEach((s, i) => {
    s.classList.remove("active");
    if(i === step) s.classList.add("active");
  });

  progressItems.forEach((p, i) => {
    p.classList.remove("active");
    if(i <= step) p.classList.add("active");
  });
}

function nextStep() {
  if(currentStep < steps.length - 1){
    currentStep++;
    showStep(currentStep);
  }
}

function prevStep() {
  if(currentStep > 0){
    currentStep--;
    showStep(currentStep);
  }
}

// Envoi Formspree + Succès
document.getElementById("rdv-form").addEventListener("submit", function(event){
  event.preventDefault();
  const form = event.target;
  const data = new FormData(form);

  fetch(form.action, {
    method: "POST",
    body: data,
    headers: { 'Accept': 'application/json' }
  }).then(response => {
    if(response.ok){
      form.style.display = "none";
      document.getElementById("success-msg").style.display = "block";
      form.reset();
    } else {
      alert("Erreur lors de l'envoi. Veuillez réessayer.");
    }
  }).catch(error => {
    alert("Erreur réseau. Vérifiez votre connexion.");
  });
});
</script>
<!-- Fin Formulaire -->