{"id":22,"date":"2026-04-10T09:23:40","date_gmt":"2026-04-10T09:23:40","guid":{"rendered":"https:\/\/clientslocaux.com\/index.php\/reserver\/"},"modified":"2026-04-10T09:23:40","modified_gmt":"2026-04-10T09:23:40","slug":"reserver","status":"publish","type":"page","link":"https:\/\/clientslocaux.com\/index.php\/reserver\/","title":{"rendered":"Reserver un chauffeur"},"content":{"rendered":"\n<div class=\"w-site vtc-booking-page\" >\n\n<style>\n.vtc-booking-page { padding: 80px 0 60px; background: #f8f7f5; min-height: 100vh; }\n.vtc-book-wrap    { max-width: 920px; margin: 0 auto; padding: 0 24px; }\n.vtc-book-title   { text-align:center; margin-bottom:48px; }\n.vtc-book-title h1{ font-size: clamp(1.8rem,4vw,2.8rem); }\n\n\/* Progress *\/\n.vtc-progress { display:flex; align-items:center; justify-content:center; gap:0; margin-bottom:52px; }\n.vtc-prog-step { display:flex; flex-direction:column; align-items:center; gap:7px; flex:1; position:relative; }\n.vtc-prog-step:not(:last-child)::after { content:''; position:absolute; top:18px; left:50%; width:100%; height:1px; background:rgba(255,255,255,0.1); z-index:0; }\n.vtc-prog-step.done:not(:last-child)::after,.vtc-prog-step.active:not(:last-child)::after { background:var(--or,#c9a96e); }\n.vtc-prog-num  { width:36px; height:36px; border-radius:50%; border:1px solid rgba(255,255,255,0.15); background:#161616; color:#8a8a8a; display:flex; align-items:center; justify-content:center; font-size:0.82rem; font-weight:600; position:relative; z-index:1; transition:all .3s; }\n.vtc-prog-step.active .vtc-prog-num { border-color:var(--or,#c9a96e); color:var(--or,#c9a96e); background:rgba(201,169,110,0.08); }\n.vtc-prog-step.done   .vtc-prog-num { background:#0a0a0a; border-color:#0a0a0a; color:#ffffff; }\n.vtc-prog-lbl  { font-size:0.65rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:#6a6a6a; text-align:center; }\n.vtc-prog-step.active .vtc-prog-lbl { color:var(--or,#c9a96e); }\n.vtc-prog-step.done   .vtc-prog-lbl { color:#c8c8c8; }\n\n\/* Steps *\/\n.vtc-book-step { display:none; animation: bkIn .3s ease; }\n.vtc-book-step.active { display:block; }\n@keyframes bkIn { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:translateY(0)} }\n\n.vtc-book-card { background:#161616; border:1px solid rgba(255,255,255,0.07); border-radius:12px; padding:40px; margin-bottom:20px; }\n.vtc-book-card h2 { font-size:1.7rem; margin-bottom:28px; }\n\n\/* Trip type *\/\n.vtc-trip-selector { display:flex; gap:10px; margin-bottom:28px; }\n.vtc-trip-btn { flex:1; padding:12px 16px; background:#1e1e1e; border:1.5px solid rgba(255,255,255,0.09); border-radius:6px; color:#8a8a8a; font-family:var(--ff-b,'Jost',sans-serif); font-size:0.82rem; font-weight:500; text-align:center; cursor:pointer; transition:all .25s; }\n.vtc-trip-btn.active { border-color:var(--or,#c9a96e); color:var(--or,#c9a96e); background:rgba(201,169,110,0.06); }\n\n\/* Form grid *\/\n.vtc-book-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }\n.vtc-book-grid.col-1 { grid-template-columns:1fr; }\n.vtc-book-grid.col-3 { grid-template-columns:1fr 1fr 1fr; }\n.vtc-book-field { display:flex; flex-direction:column; gap:6px; }\n.vtc-book-field label { font-size:0.7rem; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; color:var(--or,#c9a96e); }\n.vtc-book-field input,.vtc-book-field select,.vtc-book-field textarea { background:#111; border:1.5px solid rgba(255,255,255,0.1); border-radius:6px; color:#fff; font-family:var(--ff-b,'Jost',sans-serif); font-size:0.93rem; padding:12px 16px; outline:none; transition:border-color .2s; width:100%; }\n.vtc-book-field input:focus,.vtc-book-field select:focus,.vtc-book-field textarea:focus { border-color:var(--or,#c9a96e); }\n.vtc-book-field input::placeholder { color:rgba(255,255,255,0.22); }\n.vtc-book-field select option { background:#1e1e1e; color:#fff; }\n.vtc-book-field textarea { resize:vertical; min-height:90px; }\n\n\/* Vehicle selector *\/\n.vtc-veh-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:20px; }\n.vtc-veh-opt { background:#111; border:1.5px solid rgba(255,255,255,0.08); border-radius:8px; padding:18px; cursor:pointer; text-align:center; transition:all .25s; position:relative; }\n.vtc-veh-opt.selected { border-color:var(--or,#c9a96e); background:rgba(201,169,110,0.06); }\n.vtc-veh-opt:hover { border-color:rgba(201,169,110,0.35); }\n.vtc-veh-opt-img { width:100%; height:80px; object-fit:contain; margin-bottom:10px; border-radius:4px; background:#1e1e1e; }\n.vtc-veh-opt-img-ph { width:100%; height:80px; display:flex; align-items:center; justify-content:center; background:#1e1e1e; border-radius:4px; margin-bottom:10px; font-family:Georgia,serif; font-size:0.85rem; color:#4a4a4a; }\n.vtc-veh-opt-name { font-family:Georgia,serif; font-size:1rem; color:#fff; margin-bottom:3px; }\n.vtc-veh-opt-sub  { font-size:0.72rem; color:#8a8a8a; margin-bottom:6px; }\n.vtc-veh-opt-price{ font-family:Georgia,serif; font-size:1.1rem; color:var(--or,#c9a96e); }\n.vtc-veh-opt-check { position:absolute; top:10px; right:10px; width:18px; height:18px; border-radius:50%; border:2px solid rgba(201,169,110,0.3); display:flex; align-items:center; justify-content:center; transition:all .2s; }\n.vtc-veh-opt.selected .vtc-veh-opt-check { background:var(--or,#c9a96e); border-color:var(--or,#c9a96e); }\n.vtc-veh-opt.selected .vtc-veh-opt-check::after { content:'v'; font-size:10px; color:#0a0a0a; font-weight:900; }\n\n\/* Extras *\/\n.vtc-extras-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:6px; }\n.vtc-extra-item { display:flex; align-items:center; gap:8px; padding:10px 16px; background:#111; border:1.5px solid rgba(255,255,255,0.08); border-radius:6px; cursor:pointer; font-size:0.82rem; color:#8a8a8a; transition:all .2s; }\n.vtc-extra-item:has(input:checked) { border-color:var(--or,#c9a96e); color:#fff; background:rgba(201,169,110,0.05); }\n.vtc-extra-item input { accent-color:var(--or,#c9a96e); }\n\n\/* Live price *\/\n.vtc-live-price { display:flex; align-items:baseline; justify-content:flex-end; gap:8px; margin-top:24px; padding-top:18px; border-top:1px solid rgba(255,255,255,0.07); }\n.vtc-live-price-label { font-size:0.78rem; color:#8a8a8a; }\n.vtc-live-price-value { font-family:Georgia,serif; font-size:2rem; color:var(--or,#c9a96e); transition:all .3s; }\n\n\/* Recap *\/\n.vtc-recap { background:#111; border:1px solid rgba(201,169,110,0.14); border-radius:10px; padding:24px 28px; margin-bottom:20px; }\n.vtc-recap-row { display:flex; justify-content:space-between; align-items:baseline; padding:8px 0; border-bottom:1px solid rgba(255,255,255,0.05); }\n.vtc-recap-row:last-child { border:none; padding-bottom:0; }\n.vtc-recap-label { font-size:0.8rem; color:#8a8a8a; }\n.vtc-recap-value { font-size:0.88rem; color:#c8c8c8; text-align:right; max-width:55%; }\n.vtc-recap-total .vtc-recap-label { font-weight:700; color:#fff; font-size:0.88rem; }\n.vtc-recap-total .vtc-recap-value { font-family:Georgia,serif; font-size:1.9rem; color:var(--or,#c9a96e); }\n\n\/* Nav buttons *\/\n.vtc-book-nav { display:flex; justify-content:space-between; align-items:center; margin-top:28px; }\n.vtc-btn-back { background:transparent; border:1px solid rgba(255,255,255,0.15); color:#c8c8c8; font-family:var(--ff-b,'Jost',sans-serif); font-size:0.8rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; padding:13px 26px; border-radius:6px; cursor:pointer; transition:all .25s; }\n.vtc-btn-back:hover { border-color:#fff; color:#fff; }\n.vtc-btn-fwd { background:#0a0a0a; color:#ffffff; font-family:var(--ff-b,'Jost',sans-serif); font-size:0.8rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:13px 34px; border-radius:6px; border:none; cursor:pointer; transition:all .25s; display:inline-flex; align-items:center; gap:8px; }\n.vtc-btn-fwd:hover { background:#e8d5a3; transform:translateY(-1px); }\n.vtc-btn-fwd:disabled { opacity:0.6; cursor:not-allowed; transform:none; }\n\n\/* Stripe *\/\n#vtc-stripe-el { background:#111; border:1.5px solid rgba(255,255,255,0.1); border-radius:8px; padding:18px; min-height:180px; margin:22px 0; }\n.vtc-stripe-loading { display:flex; align-items:center; justify-content:center; gap:12px; padding:40px; color:#8a8a8a; font-size:0.85rem; }\n.vtc-stripe-spinner { width:20px; height:20px; border:2px solid rgba(201,169,110,0.2); border-top-color:var(--or,#c9a96e); border-radius:50%; animation:spin .8s linear infinite; }\n@keyframes spin { to{transform:rotate(360deg)} }\n\n\/* Confirmation *\/\n.vtc-confirm-page { text-align:center; padding:60px 20px; }\n.vtc-confirm-icon { width:80px; height:80px; border-radius:50%; border:1.5px solid var(--or,#c9a96e); display:flex; align-items:center; justify-content:center; margin:0 auto 28px; color:var(--or,#c9a96e); }\n.vtc-confirm-ref  { background:#161616; border:1px solid rgba(201,169,110,0.2); border-radius:8px; padding:22px 28px; display:inline-block; margin:24px 0; }\n.vtc-confirm-ref-num { font-family:monospace; font-size:1.8rem; font-weight:700; color:var(--or,#c9a96e); letter-spacing:3px; }\n\n\/* Field error *\/\n.vtc-field-err { color:#e05555; font-size:0.75rem; margin-top:3px; }\n.vtc-field-err-border { border-color:rgba(224,85,85,0.5) !important; }\n\n@media(max-width:640px){ .vtc-book-card{padding:24px 18px} .vtc-veh-selector{grid-template-columns:1fr} .vtc-trip-selector{flex-direction:column} .vtc-book-grid{grid-template-columns:1fr} }\n<\/style>\n\n<div class=\"vtc-book-wrap\">\n\n  <div class=\"vtc-book-title\">\n    <span class=\"vtc-eyebrow\">Reservation en ligne<\/span>\n    <h1>Reservez votre chauffeur<\/h1>\n  <\/div>\n\n  <!-- Progress bar -->\n  <div class=\"vtc-progress\" role=\"list\">\n          <div class=\"vtc-prog-step active\" role=\"listitem\">\n        <div class=\"vtc-prog-num\">1<\/div>\n        <span class=\"vtc-prog-lbl\">Votre trajet<\/span>\n      <\/div>\n          <div class=\"vtc-prog-step \" role=\"listitem\">\n        <div class=\"vtc-prog-num\">2<\/div>\n        <span class=\"vtc-prog-lbl\">Vos options<\/span>\n      <\/div>\n          <div class=\"vtc-prog-step \" role=\"listitem\">\n        <div class=\"vtc-prog-num\">3<\/div>\n        <span class=\"vtc-prog-lbl\">Vos coordonnees<\/span>\n      <\/div>\n          <div class=\"vtc-prog-step \" role=\"listitem\">\n        <div class=\"vtc-prog-num\">4<\/div>\n        <span class=\"vtc-prog-lbl\">Paiement<\/span>\n      <\/div>\n          <div class=\"vtc-prog-step \" role=\"listitem\">\n        <div class=\"vtc-prog-num\">v<\/div>\n        <span class=\"vtc-prog-lbl\">Confirmation<\/span>\n      <\/div>\n      <\/div>\n\n  <form id=\"vtc-booking-form\" novalidate data-tva=\"20\">\n\n    <!--  ETAPE 1 : Trajet  -->\n    <div class=\"vtc-book-step active\" data-step=\"0\">\n      <div class=\"vtc-book-card\">\n        <h2>Votre trajet<\/h2>\n\n        <div class=\"vtc-trip-selector\" role=\"group\">\n          <button type=\"button\" class=\"vtc-trip-btn active\" data-val=\"one_way\">Aller simple<\/button>\n          <button type=\"button\" class=\"vtc-trip-btn\" data-val=\"round_trip\">Aller-retour<\/button>\n          <button type=\"button\" class=\"vtc-trip-btn\" data-val=\"hourly\">Mise a disposition<\/button>\n        <\/div>\n\n        <div class=\"vtc-book-grid\">\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-from\">Depart *<\/label>\n            <input type=\"text\" id=\"vtc-book-from\" name=\"from\" value=\"\" placeholder=\"Adresse, aeroport, hotel...\" autocomplete=\"off\" required>\n          <\/div>\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-to\">Destination *<\/label>\n            <input type=\"text\" id=\"vtc-book-to\" name=\"to\" value=\"\" placeholder=\"Adresse, aeroport, hotel...\" autocomplete=\"off\" required>\n          <\/div>\n        <\/div>\n\n        <div class=\"vtc-book-grid\" id=\"vtc-date-row\">\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-date\">Date *<\/label>\n            <input type=\"date\" id=\"vtc-book-date\" name=\"date\" value=\"\" min=\"2026-04-15\" required>\n          <\/div>\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-time\">Heure *<\/label>\n            <input type=\"time\" id=\"vtc-book-time\" name=\"time\" value=\"\" required>\n          <\/div>\n        <\/div>\n\n        <!-- Retour (si aller-retour) -->\n        <div class=\"vtc-book-grid\" id=\"vtc-return-row\" style=\"display:none;\">\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-rdate\">Date retour<\/label>\n            <input type=\"date\" id=\"vtc-book-rdate\" name=\"return_date\" min=\"2026-04-15\">\n          <\/div>\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-rtime\">Heure retour<\/label>\n            <input type=\"time\" id=\"vtc-book-rtime\" name=\"return_time\">\n          <\/div>\n        <\/div>\n\n        <!-- Duree (si mise a dispo) -->\n        <div class=\"vtc-book-grid col-1\" id=\"vtc-duration-row\" style=\"display:none;\">\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-book-duration\">Duree (heures)<\/label>\n            <select id=\"vtc-book-duration\" name=\"duration_h\">\n              <option value='1'>1 h<\/option><option value='2'>2 h<\/option><option value='3'>3 h<\/option><option value='4'>4 h<\/option><option value='5'>5 h<\/option><option value='6'>6 h<\/option><option value='7'>7 h<\/option><option value='8'>8 h<\/option><option value='9'>9 h<\/option><option value='10'>10 h<\/option><option value='11'>11 h<\/option><option value='12'>12 h<\/option>            <\/select>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"vtc-book-nav\">\n        <span><\/span>\n        <button type=\"button\" class=\"vtc-btn-fwd vtc-next\">Suivant -><\/button>\n      <\/div>\n    <\/div>\n\n    <!--  ETAPE 2 : Vehicule & Options  -->\n    <div class=\"vtc-book-step\" data-step=\"1\">\n      <div class=\"vtc-book-card\">\n        <h2>Vehicule<\/h2>\n\n        <div class=\"vtc-veh-selector\" role=\"radiogroup\" aria-label=\"Selection vehicule\">\n                      <div class=\"vtc-veh-opt\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n                 data-id=\"1\"\n                 data-name=\"Mercedes Classe E\"\n                 data-cat=\"berline\"\n                 data-base=\"80.00\"\n                 data-km=\"1.80\"\n                 data-hour=\"45.00\">\n              <div class=\"vtc-veh-opt-check\"><\/div>\n                              <div class=\"vtc-veh-opt-img-ph\">Mercedes Classe E<\/div>\n                            <div class=\"vtc-veh-opt-name\">Mercedes Classe E<\/div>\n              <div class=\"vtc-veh-opt-sub\">4 pax  3 bagages<\/div>\n              <div class=\"vtc-veh-opt-price\">A partir de 80 EUR<\/div>\n            <\/div>\n                      <div class=\"vtc-veh-opt\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n                 data-id=\"2\"\n                 data-name=\"Mercedes Classe V\"\n                 data-cat=\"van\"\n                 data-base=\"120.00\"\n                 data-km=\"2.20\"\n                 data-hour=\"65.00\">\n              <div class=\"vtc-veh-opt-check\"><\/div>\n                              <div class=\"vtc-veh-opt-img-ph\">Mercedes Classe V<\/div>\n                            <div class=\"vtc-veh-opt-name\">Mercedes Classe V<\/div>\n              <div class=\"vtc-veh-opt-sub\">7 pax  7 bagages<\/div>\n              <div class=\"vtc-veh-opt-price\">A partir de 120 EUR<\/div>\n            <\/div>\n                      <div class=\"vtc-veh-opt\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n                 data-id=\"3\"\n                 data-name=\"BMW Serie 7\"\n                 data-cat=\"luxe\"\n                 data-base=\"150.00\"\n                 data-km=\"2.50\"\n                 data-hour=\"80.00\">\n              <div class=\"vtc-veh-opt-check\"><\/div>\n                              <div class=\"vtc-veh-opt-img-ph\">BMW Serie 7<\/div>\n                            <div class=\"vtc-veh-opt-name\">BMW Serie 7<\/div>\n              <div class=\"vtc-veh-opt-sub\">4 pax  3 bagages<\/div>\n              <div class=\"vtc-veh-opt-price\">A partir de 150 EUR<\/div>\n            <\/div>\n                      <div class=\"vtc-veh-opt\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n                 data-id=\"4\"\n                 data-name=\"Tesla Model S\"\n                 data-cat=\"luxe\"\n                 data-base=\"130.00\"\n                 data-km=\"2.30\"\n                 data-hour=\"70.00\">\n              <div class=\"vtc-veh-opt-check\"><\/div>\n                              <div class=\"vtc-veh-opt-img-ph\">Tesla Model S<\/div>\n                            <div class=\"vtc-veh-opt-name\">Tesla Model S<\/div>\n              <div class=\"vtc-veh-opt-sub\">4 pax  2 bagages<\/div>\n              <div class=\"vtc-veh-opt-price\">A partir de 130 EUR<\/div>\n            <\/div>\n                      <div class=\"vtc-veh-opt\" role=\"radio\" aria-checked=\"false\" tabindex=\"0\"\n                 data-id=\"5\"\n                 data-name=\"Mercedes S-Class\"\n                 data-cat=\"vip\"\n                 data-base=\"200.00\"\n                 data-km=\"3.00\"\n                 data-hour=\"100.00\">\n              <div class=\"vtc-veh-opt-check\"><\/div>\n                              <div class=\"vtc-veh-opt-img-ph\">Mercedes S-Class<\/div>\n                            <div class=\"vtc-veh-opt-name\">Mercedes S-Class<\/div>\n              <div class=\"vtc-veh-opt-sub\">4 pax  3 bagages<\/div>\n              <div class=\"vtc-veh-opt-price\">A partir de 200 EUR<\/div>\n            <\/div>\n                  <\/div>\n\n        <div class=\"vtc-book-grid col-3\">\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-pax\">Passagers<\/label>\n            <select id=\"vtc-pax\" name=\"pax\">\n              <option value='1'>1 pax<\/option><option value='2'>2 pax<\/option><option value='3'>3 pax<\/option><option value='4'>4 pax<\/option><option value='5'>5 pax<\/option><option value='6'>6 pax<\/option><option value='7'>7 pax<\/option><option value='8'>8 pax<\/option>            <\/select>\n          <\/div>\n          <div class=\"vtc-book-field\">\n            <label for=\"vtc-luggage\">Bagages<\/label>\n            <select id=\"vtc-luggage\" name=\"luggage\">\n              <option value='0'>0 bags<\/option><option value='1'>1 bags<\/option><option value='2'>2 bags<\/option><option value='3'>3 bags<\/option><option value='4'>4 bags<\/option><option value='5'>5 bags<\/option><option value='6'>6 bags<\/option><option value='7'>7 bags<\/option><option value='8'>8 bags<\/option>            <\/select>\n          <\/div>\n        <\/div>\n\n        <div class=\"vtc-book-field\" style=\"margin-top:10px;\">\n          <label>Options supplementaires<\/label>\n          <div class=\"vtc-extras-grid\">\n                          <label class=\"vtc-extra-item\">\n                <input type=\"checkbox\" class=\"vtc-extra-cb\" value=\"meet_greet\">\n                Meet &amp; Greet (+25EUR)              <\/label>\n                          <label class=\"vtc-extra-item\">\n                <input type=\"checkbox\" class=\"vtc-extra-cb\" value=\"baby_seat\">\n                Siege bebe (+15EUR)              <\/label>\n                          <label class=\"vtc-extra-item\">\n                <input type=\"checkbox\" class=\"vtc-extra-cb\" value=\"extra_water\">\n                Eau minerale (+5EUR)              <\/label>\n                      <\/div>\n        <\/div>\n\n        <!-- Prix en temps reel -->\n        <div class=\"vtc-live-price\">\n          <span class=\"vtc-live-price-label\">Estimation TTC<\/span>\n          <span class=\"vtc-live-price-value\" id=\"vtc-live-price\">-<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"vtc-book-nav\">\n        <button type=\"button\" class=\"vtc-btn-back vtc-prev\"> Retour<\/button>\n        <button type=\"button\" class=\"vtc-btn-fwd vtc-next\">Suivant -><\/button>\n      <\/div>\n    <\/div>\n\n    <!--  ETAPE 3 : Informations client  -->\n    <div class=\"vtc-book-step\" data-step=\"2\">\n      <div class=\"vtc-book-card\">\n        <h2>Vos coordonnees<\/h2>\n        <div class=\"vtc-book-grid\">\n          <div class=\"vtc-book-field\"><label for=\"vtc-fname\">Prenom *<\/label><input type=\"text\" id=\"vtc-fname\" name=\"firstname\" autocomplete=\"given-name\" required><\/div>\n          <div class=\"vtc-book-field\"><label for=\"vtc-lname\">Nom *<\/label><input type=\"text\" id=\"vtc-lname\" name=\"lastname\" autocomplete=\"family-name\" required><\/div>\n        <\/div>\n        <div class=\"vtc-book-grid\">\n          <div class=\"vtc-book-field\"><label for=\"vtc-email\">Email *<\/label><input type=\"email\" id=\"vtc-email\" name=\"email\" autocomplete=\"email\" required><\/div>\n          <div class=\"vtc-book-field\"><label for=\"vtc-phone\">Telephone *<\/label><input type=\"tel\" id=\"vtc-phone\" name=\"phone\" autocomplete=\"tel\" required><\/div>\n        <\/div>\n        <div class=\"vtc-book-grid\">\n          <div class=\"vtc-book-field\"><label for=\"vtc-flight\">N de vol \/ train<\/label><input type=\"text\" id=\"vtc-flight\" name=\"flight\" placeholder=\"AF123, TGV 8503...\"><\/div>\n        <\/div>\n        <div class=\"vtc-book-grid col-1\">\n          <div class=\"vtc-book-field\"><label for=\"vtc-notes\">Instructions particulieres<\/label><textarea id=\"vtc-notes\" name=\"notes\" placeholder=\"Siege enfant, acces PMR, remarques...\"><\/textarea><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"vtc-book-nav\">\n        <button type=\"button\" class=\"vtc-btn-back vtc-prev\"> Retour<\/button>\n        <button type=\"button\" class=\"vtc-btn-fwd vtc-next\">Proceder au paiement -><\/button>\n      <\/div>\n    <\/div>\n\n    <!--  ETAPE 4 : Paiement  -->\n    <div class=\"vtc-book-step\" data-step=\"3\">\n      <div class=\"vtc-recap\" id=\"vtc-recap-box\">\n        <h3 style=\"font-family:Georgia,serif;font-size:1.2rem;color:#fff;margin-bottom:16px;\">Recapitulatif<\/h3>\n                  <div class=\"vtc-recap-row\">\n            <span class=\"vtc-recap-label\">Trajet<\/span>\n            <span class=\"vtc-recap-value\" id=\"recap-trip\">-<\/span>\n          <\/div>\n                  <div class=\"vtc-recap-row\">\n            <span class=\"vtc-recap-label\">Date<\/span>\n            <span class=\"vtc-recap-value\" id=\"recap-datetime\">-<\/span>\n          <\/div>\n                  <div class=\"vtc-recap-row\">\n            <span class=\"vtc-recap-label\">Vehicule<\/span>\n            <span class=\"vtc-recap-value\" id=\"recap-vehicle\">-<\/span>\n          <\/div>\n                  <div class=\"vtc-recap-row\">\n            <span class=\"vtc-recap-label\">Passagers<\/span>\n            <span class=\"vtc-recap-value\" id=\"recap-pax\">-<\/span>\n          <\/div>\n                  <div class=\"vtc-recap-row\">\n            <span class=\"vtc-recap-label\">Nom<\/span>\n            <span class=\"vtc-recap-value\" id=\"recap-client\">-<\/span>\n          <\/div>\n                  <div class=\"vtc-recap-row\">\n            <span class=\"vtc-recap-label\">Contact<\/span>\n            <span class=\"vtc-recap-value\" id=\"recap-contact\">-<\/span>\n          <\/div>\n                <div class=\"vtc-recap-row vtc-recap-total\">\n          <span class=\"vtc-recap-label\">Total TTC<\/span>\n          <span class=\"vtc-recap-value\" id=\"recap-total\">-<\/span>\n        <\/div>\n      <\/div>\n\n      <div class=\"vtc-book-card\">\n        <h2>Paiement<\/h2>\n        <p style=\"font-size:0.83rem;color:#8a8a8a;margin-bottom:0;\">Paiement 100% securise - Stripe PCI-DSS<\/p>\n        <div id=\"vtc-stripe-el\">\n          <div class=\"vtc-stripe-loading\">\n            <div class=\"vtc-stripe-spinner\"><\/div>\n            <span>Chargement paiement securise...<\/span>\n          <\/div>\n        <\/div>\n      <\/div>\n\n      <div class=\"vtc-book-nav\">\n        <button type=\"button\" class=\"vtc-btn-back vtc-prev\"> Retour<\/button>\n        <button type=\"button\" class=\"vtc-btn-fwd\" id=\"vtc-pay-btn\">\n           Payer maintenant        <\/button>\n      <\/div>\n    <\/div>\n\n    <!--  ETAPE 5 : Confirmation  -->\n    <div class=\"vtc-book-step\" data-step=\"4\">\n      <div class=\"vtc-confirm-page\">\n        <div class=\"vtc-confirm-icon\" aria-hidden=\"true\">\n          <svg width=\"36\" height=\"36\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.5\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\n        <\/div>\n        <span class=\"vtc-eyebrow\">Reservation confirmee !<\/span>\n        <h2>Merci pour votre reservation !<\/h2>\n        <p style=\"color:#8a8a8a;font-size:1rem;line-height:1.8;margin:16px 0;\">Un email de confirmation a ete envoye. Notre equipe vous contactera sous peu.<\/p>\n        <div class=\"vtc-confirm-ref\">\n          <div style=\"font-size:0.68rem;font-weight:700;color:#c9a96e;letter-spacing:0.2em;text-transform:uppercase;margin-bottom:6px;\">Reference de reservation<\/div>\n          <div class=\"vtc-confirm-ref-num\" id=\"vtc-confirm-ref\">-<\/div>\n        <\/div>\n        <a href=\"https:\/\/clientslocaux.com\/\" class=\"vtc-btn-o\" style=\"margin-top:24px;\">Retour a l accueil<\/a>\n      <\/div>\n    <\/div>\n\n  <\/form>\n<\/div>\n\n<!-- Inline booking JS -->\n<script>\n(function(){\nconst VTC = window.VTC || {};\nconst form = document.getElementById('vtc-booking-form');\nif(!form) return;\n\nconst steps = form.querySelectorAll('.vtc-book-step');\nconst progs = document.querySelectorAll('.vtc-prog-step');\nlet cur = 0;\nlet bkData = {};\nlet stripe, stripeEls, payEl;\nlet distanceKm = 0;\n\nfunction showStep(n){\n  steps.forEach((s,i)=>s.classList.toggle('active',i===n));\n  progs.forEach((p,i)=>{p.classList.toggle('active',i===n);p.classList.toggle('done',i<n);});\n  cur=n;\n  window.scrollTo({top:form.closest('.vtc-book-wrap').offsetTop-80,behavior:'smooth'});\n}\n\n\/\/ Nav buttons\nform.querySelectorAll('.vtc-next').forEach(b=>b.addEventListener('click',async()=>{\n  if(!validate(cur)) return;\n  collect(cur);\n  if(cur===2){ fillRecap(); await initStripe(); }\n  if(cur<steps.length-1) showStep(cur+1);\n}));\nform.querySelectorAll('.vtc-prev').forEach(b=>b.addEventListener('click',()=>{ if(cur>0) showStep(cur-1); }));\n\n\/\/ Trip type\nform.querySelectorAll('.vtc-trip-btn').forEach(b=>b.addEventListener('click',()=>{\n  form.querySelectorAll('.vtc-trip-btn').forEach(x=>x.classList.remove('active'));\n  b.classList.add('active');\n  const v = b.dataset.val;\n  document.getElementById('vtc-return-row').style.display  = v==='round_trip'?'grid':'none';\n  document.getElementById('vtc-duration-row').style.display = v==='hourly'?'grid':'none';\n}));\n\n\/\/ Vehicle select\nform.querySelectorAll('.vtc-veh-opt').forEach(o=>{\n  o.addEventListener('click',()=>{\n    form.querySelectorAll('.vtc-veh-opt').forEach(x=>{x.classList.remove('selected');x.setAttribute('aria-checked','false');});\n    o.classList.add('selected'); o.setAttribute('aria-checked','true');\n    updateLivePrice();\n  });\n  o.addEventListener('keypress',e=>{ if(e.key==='Enter'||e.key===' ') o.click(); });\n});\n\n\/\/ Extras\nform.querySelectorAll('.vtc-extra-cb').forEach(c=>c.addEventListener('change',updateLivePrice));\n\nfunction updateLivePrice(){\n  const sel = form.querySelector('.vtc-veh-opt.selected');\n  if(!sel){ document.getElementById('vtc-live-price').textContent='-'; return; }\n  const base = parseFloat(sel.dataset.base||80);\n  const extras = {meet_greet:25,baby_seat:15,extra_water:5};\n  let extraTotal=0;\n  form.querySelectorAll('.vtc-extra-cb:checked').forEach(c=>extraTotal+=(extras[c.value]||0));\n  const tripType = form.querySelector('.vtc-trip-btn.active')?.dataset.val||'one_way';\n  let price = base + extraTotal;\n  if(tripType==='round_trip') price *= 1.85;\n  const tva = parseFloat(form.dataset.tva||20)\/100;\n  bkData.amount_ht  = parseFloat(price.toFixed(2));\n  bkData.amount_tva = parseFloat((price*tva).toFixed(2));\n  bkData.amount_ttc = parseFloat((price*(1+tva)).toFixed(2));\n  const el = document.getElementById('vtc-live-price');\n  if(el) el.textContent = bkData.amount_ttc.toLocaleString('fr-FR',{minimumFractionDigits:2}) + ' EUR';\n}\n\n\/\/ Validate\nfunction validate(n){\n  clearErrors();\n  if(n===0){\n    let ok=true;\n    const from=document.getElementById('vtc-book-from');\n    const to  =document.getElementById('vtc-book-to');\n    const date=document.getElementById('vtc-book-date');\n    const time=document.getElementById('vtc-book-time');\n    if(!from?.value.trim()){showErr(from,'Champ requis.');ok=false;}\n    if(!to?.value.trim())  {showErr(to,  'Champ requis.');ok=false;}\n    if(!date?.value)       {showErr(date,'Champ requis.');ok=false;}\n    if(!time?.value)       {showErr(time,'Champ requis.');ok=false;}\n    return ok;\n  }\n  if(n===1){\n    if(!form.querySelector('.vtc-veh-opt.selected')){window.vtcToast('Veuillez selectionner un vehicule.','error');return false;}\n    return true;\n  }\n  if(n===2){\n    let ok=true;\n    [{id:'vtc-fname',msg:'Champ requis.'},{id:'vtc-lname',msg:'Champ requis.'},{id:'vtc-email',msg:'Champ requis.'},{id:'vtc-phone',msg:'Champ requis.'}].forEach(f=>{\n      const el=document.getElementById(f.id);\n      if(!el?.value.trim()){showErr(el,f.msg);ok=false;}\n    });\n    const em=document.getElementById('vtc-email');\n    if(em?.value&&!\/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/.test(em.value)){showErr(em,'Email invalide.');ok=false;}\n    return ok;\n  }\n  return true;\n}\n\nfunction showErr(el,msg){\n  if(!el) return;\n  el.classList.add('vtc-field-err-border');\n  const e=document.createElement('span');e.className='vtc-field-err';e.textContent=msg;\n  el.closest('.vtc-book-field')?.appendChild(e);\n}\nfunction clearErrors(){\n  form.querySelectorAll('.vtc-field-err').forEach(e=>e.remove());\n  form.querySelectorAll('.vtc-field-err-border').forEach(e=>e.classList.remove('vtc-field-err-border'));\n}\n\n\/\/ Collect\nfunction collect(n){\n  if(n===0){\n    bkData.trip_type = form.querySelector('.vtc-trip-btn.active')?.dataset.val||'one_way';\n    bkData.from   = document.getElementById('vtc-book-from')?.value||'';\n    bkData.to     = document.getElementById('vtc-book-to')?.value||'';\n    bkData.date   = document.getElementById('vtc-book-date')?.value||'';\n    bkData.time   = document.getElementById('vtc-book-time')?.value||'';\n    bkData.return_date = document.getElementById('vtc-book-rdate')?.value||'';\n    bkData.duration_h  = document.getElementById('vtc-book-duration')?.value||'1';\n  }\n  if(n===1){\n    const sel = form.querySelector('.vtc-veh-opt.selected');\n    if(sel){ bkData.vehicle_id=sel.dataset.id; bkData.vehicle_name=sel.dataset.name; }\n    bkData.pax     = document.getElementById('vtc-pax')?.value||'1';\n    bkData.luggage = document.getElementById('vtc-luggage')?.value||'0';\n    bkData.extras  = Array.from(form.querySelectorAll('.vtc-extra-cb:checked')).map(c=>c.value);\n    updateLivePrice();\n  }\n  if(n===2){\n    bkData.firstname = document.getElementById('vtc-fname')?.value||'';\n    bkData.lastname  = document.getElementById('vtc-lname')?.value||'';\n    bkData.email     = document.getElementById('vtc-email')?.value||'';\n    bkData.phone     = document.getElementById('vtc-phone')?.value||'';\n    bkData.flight    = document.getElementById('vtc-flight')?.value||'';\n    bkData.notes     = document.getElementById('vtc-notes')?.value||'';\n    bkData.lang      = 'fr';\n  }\n}\n\n\/\/ Recap\nfunction fillRecap(){\n  const set=(id,v)=>{ const e=document.getElementById(id); if(e) e.textContent=v||'-'; };\n  const trips={one_way:'Aller simple',round_trip:'Aller-retour',hourly:'Mise a disposition'};\n  set('recap-trip',  (trips[bkData.trip_type]||'')+' : '+bkData.from+' -> '+bkData.to);\n  set('recap-datetime', bkData.date+' a '+bkData.time);\n  set('recap-vehicle',  bkData.vehicle_name);\n  set('recap-pax',      bkData.pax+' pax, '+bkData.luggage+' bag.');\n  set('recap-client',   bkData.firstname+' '+bkData.lastname);\n  set('recap-contact',  bkData.email+' - '+bkData.phone);\n  set('recap-total',    (bkData.amount_ttc||0).toLocaleString('fr-FR',{minimumFractionDigits:2})+' EUR');\n}\n\n\/\/ Stripe init\nasync function initStripe(){\n  const sKey = VTC.stripe||'';\n  if(!sKey||typeof Stripe==='undefined'){ document.getElementById('vtc-stripe-el').innerHTML='<p style=\"color:#e05555;padding:20px\">Stripe non configure.<\/p>'; return; }\n  stripe = Stripe(sKey);\n  const el = document.getElementById('vtc-stripe-el');\n  el.innerHTML='<div class=\"vtc-stripe-loading\"><div class=\"vtc-stripe-spinner\"><\/div><span>Connexion securisee...<\/span><\/div>';\n\n  const res = await ajaxPost('vtc_create_intent',{ amount_cents: Math.round((bkData.amount_ttc||0)*100), email: bkData.email });\n  if(!res.success){ el.innerHTML='<p style=\"color:#e05555;padding:20px\">'+(res.data?.message||'Erreur Stripe')+'<\/p>'; return; }\n  bkData.intent_id = res.data.intentId;\n\n  stripeEls = stripe.elements({ clientSecret: res.data.clientSecret, appearance: stripeTheme() });\n  payEl = stripeEls.create('payment');\n  el.innerHTML='';\n  payEl.mount(el);\n}\n\nfunction stripeTheme(){\n  return { theme:'night', variables:{ colorPrimary:'#c9a96e', colorBackground:'#161616', colorText:'#f5f4f1', fontFamily:'\"Jost\",\"Helvetica Neue\",Arial,sans-serif', borderRadius:'6px' }, rules:{ '.Input':{ border:'1.5px solid rgba(255,255,255,0.1)', padding:'12px 16px' }, '.Input:focus':{ border:'1.5px solid #c9a96e', boxShadow:'none' }, '.Label':{ fontSize:'0.7rem', letterSpacing:'0.14em', textTransform:'uppercase', color:'#c9a96e' }, '.Tab':{ border:'1.5px solid rgba(255,255,255,0.08)', backgroundColor:'#111' }, '.Tab--selected':{ borderColor:'#c9a96e', backgroundColor:'rgba(201,169,110,0.06)' } } };\n}\n\n\/\/ Pay\nconst payBtn = document.getElementById('vtc-pay-btn');\nif(payBtn) payBtn.addEventListener('click', async()=>{\n  if(!stripe||!stripeEls) return;\n  payBtn.disabled=true; payBtn.textContent='Traitement en cours...';\n  const {error} = await stripe.confirmPayment({ elements:stripeEls, confirmParams:{ payment_method_data:{ billing_details:{ name:bkData.firstname+' '+bkData.lastname, email:bkData.email, phone:bkData.phone } } }, redirect:'if_required' });\n  if(error){ window.vtcToast?.(error.message||'Une erreur est survenue. Veuillez reessayer.','error'); payBtn.disabled=false; payBtn.textContent=' Payer maintenant'; return; }\n  await saveBooking();\n});\n\nasync function saveBooking(){\n  const payload = { ...bkData, 'extras[]': bkData.extras };\n  const res = await ajaxPost('vtc_save_booking', payload);\n  if(res.success){\n    const el = document.getElementById('vtc-confirm-ref');\n    if(el) el.textContent = res.data.ref;\n    showStep(steps.length-1);\n  } else {\n    window.vtcToast?.(res.data?.message||'Une erreur est survenue. Veuillez reessayer.','error');\n    const pb=document.getElementById('vtc-pay-btn');\n    if(pb){pb.disabled=false;pb.textContent=' Payer maintenant';}\n  }\n}\n\nfunction ajaxPost(action, data){\n  const body = new URLSearchParams({action, nonce: VTC.nonce, ...data});\n  return fetch(VTC.ajax, {method:'POST', headers:{'Content-Type':'application\/x-www-form-urlencoded'}, body}).then(r=>r.json()).catch(()=>({success:false,data:{message:'Erreur reseau.'}}));\n}\n\nshowStep(0);\n})();\n<\/script>\n\n<\/div><!-- \/vtc-site -->\n\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-22","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/pages\/22","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/comments?post=22"}],"version-history":[{"count":0,"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/pages\/22\/revisions"}],"wp:attachment":[{"href":"https:\/\/clientslocaux.com\/index.php\/wp-json\/wp\/v2\/media?parent=22"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}