/*
	Custom CSS
	Please make sure your CSS rules are 
	more particular / have higher priority
	then other page styles
*/
 #events h3   {
	/* add your css rule here */
}


 #events p.duration, #events div.duration   {
	/* add your css rule here */
}


 #events p.description, #events div.description   {
	/* add your css rule here */
}


 #events .selectedEvent   {
	/* add your css rule here */
}


 #events input.reserve_time_btn   {
	/* add your css rule here */
}


 #events input.select_another_btn   {
	/* add your css rule here */
}


 #eventForm #start_date-block-container h3, #eventForm #timeline-container h3   {
	/* add your css rule here */
}


 #eventForm #save_button   {
	/* add your css rule here */
}


 div.ui-widget-content   {
	/* add your css rule here */
}


 div.ui-widget-header   {
	/* add your css rule here */
}


 #timeline-container table.timeline   {
	/* add your css rule here */
}


 .timeline td.not_worked_time   {
	/* add your css rule here */
}


 .timeline td.free_time   {
	/* add your css rule here */
}


 .timeline td.selected_time   {
	/* add your css rule here */
}


 .timeline td.reserved_time   {
	/* add your css rule here */
}


 div#loading   {
	/* add your css rule here */
}


 #start_date-block-container .zend_form dt, start_date-block-container .zend_form dt b, start_date-block-container .zend_form dd label   {
	/* add your css rule here */
}

<!-- sauvegarde ce fichier en index.html et ouvre-le dans le navigateur -->
<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>Itinéraire - Autocomplete GPS</title>

  <style>
    /* --- Style simple et moderne pour intégrer au site --- */
    :root{
      --bg:#f7f9fb;
      --card:#ffffff;
      --accent:#2b7be4;
      --muted:#6b7280;
      --radius:8px;
      --shadow: 0 6px 18px rgba(32,33,36,0.08);
      font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    }
    body{
      margin:0;
      background:var(--bg);
      color:#111827;
      display:flex;
      justify-content:center;
      align-items:flex-start;
      min-height:100vh;
      padding:28px;
    }

    .container{
      width:100%;
      max-width:1100px;
      display:grid;
      grid-template-columns: 380px 1fr;
      gap:20px;
      align-items:start;
    }

    .card{
      background:var(--card);
      border-radius:var(--radius);
      box-shadow:var(--shadow);
      padding:18px;
    }

    .controls{
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    label{ font-size:13px; color:var(--muted); margin-bottom:6px; display:block; }
    .field{
      display:flex;
      flex-direction:column;
    }

    input[type="text"]{
      padding:10px 12px;
      border-radius:8px;
      border:1px solid #e6e9ee;
      font-size:15px;
      outline:none;
      transition:box-shadow .12s, border-color .12s;
    }
    input[type="text"]:focus{
      border-color:var(--accent);
      box-shadow:0 4px 12px rgba(43,123,228,0.12);
    }

    .button-row{
      display:flex;
      gap:10px;
      margin-top:8px;
    }
    button{
      padding:10px 14px;
      border-radius:8px;
      border:0;
      cursor:pointer;
      font-weight:600;
    }
    .btn-primary{
      background:var(--accent);
      color:white;
    }
    .btn-ghost{
      background:transparent;
      color:var(--accent);
      border:1px solid rgba(43,123,228,0.14);
    }

    /* Map container */
    #map {
      width:100%;
      height:640px;
      border-radius:var(--radius);
      overflow:hidden;
    }

    /* small info */
    .meta{ font-size:13px; color:var(--muted); margin-top:10px; }
    @media (max-width:960px){
      .container{ grid-template-columns: 1fr; }
      #map{ height:420px; }
    }
  </style>
</head>
<body>

  <div class="container">
    <div class="card">
      <h3>Calculer un itinéraire</h3>

      <div class="controls">
        <div class="field">
          <label for="start">Adresse de départ</label>
          <input id="start" type="text" placeholder="Saisissez l'adresse de départ" autocomplete="off"/>
        </div>

        <div class="field">
          <label for="end">Adresse d'arrivée</label>
          <input id="end" type="text" placeholder="Saisissez l'adresse d'arrivée" autocomplete="off"/>
        </div>

        <div class="button-row">
          <button id="routeBtn" class="btn-primary">Afficher l'itinéraire</button>
          <button id="clearBtn" class="btn-ghost">Réinitialiser</button>
        </div>

        <div class="meta">
          <div id="info">Saisissez deux adresses pour afficher la route.</div>
        </div>
      </div>
    </div>

    <div class="card">
      <div id="map"></div>
    </div>
  </div>

  <!-- Google Maps JS : remplace YOUR_GOOGLE_MAPS_API_KEY -->
  <script
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_MAPS_API_KEY&libraries=places&callback=initMap"
    async defer></script>

  <script>
    let map, directionsService, directionsRenderer;
    let autocompleteStart, autocompleteEnd;
    let placeStart = null, placeEnd = null;

    function initMap() {
      // carte centrée par défaut (Paris)
      map = new google.maps.Map(document.getElementById("map"), {
        center: { lat: 48.8566, lng: 2.3522 },
        zoom: 12,
        mapTypeControl: false,
      });

      directionsService = new google.maps.DirectionsService();
      directionsRenderer = new google.maps.DirectionsRenderer({ map: map, suppressMarkers: false });

      // Autocomplete
      const startInput = document.getElementById("start");
      const endInput = document.getElementById("end");
      autocompleteStart = new google.maps.places.Autocomplete(startInput, { fields: ["place_id","geometry","formatted_address","name"] });
      autocompleteEnd = new google.maps.places.Autocomplete(endInput, { fields: ["place_id","geometry","formatted_address","name"] });

      autocompleteStart.addListener("place_changed", () => {
        placeStart = autocompleteStart.getPlace();
        if (!placeStart.geometry) {
          showInfo("Adresse de départ invalide.");
          placeStart = null;
          return;
        }
        map.panTo(placeStart.geometry.location);
        map.setZoom(13);
        tryRouteAuto();
      });

      autocompleteEnd.addListener("place_changed", () => {
        placeEnd = autocompleteEnd.getPlace();
        if (!placeEnd.geometry) {
          showInfo("Adresse d'arrivée invalide.");
          placeEnd = null;
          return;
        }
        map.panTo(placeEnd.geometry.location);
        map.setZoom(13);
        tryRouteAuto();
      });

      // Buttons
      document.getElementById("routeBtn").addEventListener("click", calculateAndDisplayRoute);
      document.getElementById("clearBtn").addEventListener("click", resetAll);
    }

    function tryRouteAuto(){
      // Si les deux lieux sont sélectionnés, on calcule automatiquement
      if (placeStart && placeEnd) calculateAndDisplayRoute();
    }

    function calculateAndDisplayRoute() {
      const startVal = document.getElementById("start").value.trim();
      const endVal = document.getElementById("end").value.trim();

      if (!startVal || !endVal) {
        showInfo("Veuillez remplir les deux adresses.");
        return;
      }

      directionsService.route(
        {
          origin: startVal,
          destination: endVal,
          travelMode: google.maps.TravelMode.DRIVING, // ou WALKING, BICYCLING, TRANSIT
          provideRouteAlternatives: false,
        },
        (response, status) => {
          if (status === "OK")
