{"id":3869,"date":"2025-04-30T14:02:16","date_gmt":"2025-04-30T18:02:16","guid":{"rendered":"https:\/\/pompagetpg.com\/?page_id=3869"},"modified":"2025-06-12T14:34:27","modified_gmt":"2025-06-12T18:34:27","slug":"pump-reservation","status":"publish","type":"page","link":"https:\/\/pompagetpg.com\/en\/pump-reservation\/","title":{"rendered":"Pump Reservation"},"content":{"rendered":"<div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-1 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1393.6px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-0 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-text fusion-text-1\"> <style>\r\n    \/* Conteneur global *\/\r\n    .form-reservation-wrapper {\r\n      max-width: 800px;\r\n      margin: 2rem auto;\r\n      padding: 0;\r\n      background: #f9f9f9;\r\n      border-radius: 10px;\r\n      box-shadow: 0 0 20px rgba(0,0,0,0.1);\r\n      font-family: sans-serif;\r\n    }\r\n    \/* \u00c9tapes du formulaire (maintenant cibl\u00e9es par le wrapper) *\/\r\n    .form-reservation-wrapper .form-step {\r\n      display: none;\r\n      animation: fadeIn 0.4s ease-in-out;\r\n    }\r\n    .form-reservation-wrapper .form-step.active {\r\n      display: block;\r\n    }\r\n    @keyframes fadeIn { from {opacity:0;} to {opacity:1;} }\r\n    \/* Champs et boutons *\/\r\n    input, textarea, select {\r\n      width:100%;\r\n      padding:10px;\r\n      margin:10px 0;\r\n      border:1px solid #ccc;\r\n      border-radius:5px;\r\n      font-size:16px;\r\n      min-height:48px;\r\n    }\r\n    input[type=\"file\"] { padding:12px; border:1px dashed #ccc; cursor:pointer; }\r\n    .step-indicator { display:flex; gap:5px; margin-bottom:20px; }\r\n    .step-indicator div { flex:1; height:5px; background:#ddd; border-radius:3px; }\r\n    .step-indicator .active { background:#0073aa; }\r\n    button { padding:10px 20px; border:none; border-radius:5px; cursor:pointer; }\r\n    button:hover { background:#005f87; }\r\n    button.next-step, button.prev-step { background:#0073aa; color:#fff; margin-right:10px; }\r\n    .radio-group { display:flex; gap:20px; margin:10px 0; align-items:center; }\r\n    .error-message { display:block; color:red; font-size:0.9rem; margin-bottom:4px; }\r\n    #photos-fils-wrapper, #qty-sac-wrapper{ display:none; margin-top:15px; }\r\n    input::placeholder, textarea::placeholder { color:#999; opacity:1; }\r\n\t\t.radio-group {\r\n  display: flex;\r\n  gap: 20px;\r\n  margin: 10px 0;\r\n  align-items: center;\r\n}\r\n\r\n.radio-group label {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 5px;\r\n  font-weight: 500;\r\n  font-size: 16px;\r\n}\r\n\r\nul.zero-padding {\r\n  list-style: none;       \/* on vire compl\u00e8tement la puce par d\u00e9faut *\/\r\n  padding: 0;\r\n  margin: 0;\r\n}\r\n\r\nul.zero-padding li {\r\n  position: relative;\r\n  padding-left: 1.6em;    \/* espace pour la puce custom *\/\r\n  margin-bottom: 0.8em;   \/* espacement entre les lignes *\/\r\n  line-height: 1.5;       \/* confort de lecture *\/\r\n  color: #fff;            \/* texte plus doux que du noir pur *\/\r\n  font-weight:400;\r\n}\r\n\r\n\/* Variante 1 : puce ic\u00f4ne Font Awesome (\u2713) *\/\r\nul.zero-padding li::before {\r\n  content: \"\\f058\";                     \/* code de la coche FA5 *\/\r\n  font-family: \"Font Awesome 5 Free\";   \/* veille \u00e0 ce que FA soit charg\u00e9 *\/\r\n  font-weight: 900;\r\n  position: absolute;\r\n  left: 0;\r\n  top: 0.1em;\r\n  font-size: 1.1em;\r\n  color: #28a745;                       \/* vert qui claque *\/\r\n}\r\n\r\n\/* Variante 2 : pastille color\u00e9e ronde *\/\r\n\/\/ul.zero-padding li::before {\r\n\/\/  content: \"\";\r\n\/\/  position: absolute;\r\n\/\/  left: 0;\r\n\/\/  top: 0.6em;\r\n\/\/  width: 0.5em;\r\n\/\/  height: 0.5em;\r\n\/\/  background: #007bff;                  \/* bleu soutenu *\/\r\n\/\/  border-radius: 50%;\r\n\/\/}\r\n\r\n\/* Variante 3 : barre lat\u00e9rale *\/\r\n\/\/ul.zero-padding li {\r\n\/\/  border-left: 4px solid #ffc107;      \/* jaune ambr\u00e9 *\/\r\n\/\/  padding-left: 0.8em;\r\n\/\/}\r\n\r\n\/* 1) Style par d\u00e9faut de vos champs requis *\/\r\ninput[required],\r\ntextarea[required],\r\nselect[required] {\r\n  border: 1px solid #ccc;       \/* la bordure normale *\/\r\n  background-color: #fff;       \/* arri\u00e8re-plan normal *\/\r\n  transition: border .2s ease;  \/* effet smooth *\/\r\n}\r\n\r\n\/* 2) Lorsque le champ requis est encore vide \u2192 bordure rouge *\/\r\ninput[required]:placeholder-shown,\r\ntextarea[required]:placeholder-shown {\r\n  border: 2px solid red !important;\r\n  background-color: #fee !important;\r\n}\r\n\r\n\/* 3) Pour les <select> (qui n\u2019ont pas de placeholder), on passe par :invalid *\/\r\nselect[required]:invalid {\r\n  border: 2px solid red !important;\r\n  background-color: #fee !important;\r\n}\r\n\r\n\/* 4) Une fois qu\u2019un <select> a une vraie valeur, on revient au normal *\/\r\nselect[required]:valid {\r\n  border: 1px solid #ccc;\r\n  background-color: #fff;\r\n}\r\n\r\n\r\n.required{\r\n    color:#ff0000;\r\n}\r\n\r\n.tooltip-title {\r\n  display: block;        \/* chaque titre prend toute la largeur *\/\r\n  text-align: center;    \/* texte centr\u00e9 *\/\r\n  width: 100%;           \/* optionnel, mais rassure-toi qu\u2019il prenne bien 100% *\/\r\n  margin-bottom: 0.8em;  \/* un petit \u00e9cart sous le titre *\/\r\n  font-weight:600;\r\n}\r\n\r\n\t\t\r\n\/* Tablette (<= 1024px) *\/\r\n@media (max-width: 1024px) {\r\n  .form-reservation-wrapper {\r\n    grid-template-columns: 1fr;\r\n    gap: 1.5rem;\r\n    padding: 0;\r\n  }\r\n  .form-reservation-wrapper input,\r\n  .form-reservation-wrapper textarea,\r\n  .form-reservation-wrapper select {\r\n    font-size: 14px;\r\n    padding: 8px;\r\n  }\r\n  button {\r\n    padding: 8px 16px;\r\n    font-size: 14px;\r\n  }\r\n}\r\n\r\n\/* Mobile (<= 600px) *\/\r\n@media (max-width: 600px) {\r\n  .form-reservation-wrapper {\r\n    padding: 0;\r\n  }\r\n  \/* \u00c9tapes empil\u00e9es, indicateur plus petit *\/\r\n  .step-indicator div {\r\n    height: 4px;\r\n  }\r\n  \/* Champs plein largeur *\/\r\n  .form-reservation-wrapper input,\r\n  .form-reservation-wrapper textarea,\r\n  .form-reservation-wrapper select {\r\n    font-size: 13px;\r\n    padding: 6px;\r\n  }\r\n  button {\r\n    width: 100%;\r\n    box-sizing: border-box;\r\n    margin-bottom: 0.5rem;\r\n  }\r\n}\t\t\r\n    <\/style>\r\n    \r\n\r\n    <div class=\"form-reservation form-reservation-wrapper\">\r\n<form class=\"form-reservation\" action=\"\/en\/wp-json\/wp\/v2\/pages\/3869\" method=\"post\" enctype=\"multipart\/form-data\" novalidate>\r\n\r\n        <input type=\"hidden\" id=\"form_reservation_nonce\" name=\"form_reservation_nonce\" value=\"3ad4a2b09b\" \/><input type=\"hidden\" name=\"_wp_http_referer\" value=\"\/en\/wp-json\/wp\/v2\/pages\/3869\" \/>        <input type=\"hidden\" name=\"form_reservation_submit\" value=\"1\">\r\n        \r\n        \r\n        \r\n\r\n\r\n<!-- \r\n*********************************\r\n\r\nFORMULAIRE : QUESTIONS\r\n\r\n*********************************\r\n-->\r\n\r\n\r\n<div class=\"form-step active\">\r\n          \r\n<h3>Form<\/h3>\r\n   \r\n<!-- 1.Nom de la compagnie \u00e0 facturer -->          \r\n    <input type=\"text\" name=\"facture_a\" placeholder=\"*Name of the company to be billed\" required>\r\n \r\n<!-- 2. Date des travaux -->         \r\n    <label for=\"date_coulee\"><span class=\"required\">*<\/span>Date of the pour<\/label>\r\n\t<input id=\"date_coulee\" type=\"date\" name=\"date_coulee\" required>\r\n          \r\n<!-- 3. Adresse des travaux -->    \r\n    <input  id=\"adresse_livraison\"  name=\"adresse_livraison\"  type=\"text\" placeholder=\"*Work address\" required>      \r\n\r\n<!-- 4. Heure d\u2019arriv\u00e9e du b\u00e9ton au chantier -->\r\n\t<label for=\"heure_beton\"><span class=\"required\">*<\/span>Time of pouring (concrete at the construction site)<\/label>\r\n\t<input id=\"heure_beton\" type=\"time\" name=\"heure_beton\" required>\r\n\r\n<!-- 5. Type de pompe -->\r\n    <select id=\"type_pompe\" name=\"type_pompe\" id=\"type_pompe\" required>\r\n    <option value=\"\">*Select pump type<\/option>\r\n    <option>I don\u2019t know\u202f\u2013 need an expert<\/option>\r\n    <option>Line pump 2.5\u2033\u202f\u2013\u202f3\u2033<\/option>\r\n    <option>High\u2011pressure Line pump 4\u2033<\/option>\r\n    <option>Boom pump 31z<\/option>\r\n    <option>Boom pump 32m<\/option>\r\n    <option>Boom pump 32zz<\/option>\r\n    <option>Boom pump 38Z<\/option>\r\n    <option>Boom pump 42RZ<\/option>\r\n    <option>Boom pump 47RZ<\/option>\r\n    <option>Boom Pump 51\u202fm full reach<\/option>\r\n    <option>Boom Pump 51\u202fm with tremie jib<\/option>\r\n    <option>Boom Pump 56\u202fm<\/option>\r\n    <option>Boom pump 61\u202fm<\/option>\r\n    <option>Boom pump 63\u202fm<\/option>\r\n\t<\/select>\r\n\r\n\r\n<!-- 6. Nombre de pieds de ligne -->\r\n\t<select name=\"pieds_ligne\" id=\"pieds_ligne\" required>\r\n\t\t\t  <option value=\"\">Line feet<\/option>\r\n\t\t\t  <option>No footer required<\/option>\r\n\t\t\t  <option>25\u2019<\/option><option>50\u2019<\/option><option>75\u2019<\/option><option>100\u2019<\/option><option>125\u2019<\/option><option>150\u2019<\/option><option>175\u2019<\/option><option>200\u2019<\/option><option>225\u2019<\/option><option>250\u2019<\/option><option>275\u2019<\/option><option>300\u2019<\/option><option>325\u2019<\/option><option>350\u2019<\/option>\t\t\t  <option>350\u2019 and more<\/option>\r\n\t<\/select>\r\n\r\n<!-- 7. Type de travaux \u00e0 effectuer -->\r\n  <select name=\"nature_coulee\" required>\r\n    <option value=\"\">*Type of pour<\/option>\r\n    <option value=\"Autre\">Other<\/option>\r\n    <option value=\"Assise\">Bed<\/option>\r\n    <option value=\"Auto Nivelant\">Self\u2011leveling<\/option>\r\n    <option value=\"Balcon\">Balcony<\/option>\r\n    <option value=\"Base\">Base<\/option>\r\n    <option value=\"Beton Maigre\">Lean concrete<\/option>\r\n    <option value=\"Bollard\">Bollard<\/option>\r\n    <option value=\"Bordure\">Curb<\/option>\r\n    <option value=\"Cannivau\">Trench<\/option>\r\n    <option value=\"Chevetre\">Header<\/option>\r\n    <option value=\"Colonne\">Column<\/option>\r\n    <option value=\"Corbeau\">Cantilever<\/option>\r\n    <option value=\"Dalle\">Slab<\/option>\r\n    <option value=\"Diaphragm\">Diaphragm wall<\/option>\r\n    <option value=\"Escalier\">Stair<\/option>\r\n    <option value=\"Footing\">Footing<\/option>\r\n    <option value=\"Frost Pit\">Frost pit<\/option>\r\n    <option value=\"Injection\">Injection<\/option>\r\n    <option value=\"Jersey\">Jersey barrier<\/option>\r\n    <option value=\"Massif\">Massif<\/option>\r\n    <option value=\"Mezzanine\">Mezzanine<\/option>\r\n    <option value=\"Mur\">Wall<\/option>\r\n    <option value=\"Mur accot\u00e9\">Retaining wall<\/option>\r\n    <option value=\"Mur Mitoyen\">Party wall<\/option>\r\n    <option value=\"Muret\">Low wall<\/option>\r\n    <option value=\"Patch\">Patch repair<\/option>\r\n    <option value=\"Perron\">Stoops<\/option>\r\n    <option value=\"Pieux\">Piles<\/option>\r\n    <option value=\"Pilasse\">Pile cap<\/option>\r\n    <option value=\"Pile\">Pile<\/option>\r\n    <option value=\"Piscine\">Pool<\/option>\r\n    <option value=\"Poutre\">Beam<\/option>\r\n    <option value=\"Projet\u00e9\">Shotcrete<\/option>\r\n    <option value=\"Radier\">Mat slab<\/option>\r\n    <option value=\"Rampe\">Ramp<\/option>\r\n    <option value=\"Remblais\">Backfill<\/option>\r\n    <option value=\"Semelle\">Strip footing<\/option>\r\n    <option value=\"Solage\">Foundation<\/option>\r\n    <option value=\"Sonotube\">Sonotube<\/option>\r\n    <option value=\"Sous-Ouevre\">Underpinning<\/option>\r\n    <option value=\"Sous-Sol\">Basement<\/option>\r\n    <option value=\"Test MTQ\">MTQ test<\/option>\r\n    <option value=\"Topping\">Topping<\/option>\r\n    <option value=\"Tranch\u00e9\">Trench<\/option>\r\n    <option value=\"Trottoire\">Sidewalk<\/option>\r\n  <\/select>\r\n  \r\n<!-- 8. Compagnie de b\u00e9ton -->\r\n    <input type=\"text\"   name=\"fournisseur_beton\" placeholder=\"Concret supplier\" required>\r\n\r\n<!-- 9. Quantit\u00e9 de b\u00e9ton -->\r\n    <input type=\"number\" step=\"0.1\" name=\"quantite_beton\" placeholder=\"*Quantity m\u00b3\" required>\r\n\r\n    \r\n    <!-- 10. Formule de b\u00e9ton (MPa \/mm) -->\r\n    <input type=\"text\"   name=\"formule_beton\" placeholder=\"Concrete mix design (MPa\/mm)\" required>\r\n\r\n<!-- 11. #PO ou # Projet -->\r\n    <input type=\"text\"   name=\"numero_projet\" placeholder=\"#PO or # Project\" >\r\n\r\n<!-- 12. Photo du projet --> \r\n<label>Project photo :<\/label><input type=\"file\" name=\"photos_travaux[]\" multiple>\r\n\r\n<!-- 13. Nom du responsable -->\r\n    <input type=\"text\"  id=\"votre_nom\"  name=\"votre_nom\"\r\n         placeholder=\"*Name of manager\" required>    \r\n          \r\n<!-- 14. T\u00e9l\u00e9phone -->      \r\n    <input type=\"tel\" name=\"telephone\" placeholder=\"*Phone number\" required>  \r\n      \r\n<!-- 15. Courriel : (pour fin de l\u2019envoi de la confirmation) -->      \r\n    <input type=\"email\" name=\"courriel\" placeholder=\"*Manager email\" required>\r\n    \r\n<!-- 16. Choix du repr\u00e9sentant -->   \r\n\t\t\t  <select name=\"vendeur\">\r\n\t\t\t      <option value=\"\">Select your representative (if applicable)<\/option>\r\n\t\t\t  <option value=\"no_rep\">I do not have a designated representative.<\/option>\r\n\t\t\t  <option value=\"Stephane\">Stephane Lemieux \u2013 Rive-Sud (Vall\u00e9e Chateauguay)<\/option>\r\n\t\t\t  <option value=\"Mario\">Mario Pitre \u2013 Saint-Clet\/Montr\u00e9al<\/option>\r\n\t\t\t  <option value=\"Yannick\">Yannick Saint-Loup \u2013 Rive-Sud (Ste-Julie)<\/option>\r\n\t\t\t  <option value=\"David\">David Mirabella (Laval\/Rive-Nord)<\/option>\r\n\t\t\t  <\/select>  \r\n\t\t\t  \r\n<!-- Honeypot anti-bots (champ cach\u00e9) -->\r\n    <input type=\"text\" name=\"hp_email\" value=\"\" style=\"display:none!important\" autocomplete=\"off\">\r\n\r\n          <button type=\"submit\">Send reservation<\/button>\r\n        <\/div>\t\r\n        \r\n        \r\n<script>\r\n\r\n  document.addEventListener('DOMContentLoaded', function() {\r\n  \/\/ 1) On cible nos \u00e9l\u00e9ments par leur id\r\n  const pompeSelect      = document.getElementById('type_pompe');\r\n  const mainOeuvreSelect = document.getElementById('main_oeuvre');\r\n\r\n  if (!pompeSelect || !mainOeuvreSelect) {\r\n    console.warn('\u25b6 #type_pompe ou #main_oeuvre introuvable dans le DOM.');\r\n    return;\r\n  }\r\n\r\n  function majValidation() {\r\n    const rawPompe = pompeSelect.value || '';\r\n    const pompeNorm = normaliser\r\n      ? normaliser(rawPompe)\r\n      : rawPompe; \/\/ si tu n\u2019as pas de normaliser(), on part du principe que la cha\u00eene brute suffit\r\n\r\n    \/\/ \u2026 ton code existant pour tuyauSelect, piedsLigneSelect, dimLigneSelect \u2026\r\n\r\n    \/\/ 4) Notre ajout : si \u201chaute pression 4\u201d est s\u00e9lectionn\u00e9\r\n    if (pompeNorm.includes('haute pression 4')) {\r\n      mainOeuvreSelect.setAttribute('required', 'required');\r\n    } else {\r\n      mainOeuvreSelect.removeAttribute('required');\r\n      \/\/ si tu veux vider la s\u00e9lection quand ce n\u2019est plus obligatoire :\r\n      \/\/ mainOeuvreSelect.value = '';\r\n    }\r\n  }\r\n\r\n  \/\/ 2) Initialisation au chargement de la page\r\n  majValidation();\r\n\r\n  \/\/ 3) On relance \u00e0 chaque changement de pompe\r\n  pompeSelect.addEventListener('change', majValidation);\r\n});\r\n\r\n\/\/ Pied de ligne 150+ = main d'oeuvre obligatoire\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  const piedsLigne    = document.getElementById('pieds_ligne');\r\n  const mainOeuvreSel = document.getElementById('main_oeuvre');\r\n\r\n  if (!piedsLigne || !mainOeuvreSel) {\r\n    console.warn('\u25b6 S\u00e9lecteurs #pieds_ligne ou #main_oeuvre manquants.');\r\n    return;\r\n  }\r\n\r\n  function majMainOeuvre() {\r\n    const raw = piedsLigne.value;\r\n    \/\/ On attrape le premier nombre dans la cha\u00eene (25, 50, 150, 350\u2026)\r\n    const match = raw.match(\/(\\d+)\/);\r\n    const pieds = match ? parseInt(match[1], 10) : 0;\r\n\r\n    if (pieds >= 150) {\r\n      mainOeuvreSel.setAttribute('required', 'required');\r\n    } else {\r\n      mainOeuvreSel.removeAttribute('required');\r\n      \/\/ Si tu veux r\u00e9initialiser la s\u00e9lection quand ce n'est plus requis :\r\n      \/\/ mainOeuvreSel.value = '';\r\n    }\r\n  }\r\n\r\n  \/\/ Initialisation\r\n  majMainOeuvre();\r\n  \/\/ Mise \u00e0 jour \u00e0 chaque changement\r\n  piedsLigne.addEventListener('change', majMainOeuvre);\r\n});\r\n<\/script>        \r\n        \r\n\t\t  \t  \r\n      <\/form>\r\n\r\n\r\n    <\/div>\r\n   \n<\/div><\/div><\/div><\/div><\/div>\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-3869","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/pages\/3869","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/comments?post=3869"}],"version-history":[{"count":4,"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/pages\/3869\/revisions"}],"predecessor-version":[{"id":3879,"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/pages\/3869\/revisions\/3879"}],"wp:attachment":[{"href":"https:\/\/pompagetpg.com\/en\/wp-json\/wp\/v2\/media?parent=3869"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}