{"id":12034,"date":"2026-04-10T12:57:50","date_gmt":"2026-04-10T10:57:50","guid":{"rendered":"https:\/\/dev-portalise.pantheonsite.io\/?page_id=12034"},"modified":"2026-08-13T15:21:08","modified_gmt":"2026-08-13T13:21:08","slug":"demande-de-cotations","status":"publish","type":"page","link":"https:\/\/portalisholding.com\/en\/demande-de-cotations\/","title":{"rendered":"Demande de cotations"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"12034\" class=\"elementor elementor-12034\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b7b3d75 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"b7b3d75\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-143cf80 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"143cf80\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-8acbf87 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"8acbf87\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-837d439 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-child\" data-id=\"837d439\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-be437ad e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"be437ad\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-077456c elementor-widget elementor-widget-logico_page_title_line\" data-id=\"077456c\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_page_title_line.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"page-title logico-title-h2\">Demande de cotations<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dabf644 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_breadcrumbs\" data-id=\"dabf644\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"logico_breadcrumbs.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<nav class=\"breadcrumbs\"><a href=\"https:\/\/portalisholding.com\/en\/\">Home<\/a><span class=\"delimiter\">\/<\/span><\/nav>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-37cd0e3 elementor-widget__width-auto elementor-absolute elementor-widget elementor-widget-logico_decorative_block\" data-id=\"37cd0e3\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"logico_decorative_block.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t            <div class=\"block-decoration animation-enable block-decoration-style-1\">\n                <div class=\"block-decoration-item\">\n                                    <\/div>\n            <\/div>\n        \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-949500a e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"949500a\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-506c43a elementor-widget elementor-widget-html\" data-id=\"506c43a\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\n.devis-hero {\n  background: #0d3d35;\n  padding: 60px 40px;\n  text-align: center;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n}\n.devis-icon {\n  width: 56px;\n  height: 56px;\n  fill: #f5a623;\n  margin-bottom: 24px;\n}\n.devis-hero p.devis-title {\n  font-family: Georgia, serif;\n  font-size: 36px;\n  font-weight: 700;\n  color: #fff;\n  margin: 0 0 12px;\n  line-height: 1.3;\n}\n.devis-hero p.devis-sub {\n  font-size: 15px;\n  color: #a8c8c0;\n  margin: 0;\n}\n@media (max-width: 600px) {\n  .devis-hero { padding: 40px 20px; }\n  .devis-hero p.devis-title { font-size: 26px; }\n}\n<\/style>\n\n<div class=\"devis-hero\">\n  <svg class=\"devis-icon\" viewBox=\"0 0 24 24\">\n    <path d=\"M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6zm-1 1.5L18.5 9H13V3.5zM8 13h8v1.5H8V13zm0 3h8v1.5H8V16zm0-6h3v1.5H8V10z\"\/>\n  <\/svg>\n  <p class=\"devis-title\">Demande de Devis \u2014 Services PortaLis<\/p>\n  <p class=\"devis-sub\">Offre personnalis\u00e9e sous 48h ouvr\u00e9es<\/p>\n<\/div>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-3e6b997 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"3e6b997\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0acd70d elementor-widget elementor-widget-html\" data-id=\"0acd70d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"fr\">\r\n<head>\r\n  <meta charset=\"UTF-8\">\r\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n  <style>\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       VARIABLES & RESET\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    :root {\r\n      --teal:        #004C4C;\r\n      --teal-light:  #0d7a6e;\r\n      --gold:        #E8A020;\r\n      --gold-light:  #FDF3E0;\r\n      --ivory:       #FDFCF0;\r\n      --bg:          #f0f4f7;\r\n      --white:       #ffffff;\r\n      --gray-text:   #6b6b6b;\r\n      --dark-text:   #0d3c4f;\r\n      --border:      #e0e0e0;\r\n      --error:       #e74c3c;\r\n      --success:     #2ecc71;\r\n      --transition:  all 0.35s cubic-bezier(0.4,0,0.2,1);\r\n      --radius:      14px;\r\n      --shadow:      0 20px 50px rgba(0,0,0,0.08);\r\n    }\r\n\r\n    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n    html {\r\n      -webkit-text-size-adjust: 100%;\r\n      -moz-text-size-adjust: 100%;\r\n      text-size-adjust: 100%;\r\n    }\r\n\r\n    body {\r\n      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n      background: var(--bg);\r\n      color: var(--dark-text);\r\n      min-height: 100vh;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       PAGE HEADER\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .page-header {\r\n      background: var(--teal);\r\n      padding: 22px 40px;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      flex-wrap: wrap;\r\n      gap: 12px;\r\n      position: sticky;\r\n      top: 0;\r\n      z-index: 100;\r\n      box-shadow: 0 4px 20px rgba(0,0,0,0.15);\r\n    }\r\n\r\n    .header-brand {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 14px;\r\n    }\r\n\r\n    .header-brand .logo-text {\r\n      font-size: 20px;\r\n      font-weight: 800;\r\n      color: var(--white);\r\n      letter-spacing: 1px;\r\n    }\r\n\r\n    .header-brand .logo-text span {\r\n      color: var(--gold);\r\n    }\r\n\r\n    .header-tagline {\r\n      font-size: 12px;\r\n      color: rgba(255,255,255,0.65);\r\n      margin-top: 2px;\r\n    }\r\n\r\n    .header-meta {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 20px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .header-meta a {\r\n      color: rgba(255,255,255,0.85);\r\n      text-decoration: none;\r\n      font-size: 13px;\r\n      font-weight: 600;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .header-meta a:hover { color: var(--gold); }\r\n\r\n    .header-badges {\r\n      display: flex;\r\n      gap: 10px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .badge {\r\n      background: rgba(255,255,255,0.12);\r\n      border: 1px solid rgba(255,255,255,0.2);\r\n      color: var(--white);\r\n      font-size: 11px;\r\n      font-weight: 600;\r\n      padding: 5px 12px;\r\n      border-radius: 50px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n\r\n    .badge i { color: var(--gold); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       PROGRESS BAR\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .progress-wrapper {\r\n      background: var(--white);\r\n      border-bottom: 1px solid var(--border);\r\n      padding: 16px 40px;\r\n    }\r\n\r\n    .progress-inner {\r\n      max-width: 800px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .progress-bar-track {\r\n      height: 4px;\r\n      background: #e0e0e0;\r\n      border-radius: 10px;\r\n      margin-bottom: 14px;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .progress-bar-fill {\r\n      height: 100%;\r\n      background: linear-gradient(90deg, var(--teal), var(--gold));\r\n      border-radius: 10px;\r\n      transition: width 0.5s ease;\r\n      width: 25%;\r\n    }\r\n\r\n    .steps-nav {\r\n      display: flex;\r\n      justify-content: space-between;\r\n      position: relative;\r\n    }\r\n\r\n    .step-item {\r\n      display: flex;\r\n      flex-direction: column;\r\n      align-items: center;\r\n      gap: 5px;\r\n      flex: 1;\r\n      position: relative;\r\n      cursor: default;\r\n    }\r\n\r\n    .step-circle {\r\n      width: 34px;\r\n      height: 34px;\r\n      border-radius: 50%;\r\n      background: #e0e0e0;\r\n      border: 2px solid #e0e0e0;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-weight: 700;\r\n      font-size: 13px;\r\n      color: #aaa;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .step-label {\r\n      font-size: 11px;\r\n      color: #aaa;\r\n      font-weight: 600;\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.5px;\r\n      white-space: nowrap;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .step-item.active .step-circle {\r\n      background: var(--gold);\r\n      border-color: var(--gold);\r\n      color: var(--teal);\r\n      box-shadow: 0 0 0 4px rgba(232,160,32,0.2);\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    .step-item.active .step-label { color: var(--teal); }\r\n\r\n    .step-item.done .step-circle {\r\n      background: var(--teal);\r\n      border-color: var(--teal);\r\n      color: var(--white);\r\n    }\r\n\r\n    .step-item.done .step-label { color: var(--teal); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       LAYOUT\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .devis-container {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 28px;\r\n      max-width: 1200px;\r\n      margin: 32px auto;\r\n      padding: 0 20px 60px;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       FORM CARD\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .form-card {\r\n      flex: 1 1 620px;\r\n      background: var(--white);\r\n      border-radius: 20px;\r\n      padding: 40px;\r\n      box-shadow: var(--shadow);\r\n      border: 1px solid rgba(0,76,76,0.05);\r\n      position: relative;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .form-card::after {\r\n      content: '';\r\n      position: absolute;\r\n      top: 0; right: 0;\r\n      width: 50px; height: 50px;\r\n      background: linear-gradient(225deg, #f0f0f0 45%, var(--white) 50%);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       STEP HEADER\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .step-header {\r\n      margin-bottom: 28px;\r\n    }\r\n\r\n    .step-header h2 {\r\n      font-size: 19px !important;\r\n      line-height: 1.3 !important;\r\n      font-weight: 700 !important;\r\n      color: var(--teal) !important;\r\n      margin-bottom: 6px;\r\n    }\r\n\r\n    .step-objective {\r\n      font-size: 13px;\r\n      color: var(--gray-text);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .step-objective .time-badge {\r\n      background: var(--gold-light);\r\n      color: var(--gold);\r\n      font-weight: 700;\r\n      font-size: 11px;\r\n      padding: 3px 10px;\r\n      border-radius: 50px;\r\n      border: 1px solid rgba(232,160,32,0.3);\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       FORM STEPS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .form-step { display: none; }\r\n    .form-step.active {\r\n      display: block;\r\n      animation: slideIn 0.4s ease-out;\r\n    }\r\n\r\n    @keyframes slideIn {\r\n      from { opacity: 0; transform: translateX(18px); }\r\n      to   { opacity: 1; transform: translateX(0); }\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       INPUT GROUPS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .input-group { margin-bottom: 20px; position: relative; }\r\n\r\n    .input-group label {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 6px;\r\n      font-size: 12px;\r\n      font-weight: 700;\r\n      color: var(--teal);\r\n      text-transform: uppercase;\r\n      letter-spacing: 0.6px;\r\n      margin-bottom: 7px;\r\n    }\r\n\r\n    .input-group label .required-star { color: var(--error); }\r\n\r\n    .input-group label .tooltip-btn {\r\n      background: none;\r\n      border: 1px solid var(--border);\r\n      border-radius: 50%;\r\n      width: 17px;\r\n      height: 17px;\r\n      font-size: 10px;\r\n      cursor: pointer;\r\n      color: var(--gray-text);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      transition: var(--transition);\r\n      position: relative;\r\n    }\r\n\r\n    .input-group label .tooltip-btn:hover { background: var(--teal); color: var(--white); border-color: var(--teal); }\r\n\r\n    .tooltip-text {\r\n      display: none;\r\n      position: absolute;\r\n      left: 0;\r\n      top: 24px;\r\n      background: var(--dark-text);\r\n      color: var(--white);\r\n      font-size: 11px;\r\n      font-weight: 400;\r\n      text-transform: none;\r\n      letter-spacing: 0;\r\n      padding: 8px 12px;\r\n      border-radius: 8px;\r\n      width: 240px;\r\n      z-index: 10;\r\n      line-height: 1.5;\r\n      box-shadow: 0 8px 20px rgba(0,0,0,0.2);\r\n    }\r\n\r\n    .tooltip-btn:hover .tooltip-text { display: block; }\r\n\r\n    input[type=\"text\"],\r\n    input[type=\"email\"],\r\n    input[type=\"tel\"],\r\n    input[type=\"date\"],\r\n    select,\r\n    textarea {\r\n      width: 100%;\r\n      padding: 13px 16px;\r\n      border: 1.5px solid var(--border);\r\n      border-radius: 10px;\r\n      background: #fafafa;\r\n      font-size: 15px;\r\n      color: var(--dark-text);\r\n      outline: none;\r\n      transition: var(--transition);\r\n      font-family: inherit;\r\n    }\r\n\r\n    input:focus, select:focus, textarea:focus {\r\n      border-color: var(--teal);\r\n      background: var(--white);\r\n      box-shadow: 0 0 0 3px rgba(0,76,76,0.07);\r\n    }\r\n\r\n    input.error, select.error, textarea.error {\r\n      border-color: var(--error);\r\n      background: #fff5f5;\r\n    }\r\n\r\n    .field-hint {\r\n      font-size: 11.5px;\r\n      color: var(--gray-text);\r\n      margin-top: 5px;\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n\r\n    .input-row {\r\n      display: flex;\r\n      gap: 16px;\r\n      flex-wrap: wrap;\r\n    }\r\n\r\n    .input-row .input-group { flex: 1 1 200px; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SEARCHABLE SELECT (Pays \/ Ports) \u2014 d\u00e9pendants\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .searchable-select {\r\n      position: relative;\r\n      width: 100%;\r\n    }\r\n\r\n    .ss-trigger {\r\n      width: 100%;\r\n      text-align: left;\r\n      padding: 13px 16px;\r\n      border: 1.5px solid var(--border);\r\n      border-radius: 10px;\r\n      background: #fafafa;\r\n      font-size: 15px;\r\n      color: var(--dark-text);\r\n      font-family: inherit;\r\n      cursor: pointer;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      gap: 10px;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .ss-trigger:hover { border-color: var(--teal-light); }\r\n\r\n    .ss-trigger.open {\r\n      border-color: var(--teal);\r\n      background: var(--white);\r\n      box-shadow: 0 0 0 3px rgba(0,76,76,0.07);\r\n    }\r\n\r\n    .ss-trigger.error { border-color: var(--error); background: #fff5f5; }\r\n\r\n    .ss-trigger-text {\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      white-space: nowrap;\r\n    }\r\n\r\n    .ss-trigger-text.placeholder { color: #9a9a9a; }\r\n\r\n    .ss-chevron {\r\n      color: var(--gray-text);\r\n      font-size: 11px;\r\n      flex-shrink: 0;\r\n      transition: transform 0.25s;\r\n    }\r\n\r\n    .ss-trigger.open .ss-chevron { transform: rotate(180deg); }\r\n\r\n    .searchable-select.disabled .ss-trigger {\r\n      background: #f0f0f0;\r\n      color: #aaa;\r\n      cursor: not-allowed;\r\n    }\r\n\r\n    .searchable-select.disabled .ss-chevron { opacity: 0.4; }\r\n\r\n    .ss-dropdown {\r\n      position: absolute;\r\n      top: calc(100% + 6px);\r\n      left: 0;\r\n      right: 0;\r\n      background: var(--white);\r\n      border: 1.5px solid var(--border);\r\n      border-radius: 10px;\r\n      box-shadow: 0 14px 34px rgba(0,0,0,0.14);\r\n      z-index: 80;\r\n      display: none;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .ss-dropdown.open { display: block; animation: fadeIn 0.15s; }\r\n\r\n    .ss-search-wrap { padding: 10px; border-bottom: 1px solid var(--border); }\r\n\r\n    .ss-search {\r\n      width: 100%;\r\n      padding: 9px 12px;\r\n      border: 1.5px solid var(--border);\r\n      border-radius: 8px;\r\n      font-size: 14px;\r\n      font-family: inherit;\r\n      outline: none;\r\n    }\r\n\r\n    .ss-search:focus { border-color: var(--teal); }\r\n\r\n    .ss-options { max-height: 230px; overflow-y: auto; }\r\n\r\n    .ss-option {\r\n      padding: 10px 16px;\r\n      font-size: 13.5px;\r\n      cursor: pointer;\r\n      color: var(--dark-text);\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .ss-option:hover, .ss-option.highlight { background: #f0faf9; color: var(--teal); }\r\n\r\n    .ss-option.selected { background: #e8f5f3; color: var(--teal); font-weight: 700; }\r\n\r\n    .ss-empty {\r\n      padding: 16px;\r\n      font-size: 12.5px;\r\n      color: var(--gray-text);\r\n      text-align: center;\r\n    }\r\n\r\n    .port-count-hint { color: var(--success) !important; }\r\n    .port-warning-hint { color: var(--error) !important; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SERVICE CARDS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .service-grid {\r\n      display: grid;\r\n      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n      gap: 10px;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    .service-card {\r\n      border: 2px solid var(--border);\r\n      border-radius: var(--radius);\r\n      padding: 14px 10px;\r\n      text-align: center;\r\n      cursor: pointer;\r\n      transition: var(--transition);\r\n      background: var(--white);\r\n      user-select: none;\r\n    }\r\n\r\n    .service-card:hover {\r\n      border-color: var(--teal-light);\r\n      background: #f0faf9;\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    .service-card.selected {\r\n      border-color: var(--teal);\r\n      background: #e8f5f3;\r\n      box-shadow: 0 0 0 3px rgba(0,76,76,0.1);\r\n    }\r\n\r\n    .service-card .svc-icon { font-size: 24px; margin-bottom: 6px; }\r\n    .service-card .svc-name { font-size: 12px; font-weight: 700; color: var(--teal); }\r\n    .service-card .svc-desc { font-size: 10px; color: var(--gray-text); margin-top: 3px; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       RADIO \/ CHECKBOX GROUPS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .radio-group, .checkbox-group {\r\n      display: flex;\r\n      flex-wrap: wrap;\r\n      gap: 10px;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    .radio-option, .checkbox-option {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 8px;\r\n      padding: 10px 16px;\r\n      border: 1.5px solid var(--border);\r\n      border-radius: 50px;\r\n      cursor: pointer;\r\n      font-size: 13px;\r\n      font-weight: 600;\r\n      color: var(--dark-text);\r\n      transition: var(--transition);\r\n      user-select: none;\r\n      background: var(--white);\r\n    }\r\n\r\n    .radio-option:hover, .checkbox-option:hover {\r\n      border-color: var(--teal-light);\r\n      background: #f0faf9;\r\n    }\r\n\r\n    .radio-option.selected, .checkbox-option.selected {\r\n      border-color: var(--teal);\r\n      background: #e8f5f3;\r\n      color: var(--teal);\r\n    }\r\n\r\n    .radio-option input, .checkbox-option input { display: none; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       DYNAMIC VOLUME FIELDS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .volume-fields {\r\n      display: none;\r\n      margin-top: 16px;\r\n      padding: 20px;\r\n      background: #f7faf9;\r\n      border-radius: var(--radius);\r\n      border: 1.5px solid #c8eeea;\r\n      animation: fadeIn 0.3s;\r\n    }\r\n\r\n    .volume-fields.visible { display: block; }\r\n    .volume-fields h4 { font-size: 13px; color: var(--teal); margin-bottom: 14px; font-weight: 700; }\r\n\r\n    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       UPLOAD ZONE\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .upload-zone {\r\n      border: 2px dashed var(--border);\r\n      border-radius: var(--radius);\r\n      padding: 24px;\r\n      text-align: center;\r\n      cursor: pointer;\r\n      transition: var(--transition);\r\n      background: #fafafa;\r\n    }\r\n\r\n    .upload-zone:hover {\r\n      border-color: var(--teal-light);\r\n      background: #f0faf9;\r\n    }\r\n\r\n    .upload-zone i { font-size: 28px; color: var(--teal-light); margin-bottom: 8px; }\r\n    .upload-zone p { font-size: 13px; color: var(--gray-text); margin: 0; }\r\n    .upload-zone strong { font-size: 14px; color: var(--dark-text); }\r\n    .upload-zone input { display: none; }\r\n\r\n    .doc-list { display: flex; flex-direction: column; gap: 10px; }\r\n\r\n    .doc-item {\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: space-between;\r\n      padding: 12px 16px;\r\n      border: 1.5px solid var(--border);\r\n      border-radius: 10px;\r\n      background: var(--white);\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .doc-item:hover { border-color: var(--teal-light); }\r\n\r\n    .doc-item .doc-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; color: var(--dark-text); }\r\n    .doc-item i { color: var(--teal-light); }\r\n    .doc-item .doc-hint { font-size: 11px; color: var(--gray-text); display: block; font-weight: 400; }\r\n\r\n    .doc-upload-btn {\r\n      padding: 7px 14px;\r\n      border: 1.5px solid var(--teal);\r\n      border-radius: 8px;\r\n      background: transparent;\r\n      color: var(--teal);\r\n      font-size: 12px;\r\n      font-weight: 700;\r\n      cursor: pointer;\r\n      transition: var(--transition);\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 5px;\r\n    }\r\n\r\n    .doc-upload-btn:hover { background: var(--teal); color: var(--white); }\r\n    .doc-upload-btn.uploaded { background: var(--success); border-color: var(--success); color: var(--white); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       CONSENT\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .consent-box {\r\n      background: #f7faf9;\r\n      border: 1.5px solid #c8eeea;\r\n      border-radius: var(--radius);\r\n      padding: 18px 20px;\r\n      display: flex;\r\n      align-items: flex-start;\r\n      gap: 14px;\r\n      margin-top: 6px;\r\n    }\r\n\r\n    .consent-box input[type=\"checkbox\"] {\r\n      width: 18px;\r\n      height: 18px;\r\n      flex-shrink: 0;\r\n      margin-top: 2px;\r\n      accent-color: var(--teal);\r\n      cursor: pointer;\r\n    }\r\n\r\n    .consent-box label {\r\n      font-size: 13px;\r\n      color: var(--gray-text);\r\n      line-height: 1.6;\r\n      font-weight: 400;\r\n      cursor: pointer;\r\n      text-transform: none;\r\n      letter-spacing: 0;\r\n    }\r\n\r\n    .consent-box label a { color: var(--teal); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       BUTTONS\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .btn-container {\r\n      display: flex;\r\n      gap: 14px;\r\n      margin-top: 32px;\r\n    }\r\n\r\n    .btn {\r\n      padding: 16px 28px;\r\n      border: none;\r\n      border-radius: 12px;\r\n      cursor: pointer;\r\n      font-weight: 700;\r\n      font-size: 15px;\r\n      font-family: inherit;\r\n      transition: var(--transition);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      gap: 10px;\r\n    }\r\n\r\n    .btn-next {\r\n      background: var(--gold);\r\n      color: var(--teal);\r\n      flex: 2;\r\n      box-shadow: 0 4px 15px rgba(232,160,32,0.35);\r\n    }\r\n\r\n    .btn-next:hover { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(232,160,32,0.45); }\r\n\r\n    .btn-prev {\r\n      background: #f0f0f0;\r\n      color: #777;\r\n      flex: 1;\r\n    }\r\n\r\n    .btn-prev:hover { background: #e4e4e4; }\r\n\r\n    .btn-submit {\r\n      background: var(--teal);\r\n      color: var(--white);\r\n      flex: 2;\r\n      box-shadow: 0 4px 15px rgba(0,76,76,0.3);\r\n    }\r\n\r\n    .btn-submit:hover { filter: brightness(1.1); transform: translateY(-2px); }\r\n\r\n    .btn-submit:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }\r\n\r\n    .submit-error {\r\n      display: none;\r\n      align-items: flex-start;\r\n      gap: 10px;\r\n      margin-top: 14px;\r\n      padding: 14px 16px;\r\n      background: #fff5f5;\r\n      border: 1.5px solid rgba(231,76,60,0.3);\r\n      border-radius: 10px;\r\n      color: var(--error);\r\n      font-size: 12.5px;\r\n      line-height: 1.6;\r\n    }\r\n\r\n    .submit-error.show { display: flex; }\r\n    .submit-error a { color: var(--error); font-weight: 700; }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SUCCESS MESSAGE\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .success-screen {\r\n      display: none;\r\n      text-align: center;\r\n      padding: 20px 4px 4px;\r\n    }\r\n\r\n    .success-screen.show { display: block; animation: slideIn 0.5s ease-out; }\r\n\r\n    @keyframes popIn {\r\n      0%   { transform: scale(0.4); opacity: 0; }\r\n      70%  { transform: scale(1.08); opacity: 1; }\r\n      100% { transform: scale(1); }\r\n    }\r\n\r\n    .success-icon {\r\n      width: 76px; height: 76px;\r\n      background: #e8f5e9;\r\n      border-radius: 50%;\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      margin: 0 auto 22px;\r\n      animation: popIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);\r\n    }\r\n\r\n    .success-icon i { font-size: 32px; color: var(--success); }\r\n\r\n    .success-screen h2 { font-size: 22px !important; font-weight: 700 !important; color: var(--teal) !important; margin-bottom: 10px; }\r\n\r\n    .success-sub {\r\n      color: var(--gray-text);\r\n      font-size: 14.5px;\r\n      line-height: 1.7;\r\n      max-width: 420px;\r\n      margin: 0 auto;\r\n    }\r\n\r\n    .success-ref {\r\n      display: inline-block;\r\n      margin: 18px auto 0;\r\n      padding: 8px 18px;\r\n      background: var(--gold-light);\r\n      border: 1px solid rgba(232,160,32,0.35);\r\n      border-radius: 50px;\r\n      color: var(--gold);\r\n      font-weight: 700;\r\n      font-size: 12.5px;\r\n      letter-spacing: 0.3px;\r\n    }\r\n\r\n    .success-steps {\r\n      display: grid;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 16px;\r\n      margin: 36px 0 8px;\r\n      text-align: left;\r\n    }\r\n\r\n    .success-step {\r\n      background: #f7faf9;\r\n      border: 1.5px solid #e3f2ef;\r\n      border-radius: var(--radius);\r\n      padding: 18px 16px;\r\n    }\r\n\r\n    .success-step .ss-icon {\r\n      width: 36px; height: 36px;\r\n      border-radius: 10px;\r\n      background: var(--teal);\r\n      color: var(--white);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      font-size: 14px;\r\n      margin-bottom: 12px;\r\n    }\r\n\r\n    .success-step strong { display: block; font-size: 13px; color: var(--teal); margin-bottom: 5px; }\r\n    .success-step p { font-size: 12px; color: #6b6b6b; line-height: 1.5; margin: 0; }\r\n\r\n    .success-actions {\r\n      display: flex;\r\n      gap: 14px;\r\n      margin-top: 32px;\r\n    }\r\n\r\n    .success-restart { max-width: 260px; margin: 0 auto; }\r\n\r\n    @media (max-width: 640px) {\r\n      .success-steps { grid-template-columns: 1fr; }\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       INFO CARD (colonne droite)\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .info-card {\r\n      flex: 1 1 320px;\r\n      background: var(--ivory);\r\n      border-radius: 20px;\r\n      padding: 36px;\r\n      align-self: flex-start;\r\n      position: sticky;\r\n      top: 100px;\r\n    }\r\n\r\n    .info-card h3 {\r\n      font-size: 16px !important;\r\n      font-weight: 700 !important;\r\n      line-height: 1.3 !important;\r\n      color: var(--teal) !important;\r\n      margin-bottom: 24px;\r\n      border-left: 4px solid var(--gold);\r\n      padding-left: 14px;\r\n    }\r\n\r\n    .advantage-item {\r\n      display: flex;\r\n      gap: 14px;\r\n      margin-bottom: 22px;\r\n    }\r\n\r\n    .adv-icon {\r\n      width: 40px; height: 40px;\r\n      border-radius: 10px;\r\n      background: var(--gold-light);\r\n      display: flex;\r\n      align-items: center;\r\n      justify-content: center;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .adv-icon i { color: var(--gold); font-size: 16px; }\r\n    .advantage-item strong { display: block; color: var(--teal); font-size: 14px; margin-bottom: 4px; }\r\n    .advantage-item p { font-size: 12.5px; color: #666; line-height: 1.5; margin: 0; }\r\n\r\n    .testimonial {\r\n      margin-top: 28px;\r\n      padding: 22px;\r\n      background: var(--white);\r\n      border-radius: 14px;\r\n      box-shadow: 0 6px 20px rgba(0,0,0,0.04);\r\n    }\r\n\r\n    .testimonial blockquote {\r\n      font-style: italic;\r\n      color: #444;\r\n      font-size: 13px;\r\n      line-height: 1.65;\r\n      margin: 0 0 16px;\r\n    }\r\n\r\n    .testimonial-author {\r\n      display: flex;\r\n      align-items: center;\r\n      gap: 12px;\r\n    }\r\n\r\n    .testimonial-author img {\r\n      width: 44px; height: 44px;\r\n      border-radius: 50%;\r\n      border: 2px solid var(--gold);\r\n      object-fit: cover;\r\n    }\r\n\r\n    .testimonial-author strong { display: block; font-size: 13px; color: var(--teal); }\r\n    .testimonial-author small { font-size: 11px; color: #888; }\r\n\r\n    .info-contact {\r\n      display: block;\r\n      margin-top: 24px;\r\n      text-align: center;\r\n      color: var(--teal);\r\n      font-weight: 700;\r\n      text-decoration: none;\r\n      font-size: 13px;\r\n      padding: 12px;\r\n      border: 1.5px solid var(--teal);\r\n      border-radius: 10px;\r\n      transition: var(--transition);\r\n    }\r\n\r\n    .info-contact:hover { background: var(--teal); color: var(--white); }\r\n    .info-contact span { color: var(--gold); }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       SECTION DIVIDER\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    .section-divider {\r\n      border: none;\r\n      border-top: 1.5px solid #f0f0f0;\r\n      margin: 24px 0;\r\n    }\r\n\r\n    \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n       RESPONSIVE\r\n    \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n    @media (max-width: 768px) {\r\n      .page-header { padding: 16px 20px; }\r\n      .header-badges { display: none; }\r\n      .progress-wrapper { padding: 14px 20px; }\r\n      .devis-container { flex-direction: column; margin: 16px auto; padding: 0 12px 40px; }\r\n      .form-card { padding: 24px 20px; }\r\n      .info-card { position: static; }\r\n      .service-grid { grid-template-columns: repeat(2, 1fr); }\r\n      .step-label { display: none; }\r\n    }\r\n  <\/style>\r\n<\/head>\r\n<body>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PAGE HEADER \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<header class=\"page-header\">\r\n  <div class=\"header-brand\">\r\n    <div>\r\n      <div class=\"logo-text\">PORTA<span>LIS<\/span><\/div>\r\n      <div class=\"header-tagline\">Transport & Logistique Multimodale<\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <div class=\"header-meta\">\r\n    <div class=\"header-badges\">\r\n      <span class=\"badge\"><i class=\"fas fa-check-circle\"><\/i> Gratuit<\/span>\r\n      <span class=\"badge\"><i class=\"fas fa-shield-alt\"><\/i> Sans engagement<\/span>\r\n      <span class=\"badge\"><i class=\"fas fa-bolt\"><\/i> R\u00e9ponse 48h<\/span>\r\n    <\/div>\r\n    <a href=\"https:\/\/wa.me\/221770000000\" target=\"_blank\"><i class=\"fab fa-whatsapp\"><\/i> WhatsApp<\/a>\r\n    <a href=\"\/contact\"><i class=\"fas fa-question-circle\"><\/i> Besoin d'aide ?<\/a>\r\n  <\/div>\r\n<\/header>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 PROGRESS BAR \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"progress-wrapper\">\r\n  <div class=\"progress-inner\">\r\n    <div class=\"progress-bar-track\">\r\n      <div class=\"progress-bar-fill\" id=\"progressFill\"><\/div>\r\n    <\/div>\r\n    <div class=\"steps-nav\">\r\n      <div class=\"step-item active\" data-step=\"1\">\r\n        <div class=\"step-circle\">1<\/div>\r\n        <span class=\"step-label\">Profil<\/span>\r\n      <\/div>\r\n      <div class=\"step-item\" data-step=\"2\">\r\n        <div class=\"step-circle\">2<\/div>\r\n        <span class=\"step-label\">Trajet<\/span>\r\n      <\/div>\r\n      <div class=\"step-item\" data-step=\"3\">\r\n        <div class=\"step-circle\">3<\/div>\r\n        <span class=\"step-label\">Marchandise<\/span>\r\n      <\/div>\r\n      <div class=\"step-item\" data-step=\"4\">\r\n        <div class=\"step-circle\">4<\/div>\r\n        <span class=\"step-label\">Validation<\/span>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550 MAIN LAYOUT \u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<div class=\"devis-container\">\r\n\r\n  <!-- \u2550\u2550 FORM CARD \u2550\u2550 -->\r\n  <div class=\"form-card\">\r\n\r\n    <!-- SUCCESS SCREEN -->\r\n    <div class=\"success-screen\" id=\"successScreen\">\r\n      <div class=\"success-icon\"><i class=\"fas fa-check\"><\/i><\/div>\r\n      <h2 style=\"font-size:22px !important; line-height:1.3 !important; font-weight:700 !important; color:#004C4C !important; margin:0 0 10px 0 !important;\">Demande envoy\u00e9e avec succ\u00e8s !<\/h2>\r\n      <p class=\"success-sub\">Merci pour votre confiance<span id=\"successName\"><\/span>. Notre \u00e9quipe a bien re\u00e7u votre dossier.<\/p>\r\n      <div class=\"success-ref\" id=\"successRef\"><\/div>\r\n\r\n      <div class=\"success-steps\">\r\n        <div class=\"success-step\">\r\n          <div class=\"ss-icon\"><i class=\"fas fa-magnifying-glass\"><\/i><\/div>\r\n          <strong>Analyse du dossier<\/strong>\r\n          <p>Un expert logistique \u00e9tudie votre trajet et vos volumes.<\/p>\r\n        <\/div>\r\n        <div class=\"success-step\">\r\n          <div class=\"ss-icon\"><i class=\"fas fa-file-invoice-dollar\"><\/i><\/div>\r\n          <strong>Devis chiffr\u00e9<\/strong>\r\n          <p>Vous recevez une offre d\u00e9taill\u00e9e par email sous 48h ouvr\u00e9es.<\/p>\r\n        <\/div>\r\n        <div class=\"success-step\">\r\n          <div class=\"ss-icon\"><i class=\"fas fa-headset\"><\/i><\/div>\r\n          <strong>Contact direct<\/strong>\r\n          <p>Un conseiller PortaLis vous appelle ou vous \u00e9crit sur WhatsApp.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <div class=\"success-actions\">\r\n        <button type=\"button\" class=\"btn btn-submit success-restart\" onclick=\"location.reload()\"><i class=\"fas fa-rotate-left\"><\/i> Nouvelle demande<\/button>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <form id=\"devisForm\" action=\"https:\/\/formsubmit.co\/amadoudiatta734@gmail.com\" method=\"POST\">\r\n      <!-- FormSubmit config -->\r\n      <input type=\"hidden\" name=\"_subject\" value=\"Nouvelle Demande de Devis \u2014 PortaLis\">\r\n      <input type=\"hidden\" name=\"_template\" value=\"table\">\r\n      <input type=\"hidden\" name=\"_captcha\" value=\"false\">\r\n      <input type=\"hidden\" name=\"_next\" value=\"\">\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           \u00c9TAPE 1 \u2014 PROFIL\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <div class=\"form-step active\" id=\"step1\">\r\n        <div class=\"step-header\">\r\n          <h2 style=\"font-size:19px !important; line-height:1.3 !important; font-weight:700 !important; color:#004C4C !important; margin:0 0 6px 0 !important;\">\ud83d\udc64 Vos Coordonn\u00e9es<\/h2>\r\n          <div class=\"step-objective\">\r\n            Capture rapide de votre profil\r\n            <span class=\"time-badge\">\u23f1 ~1 minute<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Nom complet <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"text\" name=\"Nom_Complet\" required placeholder=\"Ex : Moussa Diallo\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Entreprise \/ Organisation<\/label>\r\n          <input type=\"text\" name=\"Entreprise\" placeholder=\"Ex : Keurgui Digital\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Email professionnel <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"email\" name=\"Email\" required placeholder=\"contact@votreentreprise.com\">\r\n          <p class=\"field-hint\"><i class=\"fas fa-info-circle\"><\/i> Un r\u00e9capitulatif vous sera envoy\u00e9 \u00e0 cette adresse.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>T\u00e9l\u00e9phone (WhatsApp recommand\u00e9) <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"tel\" name=\"Telephone\" required placeholder=\"+221 77 000 00 00\">\r\n          <p class=\"field-hint\"><i class=\"fab fa-whatsapp\" style=\"color:#25D366\"><\/i> Utilis\u00e9 pour vous joindre par appel ou WhatsApp.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Vous \u00eates <span class=\"required-star\">*<\/span><\/label>\r\n          <div class=\"radio-group\" id=\"typeClientGroup\">\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Type_Client', 'Particulier professionnel')\">\r\n              <input type=\"radio\" name=\"Type_Client\" value=\"Particulier professionnel\"> Particulier\r\n            <\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Type_Client', 'PME')\">\r\n              <input type=\"radio\" name=\"Type_Client\" value=\"PME\"> PME\r\n            <\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Type_Client', 'Grande entreprise')\">\r\n              <input type=\"radio\" name=\"Type_Client\" value=\"Grande entreprise\"> Grande entreprise\r\n            <\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Type_Client', 'Importateur \/ Exportateur')\">\r\n              <input type=\"radio\" name=\"Type_Client\" value=\"Importateur \/ Exportateur\"> Import \/ Export\r\n            <\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Type_Client', 'ONG \/ Projet sp\u00e9cifique')\">\r\n              <input type=\"radio\" name=\"Type_Client\" value=\"ONG \/ Projet sp\u00e9cifique\"> ONG\r\n            <\/label>\r\n          <\/div>\r\n          <input type=\"hidden\" name=\"Type_Client\" id=\"typeClientVal\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Secteur d'activit\u00e9<\/label>\r\n          <select name=\"Secteur\">\r\n            <option value=\"\">\u25bc S\u00e9lectionner votre secteur...<\/option>\r\n            <option>Commerce \/ Import-Export<\/option>\r\n            <option>Industrie <\/option>\r\n            <option>Agriculture \/ Agroalimentaire<\/option>\r\n            <option>BTP \/ Construction<\/option>\r\n            <option>Humanitaire \/ ONG<\/option>\r\n            <option>Energie \/ Mines<\/option>\r\n            <option>Technologie<\/option>\r\n            <option>Transport & Mobilit\u00e9<\/option>\r\n            <option>Autre(\u00c0 pr\u00e9ciser)<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"btn-container\">\r\n          <button type=\"button\" class=\"btn btn-next\" onclick=\"changeStep(2)\">\r\n            Continuer <i class=\"fas fa-chevron-right\"><\/i>\r\n          <\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           \u00c9TAPE 2 \u2014 TRAJET & SERVICE\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <div class=\"form-step\" id=\"step2\">\r\n        <div class=\"step-header\">\r\n          <h2 style=\"font-size:19px !important; line-height:1.3 !important; font-weight:700 !important; color:#004C4C !important; margin:0 0 6px 0 !important;\">\ud83c\udf0d Trajet & Service<\/h2>\r\n          <div class=\"step-objective\">\r\n            D\u00e9finissez votre itin\u00e9raire\r\n            <span class=\"time-badge\">\u23f1 ~1 minute<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-row\">\r\n          <div class=\"input-group\">\r\n            <label>Pays d'origine <span class=\"required-star\">*<\/span><\/label>\r\n            <div class=\"searchable-select\" id=\"combo-pays-origine\"><\/div>\r\n            <input type=\"hidden\" name=\"Pays_Origine\" id=\"val-pays-origine\">\r\n          <\/div>\r\n          <div class=\"input-group\">\r\n            <label>Pays de destination <span class=\"required-star\">*<\/span><\/label>\r\n            <div class=\"searchable-select\" id=\"combo-pays-destination\"><\/div>\r\n            <input type=\"hidden\" name=\"Pays_Destination\" id=\"val-pays-destination\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-row\">\r\n          <div class=\"input-group\">\r\n            <label>Port d'origine <span class=\"required-star\">*<\/span><\/label>\r\n            <div class=\"searchable-select disabled\" id=\"combo-port-origine\"><\/div>\r\n            <input type=\"hidden\" name=\"Port_Origine\" id=\"val-port-origine\">\r\n            <p class=\"field-hint\" id=\"hint-port-origine\"><i class=\"fas fa-info-circle\"><\/i> S\u00e9lectionnez d'abord un pays d'origine.<\/p>\r\n          <\/div>\r\n          <div class=\"input-group\">\r\n            <label>Port de destination <span class=\"required-star\">*<\/span><\/label>\r\n            <div class=\"searchable-select disabled\" id=\"combo-port-destination\"><\/div>\r\n            <input type=\"hidden\" name=\"Port_Destination\" id=\"val-port-destination\">\r\n            <p class=\"field-hint\" id=\"hint-port-destination\"><i class=\"fas fa-info-circle\"><\/i> S\u00e9lectionnez d'abord un pays de destination.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Adresse de chargement <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"text\" name=\"Adresse_Chargement\" required placeholder=\"Rue, quartier, ville, pays\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Adresse de livraison <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"text\" name=\"Adresse_Livraison\" required placeholder=\"Rue, quartier, ville, pays\">\r\n        <\/div>\r\n\r\n        <hr class=\"section-divider\">\r\n\r\n        <div class=\"input-group\">\r\n          <label>Choisissez votre service PortaLis <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"hidden\" name=\"Service\" id=\"serviceVal\">\r\n          <div class=\"service-grid\" id=\"serviceGrid\">\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Fret Maritime')\">\r\n              <div class=\"svc-icon\">\ud83d\udea2<\/div>\r\n              <div class=\"svc-name\">Fret Maritime<\/div>\r\n              <div class=\"svc-desc\">Conteneurs, vrac<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Fret A\u00e9rien')\">\r\n              <div class=\"svc-icon\">\u2708\ufe0f<\/div>\r\n              <div class=\"svc-name\">Fret A\u00e9rien<\/div>\r\n              <div class=\"svc-desc\">Express, cargo<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Transport Routier')\">\r\n              <div class=\"svc-icon\">\ud83d\ude9b<\/div>\r\n              <div class=\"svc-name\">Transport Routier<\/div>\r\n              <div class=\"svc-desc\">FTL, LTL<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Groupage')\">\r\n              <div class=\"svc-icon\">\ud83d\udce6<\/div>\r\n              <div class=\"svc-name\">Groupage<\/div>\r\n              <div class=\"svc-desc\">LCL, LTL<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Multimodal')\">\r\n              <div class=\"svc-icon\">\ud83d\udd04<\/div>\r\n              <div class=\"svc-name\">Multimodal<\/div>\r\n              <div class=\"svc-desc\">Combin\u00e9<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Entreposage')\">\r\n              <div class=\"svc-icon\">\ud83c\udfed<\/div>\r\n              <div class=\"svc-name\">Entreposage<\/div>\r\n              <div class=\"svc-desc\">Stockage<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'D\u00e9douanement')\">\r\n              <div class=\"svc-icon\">\ud83d\udccb<\/div>\r\n              <div class=\"svc-name\">D\u00e9douanement<\/div>\r\n              <div class=\"svc-desc\">Import \/ Export<\/div>\r\n            <\/div>\r\n            <div class=\"service-card\" onclick=\"selectService(this, 'Autre')\">\r\n              <div class=\"svc-icon\">\u2795<\/div>\r\n              <div class=\"svc-name\">Autre<\/div>\r\n              <div class=\"svc-desc\">\u00c0 pr\u00e9ciser<\/div>\r\n            <\/div>\r\n          <\/div>\r\n          <div id=\"autreServiceGroup\" style=\"display:none; margin-top:12px;\">\r\n            <input type=\"text\" name=\"Service_Precision\" placeholder=\"D\u00e9crivez votre besoin sp\u00e9cifique...\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Filiale PortaLis<\/label>\r\n          <select name=\"Filiale\">\r\n            <option value=\"\">\u25bc S\u00e9lectionner une filiale...<\/option>\r\n            <option>PortaLis Shipping<\/option>\r\n            <option>PortaLis Multimodal<\/option>\r\n            <option>PortaLis Energie<\/option>\r\n            <option>PortaLis Logistique<\/option>\r\n            <option>PortaLis Tech Innov<\/option>\r\n            <option>M\u00e9moire et Transmission<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <hr class=\"section-divider\">\r\n\r\n        <div class=\"input-group\">\r\n          <label>Conditions de fret <span class=\"required-star\">*<\/span><\/label>\r\n          <div class=\"radio-group\">\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Conditions_Fret', 'Pr\u00e9pay\u00e9 (Prepaid)')\">\r\n              <input type=\"radio\" name=\"Conditions_Fret\" value=\"Pr\u00e9pay\u00e9\"> Pr\u00e9pay\u00e9 \u2014 frais exp\u00e9diteur\r\n            <\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Conditions_Fret', '\u00c0 percevoir (Collect)')\">\r\n              <input type=\"radio\" name=\"Conditions_Fret\" value=\"Collect\"> \u00c0 percevoir \u2014 frais destinataire\r\n            <\/label>\r\n          <\/div>\r\n          <input type=\"hidden\" name=\"Conditions_Fret\" id=\"condFretVal\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Payeur du fret<\/label>\r\n          <input type=\"text\" name=\"Payeur_Fret\" placeholder=\"Nom \/ Raison sociale du payeur\">\r\n        <\/div>\r\n\r\n        <div class=\"btn-container\">\r\n          <button type=\"button\" class=\"btn btn-prev\" onclick=\"changeStep(1)\"><i class=\"fas fa-chevron-left\"><\/i> Retour<\/button>\r\n          <button type=\"button\" class=\"btn btn-next\" onclick=\"changeStep(3)\">Continuer <i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           \u00c9TAPE 3 \u2014 MARCHANDISE\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <div class=\"form-step\" id=\"step3\">\r\n        <div class=\"step-header\">\r\n          <h2 style=\"font-size:19px !important; line-height:1.3 !important; font-weight:700 !important; color:#004C4C !important; margin:0 0 6px 0 !important;\">\ud83d\udce6 Marchandise & Logistique<\/h2>\r\n          <div class=\"step-objective\">\r\n            Pr\u00e9cision sans complexit\u00e9\r\n            <span class=\"time-badge\">\u23f1 ~1 minute<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Nature de la marchandise <span class=\"required-star\">*<\/span><\/label>\r\n          <input type=\"text\" name=\"Nature_Marchandise\" required placeholder=\"Ex : Mat\u00e9riel \u00e9lectronique, Denr\u00e9es alimentaires...\">\r\n        <\/div>\r\n\r\n        <div class=\"input-row\">\r\n          <div class=\"input-group\">\r\n            <label>Poids estim\u00e9<\/label>\r\n            <input type=\"text\" name=\"Poids\" placeholder=\"Ex : 500 kg \/ 2 tonnes\">\r\n          <\/div>\r\n          <div class=\"input-group\">\r\n            <label>Volume estim\u00e9<\/label>\r\n            <input type=\"text\" name=\"Volume\" placeholder=\"Ex : 3 m\u00b3\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Volume dynamique selon service -->\r\n        <div class=\"volume-fields\" id=\"volumeDynamic\">\r\n          <h4 id=\"volumeTitle\">\ud83d\udcca Conditionnement \u2014 <span id=\"volumeServiceName\"><\/span><\/h4>\r\n          <div class=\"input-row\">\r\n            <div class=\"input-group\">\r\n              <label>\u2460 Type de conditionnement<\/label>\r\n              <select name=\"Type_Conditionnement\" id=\"typeConditionnement\"><\/select>\r\n            <\/div>\r\n            <div class=\"input-group\">\r\n              <label>\u2461 Unit\u00e9 de mesure<\/label>\r\n              <select name=\"Unite_Mesure\" id=\"uniteMesure\"><\/select>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <hr class=\"section-divider\">\r\n\r\n        <div class=\"input-row\">\r\n          <div class=\"input-group\">\r\n            <label>Date de chargement souhait\u00e9e<\/label>\r\n            <input type=\"date\" name=\"Date_Chargement\">\r\n          <\/div>\r\n          <div class=\"input-group\">\r\n            <label>Urgence <span class=\"required-star\">*<\/span><\/label>\r\n            <div class=\"radio-group\">\r\n              <label class=\"radio-option\" onclick=\"selectRadio(this, 'Urgence', 'Standard')\">\r\n                <input type=\"radio\" name=\"Urgence\"> Standard\r\n              <\/label>\r\n              <label class=\"radio-option\" onclick=\"selectRadio(this, 'Urgence', 'Urgent')\">\r\n                <input type=\"radio\" name=\"Urgence\"> Urgent\r\n              <\/label>\r\n              <label class=\"radio-option\" onclick=\"selectRadio(this, 'Urgence', 'Tr\u00e8s urgent')\">\r\n                <input type=\"radio\" name=\"Urgence\"> Tr\u00e8s urgent\r\n              <\/label>\r\n            <\/div>\r\n            <input type=\"hidden\" name=\"Urgence\" id=\"urgenceVal\">\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>\r\n            Conditions de livraison (Incoterm)\r\n            <div class=\"tooltip-btn\" style=\"position:relative;\">\r\n              ?\r\n              <span class=\"tooltip-text\">L'Incoterm d\u00e9finit qui (vendeur ou acheteur) prend en charge les frais et les risques \u00e0 chaque \u00e9tape du transport.<\/span>\r\n            <\/div>\r\n          <\/label>\r\n          <select name=\"Incoterm\">\r\n            <option value=\"\">\u25bc S\u00e9lectionner...<\/option>\r\n            <option value=\"EXW\">EXW \u2014 D\u00e9part usine (frais acheteur)<\/option>\r\n            <option value=\"FOB\">FOB \u2014 Franco \u00e0 bord (frais acheteur \u00e0 partir du port)<\/option>\r\n            <option value=\"CIF\">CIF \u2014 Co\u00fbt, assurance, fret inclus<\/option>\r\n            <option value=\"DAP\">DAP \u2014 Rendu au lieu de destination<\/option>\r\n            <option value=\"DDP\">DDP \u2014 Rendu droits acquitt\u00e9s (tous frais vendeur)<\/option>\r\n            <option value=\"FCA\">FCA \u2014 Franco transporteur<\/option>\r\n          <\/select>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Flexibilit\u00e9 sur la date<\/label>\r\n          <div class=\"radio-group\">\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Flexibilite', 'Flexible')\">\r\n              <input type=\"radio\" name=\"Flexibilite\"> Dates flexibles\r\n            <\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Flexibilite', 'Date fixe')\">\r\n              <input type=\"radio\" name=\"Flexibilite\"> Date imp\u00e9rative\r\n            <\/label>\r\n          <\/div>\r\n          <input type=\"hidden\" name=\"Flexibilite\" id=\"flexibiliteVal\">\r\n        <\/div>\r\n\r\n        <hr class=\"section-divider\">\r\n\r\n        <div class=\"input-group\">\r\n          <label>Budget estimatif (optionnel)<\/label>\r\n          <div class=\"radio-group\">\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Budget', '< 1 000 \u20ac')\"><input type=\"radio\" name=\"Budget\"> &lt; 1 000 \u20ac<\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Budget', '1 000 \u2013 5 000 \u20ac')\"><input type=\"radio\" name=\"Budget\"> 1k \u2013 5k \u20ac<\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Budget', '5 000 \u2013 20 000 \u20ac')\"><input type=\"radio\" name=\"Budget\"> 5k \u2013 20k \u20ac<\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Budget', '+ 20 000 \u20ac')\"><input type=\"radio\" name=\"Budget\"> + 20k \u20ac<\/label>\r\n          <\/div>\r\n          <input type=\"hidden\" name=\"Budget\" id=\"budgetVal\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Fr\u00e9quence du besoin <span class=\"required-star\">*<\/span><\/label>\r\n          <div class=\"radio-group\">\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Frequence', 'Ponctuel')\"><input type=\"radio\" name=\"Frequence\"> Ponctuel<\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Frequence', 'R\u00e9gulier (mensuel)')\"><input type=\"radio\" name=\"Frequence\"> Mensuel<\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Frequence', 'R\u00e9gulier (hebdomadaire)')\"><input type=\"radio\" name=\"Frequence\"> Hebdomadaire<\/label>\r\n            <label class=\"radio-option\" onclick=\"selectRadio(this, 'Frequence', 'Projet long terme')\"><input type=\"radio\" name=\"Frequence\"> Long terme<\/label>\r\n          <\/div>\r\n          <input type=\"hidden\" name=\"Frequence\" id=\"frequenceVal\">\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Pr\u00e9cisions compl\u00e9mentaires<\/label>\r\n          <textarea name=\"Commentaire\" rows=\"4\" placeholder=\"Contraintes particuli\u00e8res, mati\u00e8res dangereuses, conditions de stockage, informations additionnelles...\"><\/textarea>\r\n        <\/div>\r\n\r\n        <div class=\"btn-container\">\r\n          <button type=\"button\" class=\"btn btn-prev\" onclick=\"changeStep(2)\"><i class=\"fas fa-chevron-left\"><\/i> Retour<\/button>\r\n          <button type=\"button\" class=\"btn btn-next\" onclick=\"changeStep(4)\">Continuer <i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n        <\/div>\r\n      <\/div>\r\n\r\n      <!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n           \u00c9TAPE 4 \u2014 VALIDATION\r\n      \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n      <div class=\"form-step\" id=\"step4\">\r\n        <div class=\"step-header\">\r\n          <h2 style=\"font-size:19px !important; line-height:1.3 !important; font-weight:700 !important; color:#004C4C !important; margin:0 0 6px 0 !important;\">\u2705 Documents & Validation<\/h2>\r\n          <div class=\"step-objective\">\r\n            Rassurer et finaliser\r\n            <span class=\"time-badge\">\u23f1 ~30 secondes<\/span>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"input-group\">\r\n          <label>Documents (optionnel \u2014 recommand\u00e9)<\/label>\r\n          <p class=\"field-hint\" style=\"margin-bottom:12px;\"><i class=\"fas fa-info-circle\"><\/i> Ajoutez vos documents pour un devis plus rapide et pr\u00e9cis.<\/p>\r\n          <div class=\"doc-list\">\r\n            <div class=\"doc-item\">\r\n              <div class=\"doc-label\">\r\n                <i class=\"fas fa-file-alt\"><\/i>\r\n                <div>Packing List <span class=\"doc-hint\">Liste de colisage<\/span><\/div>\r\n              <\/div>\r\n              <label class=\"doc-upload-btn\" id=\"btn-pl\">\r\n                <i class=\"fas fa-paperclip\"><\/i> Joindre\r\n                <input type=\"file\" name=\"Packing_List\" accept=\".pdf,.xlsx,.xls,.csv\" onchange=\"markUploaded('btn-pl', this)\">\r\n              <\/label>\r\n            <\/div>\r\n            <div class=\"doc-item\">\r\n              <div class=\"doc-label\">\r\n                <i class=\"fas fa-file-invoice\"><\/i>\r\n                <div>Facture pro forma <span class=\"doc-hint\">Facture estimative<\/span><\/div>\r\n              <\/div>\r\n              <label class=\"doc-upload-btn\" id=\"btn-fp\">\r\n                <i class=\"fas fa-paperclip\"><\/i> Joindre\r\n                <input type=\"file\" name=\"Facture_Proforma\" accept=\".pdf,.xlsx,.xls\" onchange=\"markUploaded('btn-fp', this)\">\r\n              <\/label>\r\n            <\/div>\r\n            <div class=\"doc-item\">\r\n              <div class=\"doc-label\">\r\n                <i class=\"fas fa-ship\"><\/i>\r\n                <div>BL \/ AWB <span class=\"doc-hint\">Connaissement \/ LTA<\/span><\/div>\r\n              <\/div>\r\n              <label class=\"doc-upload-btn\" id=\"btn-bl\">\r\n                <i class=\"fas fa-paperclip\"><\/i> Joindre\r\n                <input type=\"file\" name=\"BL_AWB\" accept=\".pdf\" onchange=\"markUploaded('btn-bl', this)\">\r\n              <\/label>\r\n            <\/div>\r\n            <div class=\"doc-item\">\r\n              <div class=\"doc-label\">\r\n                <i class=\"fas fa-clipboard-list\"><\/i>\r\n                <div>Cahier des charges <span class=\"doc-hint\">Sp\u00e9cifications<\/span><\/div>\r\n              <\/div>\r\n              <label class=\"doc-upload-btn\" id=\"btn-cdc\">\r\n                <i class=\"fas fa-paperclip\"><\/i> Joindre\r\n                <input type=\"file\" name=\"Cahier_Charges\" accept=\".pdf,.docx\" onchange=\"markUploaded('btn-cdc', this)\">\r\n              <\/label>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <hr class=\"section-divider\">\r\n\r\n        <div class=\"input-group\">\r\n          <label>Conformit\u00e9 <span class=\"required-star\">*<\/span><\/label>\r\n          <div class=\"consent-box\">\r\n            <input type=\"checkbox\" id=\"consentCheck\" required>\r\n            <label for=\"consentCheck\">\r\n              J'accepte que mes donn\u00e9es soient utilis\u00e9es pour le traitement de ma demande conform\u00e9ment \u00e0 la\r\n              <a href=\"\/politique-confidentialite\" target=\"_blank\">politique de confidentialit\u00e9 de PortaLis<\/a>.\r\n              <strong style=\"display:block; margin-top:6px; color:#2d4a52;\">\r\n                \ud83d\udd12 Vos donn\u00e9es sont s\u00e9curis\u00e9es et ne seront jamais partag\u00e9es avec des tiers sans votre consentement.\r\n              <\/strong>\r\n            <\/label>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"btn-container\">\r\n          <button type=\"button\" class=\"btn btn-prev\" onclick=\"changeStep(3)\"><i class=\"fas fa-chevron-left\"><\/i> Retour<\/button>\r\n          <button type=\"submit\" class=\"btn btn-submit\" id=\"submitBtn\" onclick=\"handleSubmit(event)\">\r\n            <i class=\"fas fa-paper-plane\"><\/i> Recevoir mon devis en 48h\r\n          <\/button>\r\n        <\/div>\r\n\r\n        <div class=\"submit-error\" id=\"submitError\">\r\n          <i class=\"fas fa-triangle-exclamation\"><\/i>\r\n          <span>L'envoi a \u00e9chou\u00e9. V\u00e9rifiez votre connexion et r\u00e9essayez, ou contactez-nous directement sur <a href=\"https:\/\/wa.me\/221770000000\" target=\"_blank\">WhatsApp<\/a>.<\/span>\r\n        <\/div>\r\n\r\n        <div style=\"margin-top:16px; text-align:center;\">\r\n          <p style=\"font-size:12px; color:var(--gray-text);\">\r\n            \u2705 R\u00e9ponse rapide &nbsp;\u2022&nbsp; \u2705 Sans engagement &nbsp;\u2022&nbsp; \u2705 100% personnalis\u00e9\r\n          <\/p>\r\n        <\/div>\r\n      <\/div>\r\n\r\n    <\/form>\r\n  <\/div>\r\n\r\n  <!-- \u2550\u2550 INFO CARD \u2550\u2550 -->\r\n  <div class=\"info-card\">\r\n    <h3 style=\"font-size:16px !important; font-weight:700 !important; line-height:1.3 !important; color:#004C4C !important; margin:0 0 24px 0 !important; border-left:4px solid #E8A020 !important; padding-left:14px !important;\">L'excellence PortaLis<\/h3>\r\n\r\n    <div class=\"advantage-item\">\r\n      <div class=\"adv-icon\"><i class=\"fas fa-stopwatch\"><\/i><\/div>\r\n      <div>\r\n        <strong>R\u00e9activit\u00e9 48h<\/strong>\r\n        <p>Nos experts analysent vos flux et vous r\u00e9pondent avec une offre chiffr\u00e9e sous 48h ouvr\u00e9es.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"advantage-item\">\r\n      <div class=\"adv-icon\"><i class=\"fas fa-map-marked-alt\"><\/i><\/div>\r\n      <div>\r\n        <strong>R\u00e9seau Mondial<\/strong>\r\n        <p>Une couverture multimodale connectant les continents avec une expertise sp\u00e9cifique sur l'Afrique.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"advantage-item\">\r\n      <div class=\"adv-icon\"><i class=\"fas fa-shield-alt\"><\/i><\/div>\r\n      <div>\r\n        <strong>Donn\u00e9es s\u00e9curis\u00e9es<\/strong>\r\n        <p>Vos informations restent strictement confidentielles. Aucun partage sans votre accord.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"advantage-item\">\r\n      <div class=\"adv-icon\"><i class=\"fas fa-handshake\"><\/i><\/div>\r\n      <div>\r\n        <strong>Accompagnement sur mesure<\/strong>\r\n        <p>Chaque dossier est trait\u00e9 par un expert d\u00e9di\u00e9 qui s'adapte \u00e0 vos contraintes sp\u00e9cifiques.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <div class=\"testimonial\">\r\n      <blockquote>\r\n        \"L'interface de demande de devis est fluide et l'\u00e9quipe PortaLis a su r\u00e9pondre \u00e0 nos contraintes logistiques les plus complexes en un temps record.\"\r\n      <\/blockquote>\r\n      <div class=\"testimonial-author\">\r\n        <img decoding=\"async\" src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-13-2026-03_16_28-PM.png\" alt=\"Moussa Diop\">\r\n        <div>\r\n          <strong>Moussa Diop<\/strong>\r\n          <small>Dir. Logistique \u2014 Group Transit<\/small>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <a href=\"\/contact\" class=\"info-contact\">\r\n      Une question ? <span>Contactez-nous \u2192<\/span>\r\n    <\/a>\r\n  <\/div>\r\n\r\n<\/div>\r\n\r\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n     JAVASCRIPT\r\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\r\n<script>\r\n\/\/ \u2500\u2500 DATA : PAYS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst COUNTRIES = [\"Afghanistan\",\"Afrique du Sud\",\"Albanie\",\"Alg\u00e9rie\",\"Allemagne\",\"Angola\",\"Arabie Saoudite\",\"Argentine\",\"Australie\",\"Autriche\",\"B\u00e9nin\",\"Belgique\",\"Br\u00e9sil\",\"Burkina Faso\",\"Burundi\",\"Cambodge\",\"Cameroun\",\"Canada\",\"Cap-Vert\",\"Chine\",\"Chypre\",\"Colombie\",\"Congo-Brazzaville\",\"Congo-Kinshasa\",\"Cor\u00e9e du Sud\",\"C\u00f4te d'Ivoire\",\"Danemark\",\"Djibouti\",\"\u00c9gypte\",\"\u00c9mirats arabes unis\",\"Espagne\",\"\u00c9tats-Unis\",\"\u00c9thiopie\",\"France\",\"Gabon\",\"Gambie\",\"Ghana\",\"Gr\u00e8ce\",\"Guin\u00e9e\",\"Guin\u00e9e-Bissau\",\"Inde\",\"Indon\u00e9sie\",\"Irak\",\"Iran\",\"Irlande\",\"Italie\",\"Japon\",\"Kenya\",\"Laos\",\"Liban\",\"Lib\u00e9ria\",\"Libye\",\"Luxembourg\",\"Madagascar\",\"Malaisie\",\"Malawi\",\"Mali\",\"Maroc\",\"Mauritanie\",\"Mexique\",\"Mozambique\",\"Namibie\",\"Nig\u00e9ria\",\"Norv\u00e8ge\",\"Nouvelle-Z\u00e9lande\",\"Oman\",\"Ouganda\",\"Pakistan\",\"Pays-Bas\",\"P\u00e9rou\",\"Philippines\",\"Pologne\",\"Portugal\",\"Qatar\",\"R\u00e9publique centrafricaine\",\"Roumanie\",\"Royaume-Uni\",\"Russie\",\"Rwanda\",\"S\u00e9n\u00e9gal\",\"Sierra Leone\",\"Singapour\",\"Somalie\",\"Soudan\",\"Soudan du Sud\",\"Su\u00e8de\",\"Suisse\",\"Tanzanie\",\"Tchad\",\"Togo\",\"Tunisie\",\"Turquie\",\"Ukraine\",\"Venezuela\",\"Vietnam\",\"Zambie\",\"Zimbabwe\"];\r\n\r\n\/\/ \u2500\u2500 DATA : PORTS MARITIMES PAR PAYS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n\/\/ Couvre les principaux ports (UN\/LOCODE) de chaque pays c\u00f4tier de la liste.\r\n\/\/ Les pays enclav\u00e9s (sans fa\u00e7ade maritime) ne figurent pas ici : la logique\r\n\/\/ plus bas g\u00e8re leur cas (message + port de transit \u00e0 pr\u00e9ciser).\r\nconst PORTS_BY_COUNTRY = {\r\n  \"Afrique du Sud\": [\"Durban\",\"Cape Town (Le Cap)\",\"Port Elizabeth (Ngqura\/Coega)\",\"Richards Bay\",\"Saldanha Bay\"],\r\n  \"Albanie\": [\"Durr\u00ebs\",\"Vlor\u00eb\"],\r\n  \"Alg\u00e9rie\": [\"Alger\",\"Oran\",\"Annaba\",\"B\u00e9ja\u00efa\",\"Skikda\"],\r\n  \"Allemagne\": [\"Hambourg\",\"Br\u00eame\",\"Bremerhaven\",\"Wilhelmshaven\",\"Rostock\"],\r\n  \"Angola\": [\"Luanda\",\"Lobito\",\"Namibe\"],\r\n  \"Arabie Saoudite\": [\"Jeddah\",\"Dammam\",\"Jubail\",\"Yanbu\"],\r\n  \"Argentine\": [\"Buenos Aires\",\"Rosario\",\"Bah\u00eda Blanca\",\"La Plata\"],\r\n  \"Australie\": [\"Sydney\",\"Melbourne\",\"Brisbane\",\"Fremantle (Perth)\",\"Port Adelaide\"],\r\n  \"B\u00e9nin\": [\"Cotonou\"],\r\n  \"Belgique\": [\"Anvers\",\"Zeebrugge\",\"Gand\"],\r\n  \"Br\u00e9sil\": [\"Santos\",\"Rio de Janeiro\",\"Paranagu\u00e1\",\"Itaja\u00ed\",\"Salvador\"],\r\n  \"Cambodge\": [\"Sihanoukville\"],\r\n  \"Cameroun\": [\"Douala\",\"Kribi\"],\r\n  \"Canada\": [\"Vancouver\",\"Montr\u00e9al\",\"Halifax\",\"Prince Rupert\"],\r\n  \"Cap-Vert\": [\"Praia\",\"Mindelo\"],\r\n  \"Chine\": [\"Shanghai\",\"Shenzhen\",\"Ningbo-Zhoushan\",\"Qingdao\",\"Guangzhou\",\"Tianjin\",\"Hong Kong\",\"Xiamen\"],\r\n  \"Chypre\": [\"Limassol\",\"Larnaca\"],\r\n  \"Colombie\": [\"Carthag\u00e8ne des Indes\",\"Barranquilla\",\"Buenaventura\",\"Santa Marta\"],\r\n  \"Congo-Brazzaville\": [\"Pointe-Noire\"],\r\n  \"Congo-Kinshasa\": [\"Matadi\",\"Boma\"],\r\n  \"Cor\u00e9e du Sud\": [\"Busan\",\"Incheon\",\"Gwangyang\",\"Ulsan\"],\r\n  \"C\u00f4te d'Ivoire\": [\"Abidjan\",\"San Pedro\"],\r\n  \"Danemark\": [\"Copenhague\",\"Aarhus\",\"Esbjerg\"],\r\n  \"Djibouti\": [\"Port de Djibouti\",\"Doraleh\"],\r\n  \"\u00c9gypte\": [\"Alexandrie\",\"Port-Sa\u00efd\",\"Damiette\",\"Suez\"],\r\n  \"\u00c9mirats arabes unis\": [\"Jebel Ali (Duba\u00ef)\",\"Khalifa Port (Abou Dabi)\",\"Sharjah\"],\r\n  \"Espagne\": [\"Alg\u00e9siras\",\"Valence\",\"Barcelone\",\"Bilbao\",\"Vigo\"],\r\n  \"\u00c9tats-Unis\": [\"Los Angeles\",\"Long Beach\",\"New York \/ New Jersey\",\"Savannah\",\"Houston\",\"Oakland\",\"Miami\",\"Seattle\"],\r\n  \"France\": [\"Marseille-Fos\",\"Le Havre\",\"Dunkerque\",\"Bordeaux\",\"Nantes-Saint-Nazaire\",\"Rouen\"],\r\n  \"Gabon\": [\"Libreville\",\"Port-Gentil\"],\r\n  \"Gambie\": [\"Banjul\"],\r\n  \"Ghana\": [\"Tema\",\"Takoradi\"],\r\n  \"Gr\u00e8ce\": [\"Le Pir\u00e9e\",\"Thessalonique\"],\r\n  \"Guin\u00e9e\": [\"Conakry\"],\r\n  \"Guin\u00e9e-Bissau\": [\"Bissau\"],\r\n  \"Inde\": [\"Mumbai (Nhava Sheva \/ JNPT)\",\"Chennai\",\"Mundra\",\"Kolkata\",\"Cochin (Kochi)\",\"Visakhapatnam\"],\r\n  \"Indon\u00e9sie\": [\"Jakarta (Tanjung Priok)\",\"Surabaya\",\"Belawan\"],\r\n  \"Irak\": [\"Umm Qasr\",\"Bassorah\"],\r\n  \"Iran\": [\"Bandar Abbas\",\"Bandar Imam Khomeini\",\"Chabahar\"],\r\n  \"Irlande\": [\"Dublin\",\"Cork\"],\r\n  \"Italie\": [\"G\u00eanes\",\"Gioia Tauro\",\"La Spezia\",\"Trieste\",\"Naples\",\"Livourne\"],\r\n  \"Japon\": [\"Tokyo\",\"Yokohama\",\"Kobe\",\"Nagoya\",\"Osaka\"],\r\n  \"Kenya\": [\"Mombasa\",\"Lamu\"],\r\n  \"Liban\": [\"Beyrouth\",\"Tripoli\"],\r\n  \"Lib\u00e9ria\": [\"Monrovia\"],\r\n  \"Libye\": [\"Tripoli\",\"Benghazi\",\"Misrata\"],\r\n  \"Madagascar\": [\"Toamasina\",\"Mahajanga\"],\r\n  \"Malaisie\": [\"Port Klang\",\"Tanjung Pelepas\",\"Penang\"],\r\n  \"Maroc\": [\"Casablanca\",\"Tanger Med\",\"Agadir\",\"Nador\"],\r\n  \"Mauritanie\": [\"Nouakchott\",\"Nouadhibou\"],\r\n  \"Mexique\": [\"Veracruz\",\"Manzanillo\",\"Altamira\",\"L\u00e1zaro C\u00e1rdenas\"],\r\n  \"Mozambique\": [\"Maputo\",\"Beira\",\"Nacala\"],\r\n  \"Namibie\": [\"Walvis Bay\"],\r\n  \"Nig\u00e9ria\": [\"Lagos (Apapa)\",\"Lagos (Tin Can Island)\",\"Port Harcourt\",\"Onne\"],\r\n  \"Norv\u00e8ge\": [\"Oslo\",\"Bergen\"],\r\n  \"Nouvelle-Z\u00e9lande\": [\"Auckland\",\"Tauranga\"],\r\n  \"Oman\": [\"Salalah\",\"Sohar\",\"Mascate\"],\r\n  \"Pakistan\": [\"Karachi\",\"Port Qasim\",\"Gwadar\"],\r\n  \"Pays-Bas\": [\"Rotterdam\",\"Amsterdam\"],\r\n  \"P\u00e9rou\": [\"Callao\",\"Paita\"],\r\n  \"Philippines\": [\"Manille\",\"Cebu\",\"Subic Bay\"],\r\n  \"Pologne\": [\"Gda\u0144sk\",\"Gdynia\",\"Szczecin\"],\r\n  \"Portugal\": [\"Lisbonne\",\"Sines\",\"Leix\u00f5es (Porto)\",\"Set\u00fabal\"],\r\n  \"Qatar\": [\"Hamad Port\",\"Doha\"],\r\n  \"Roumanie\": [\"Constan\u021ba\"],\r\n  \"Royaume-Uni\": [\"Felixstowe\",\"Southampton\",\"Londres (London Gateway)\",\"Liverpool\"],\r\n  \"Russie\": [\"Saint-P\u00e9tersbourg\",\"Novorossiysk\",\"Vladivostok\"],\r\n  \"S\u00e9n\u00e9gal\": [\"Port Autonome de Dakar\",\"Ziguinchor\"],\r\n  \"Sierra Leone\": [\"Freetown\"],\r\n  \"Singapour\": [\"Port de Singapour (PSA)\"],\r\n  \"Somalie\": [\"Mogadiscio\",\"Berbera\"],\r\n  \"Soudan\": [\"Port-Soudan\"],\r\n  \"Su\u00e8de\": [\"G\u00f6teborg\",\"Stockholm\"],\r\n  \"Tanzanie\": [\"Dar es Salaam\",\"Zanzibar\"],\r\n  \"Togo\": [\"Lom\u00e9\"],\r\n  \"Tunisie\": [\"Rad\u00e8s\",\"Sfax\",\"Bizerte\"],\r\n  \"Turquie\": [\"Istanbul (Ambarl\u0131)\",\"Mersin\",\"Izmir\"],\r\n  \"Ukraine\": [\"Odessa\",\"Tchornomorsk\"],\r\n  \"Venezuela\": [\"La Guaira\",\"Puerto Cabello\"],\r\n  \"Vietnam\": [\"H\u00f4-Chi-Minh-Ville (Cat Lai \/ Cai Mep)\",\"H\u1ea3i Ph\u00f2ng\",\"\u0110\u00e0 N\u1eb5ng\"]\r\n};\r\n\r\n\/\/ \u2500\u2500 COMPOSANT : LISTE D\u00c9ROULANTE RECHERCHABLE \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet allSearchableSelects = [];\r\n\r\nfunction closeAllSearchableSelects(except) {\r\n  allSearchableSelects.forEach(s => { if (s !== except) s.close(); });\r\n}\r\n\r\ndocument.addEventListener('click', (e) => {\r\n  allSearchableSelects.forEach(s => {\r\n    if (!s.container.contains(e.target)) s.close();\r\n  });\r\n});\r\n\r\nclass SearchableSelect {\r\n  constructor(container, opts = {}) {\r\n    this.container = container;\r\n    this.placeholder = opts.placeholder || '\u25bc S\u00e9lectionner...';\r\n    this.emptyText = opts.emptyText || 'Aucun r\u00e9sultat';\r\n    this.onSelect = opts.onSelect || null;\r\n    this.options = [];\r\n    this.value = '';\r\n    this.isDisabled = false;\r\n    this._render();\r\n    allSearchableSelects.push(this);\r\n  }\r\n\r\n  _render() {\r\n    this.container.innerHTML =\r\n      '<button type=\"button\" class=\"ss-trigger\">' +\r\n        '<span class=\"ss-trigger-text placeholder\">' + this.placeholder + '<\/span>' +\r\n        '<i class=\"fas fa-chevron-down ss-chevron\"><\/i>' +\r\n      '<\/button>' +\r\n      '<div class=\"ss-dropdown\">' +\r\n        '<div class=\"ss-search-wrap\"><input type=\"text\" class=\"ss-search\" placeholder=\"Rechercher...\"><\/div>' +\r\n        '<div class=\"ss-options\"><\/div>' +\r\n      '<\/div>';\r\n\r\n    this.trigger = this.container.querySelector('.ss-trigger');\r\n    this.triggerText = this.container.querySelector('.ss-trigger-text');\r\n    this.dropdown = this.container.querySelector('.ss-dropdown');\r\n    this.searchInput = this.container.querySelector('.ss-search');\r\n    this.optionsWrap = this.container.querySelector('.ss-options');\r\n\r\n    this.trigger.addEventListener('click', () => {\r\n      if (this.isDisabled) return;\r\n      const willOpen = !this.dropdown.classList.contains('open');\r\n      closeAllSearchableSelects(this);\r\n      if (willOpen) this.open(); else this.close();\r\n    });\r\n    this.searchInput.addEventListener('click', (e) => e.stopPropagation());\r\n    this.searchInput.addEventListener('input', () => this._renderOptions(this.searchInput.value));\r\n  }\r\n\r\n  open() {\r\n    if (this.isDisabled) return;\r\n    this.dropdown.classList.add('open');\r\n    this.trigger.classList.add('open');\r\n    this._renderOptions('');\r\n    setTimeout(() => this.searchInput.focus(), 20);\r\n  }\r\n\r\n  close() {\r\n    this.dropdown.classList.remove('open');\r\n    this.trigger.classList.remove('open');\r\n    if (this.searchInput) this.searchInput.value = '';\r\n  }\r\n\r\n  setOptions(options) {\r\n    this.options = options || [];\r\n    this.reset();\r\n  }\r\n\r\n  _renderOptions(query) {\r\n    const q = query.trim().toLowerCase();\r\n    const filtered = q ? this.options.filter(o => o.toLowerCase().includes(q)) : this.options;\r\n    if (!filtered.length) {\r\n      this.optionsWrap.innerHTML = '<div class=\"ss-empty\">' + this.emptyText + '<\/div>';\r\n      return;\r\n    }\r\n    this.optionsWrap.innerHTML = filtered.map(o =>\r\n      '<div class=\"ss-option' + (o === this.value ? ' selected' : '') + '\" data-val=\"' + o.replace(\/\"\/g, '&quot;') + '\">' + o + '<\/div>'\r\n    ).join('');\r\n    this.optionsWrap.querySelectorAll('.ss-option').forEach(el => {\r\n      el.addEventListener('click', () => {\r\n        this.select(el.dataset.val);\r\n        this.close();\r\n      });\r\n    });\r\n  }\r\n\r\n  select(value) {\r\n    this.value = value;\r\n    this.triggerText.textContent = value;\r\n    this.triggerText.classList.remove('placeholder');\r\n    this.trigger.classList.remove('error');\r\n    if (this.onSelect) this.onSelect(value);\r\n  }\r\n\r\n  reset() {\r\n    this.value = '';\r\n    this.triggerText.textContent = this.placeholder;\r\n    this.triggerText.classList.add('placeholder');\r\n  }\r\n\r\n  disable(placeholderText) {\r\n    this.isDisabled = true;\r\n    this.container.classList.add('disabled');\r\n    this.options = [];\r\n    if (placeholderText) this.placeholder = placeholderText;\r\n    this.reset();\r\n  }\r\n\r\n  enable(placeholderText) {\r\n    this.isDisabled = false;\r\n    this.container.classList.remove('disabled');\r\n    if (placeholderText) this.placeholder = placeholderText;\r\n    this.reset();\r\n  }\r\n\r\n  markError() { this.trigger.classList.add('error'); }\r\n  clearError() { this.trigger.classList.remove('error'); }\r\n}\r\n\r\n\/\/ \u2500\u2500 INSTANCES : PAYS \/ PORTS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nlet paysOrigineSelect, portOrigineSelect, paysDestinationSelect, portDestinationSelect;\r\n\r\nfunction handleCountryChange(country, portSelect, hiddenId, hintId) {\r\n  document.getElementById(hiddenId).value = '';\r\n  const hint = document.getElementById(hintId);\r\n  const ports = PORTS_BY_COUNTRY[country];\r\n\r\n  if (ports && ports.length) {\r\n    portSelect.enable('\u25bc Choisir un port...');\r\n    portSelect.setOptions(ports);\r\n    hint.innerHTML = '<i class=\"fas fa-check-circle port-count-hint\"><\/i> ' +\r\n      '<span class=\"port-count-hint\">' + ports.length + ' port(s) disponible(s) pour ' + country + '<\/span>';\r\n  } else {\r\n    portSelect.disable('Aucun port maritime \u2014 pays enclav\u00e9');\r\n    hint.innerHTML = '<i class=\"fas fa-exclamation-circle port-warning-hint\"><\/i> ' +\r\n      '<span class=\"port-warning-hint\">' + country + ' n\\'a pas d\\'acc\u00e8s maritime direct \u2014 pr\u00e9cisez un port de transit dans les commentaires.<\/span>';\r\n  }\r\n}\r\n\r\nfunction initGeoSelects() {\r\n  paysOrigineSelect = new SearchableSelect(document.getElementById('combo-pays-origine'), {\r\n    placeholder: '\u25bc Choisir un pays...',\r\n    onSelect: (val) => {\r\n      document.getElementById('val-pays-origine').value = val;\r\n      paysOrigineSelect.clearError();\r\n      handleCountryChange(val, portOrigineSelect, 'val-port-origine', 'hint-port-origine');\r\n    }\r\n  });\r\n\r\n  portOrigineSelect = new SearchableSelect(document.getElementById('combo-port-origine'), {\r\n    placeholder: \"S\u00e9lectionnez d'abord un pays\",\r\n    onSelect: (val) => {\r\n      document.getElementById('val-port-origine').value = val;\r\n      portOrigineSelect.clearError();\r\n    }\r\n  });\r\n  portOrigineSelect.disable(\"S\u00e9lectionnez d'abord un pays\");\r\n\r\n  paysDestinationSelect = new SearchableSelect(document.getElementById('combo-pays-destination'), {\r\n    placeholder: '\u25bc Choisir un pays...',\r\n    onSelect: (val) => {\r\n      document.getElementById('val-pays-destination').value = val;\r\n      paysDestinationSelect.clearError();\r\n      handleCountryChange(val, portDestinationSelect, 'val-port-destination', 'hint-port-destination');\r\n    }\r\n  });\r\n\r\n  portDestinationSelect = new SearchableSelect(document.getElementById('combo-port-destination'), {\r\n    placeholder: \"S\u00e9lectionnez d'abord un pays\",\r\n    onSelect: (val) => {\r\n      document.getElementById('val-port-destination').value = val;\r\n      portDestinationSelect.clearError();\r\n    }\r\n  });\r\n  portDestinationSelect.disable(\"S\u00e9lectionnez d'abord un pays\");\r\n\r\n  paysOrigineSelect.setOptions(COUNTRIES);\r\n  paysDestinationSelect.setOptions(COUNTRIES);\r\n}\r\n\r\n\/\/ \u2500\u2500 DATA : CONDITIONNEMENT PAR SERVICE (inchang\u00e9) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nconst SERVICE_DATA = {\r\n  \"Fret Maritime\": {\r\n    types: [\"Conteneur 20 Dry (TEU)\",\"Conteneur 40 Dry (FEU)\",\"Conteneur 20 Reefer\",\"Conteneur 40 HC\",\"Vrac (hors conteneur)\"],\r\n    units: [\"Tonnes m\u00e9triques (T)\",\"M\u00e8tres cubes (m\u00b3)\",\"Nombre de conteneurs\",\"Kilogrammes (kg)\"]\r\n  },\r\n  \"Fret A\u00e9rien\": {\r\n    types: [\"Colis standard\",\"Palette a\u00e9rienne (ULD)\",\"Hors-gabarit \/ lourd\"],\r\n    units: [\"Kilogrammes (kg)\",\"Poids utilis\u00e9 pour calcul transport (kg)\",\"Dimensions L\u00d7l\u00d7H (cm)\",\"Nombre de colis\"]\r\n  },\r\n  \"Transport Routier\": {\r\n    types: [\"FTL \u2014 Camion complet\",\"LTL \u2014 Groupage route\",\"Plateau \/ hors-gabarit\"],\r\n    units: [\"Tonnes m\u00e9triques (T)\",\"M\u00e8tres cubes (m\u00b3)\",\"Palettes Europe (80\u00d7120 cm)\",\"Nombre de palettes\"]\r\n  },\r\n  \"Groupage\": {\r\n    types: [\"LCL Maritime\",\"LTL Routier\",\"Groupage A\u00e9rien\"],\r\n    units: [\"Kilogrammes (kg)\",\"M\u00e8tres cubes (m\u00b3)\",\"Nombre de colis \/ palettes\"]\r\n  },\r\n  \"Multimodal\": {\r\n    types: [\"Maritime + Routier\",\"A\u00e9rien + Routier\",\"Maritime + Ferroviaire\",\"Combinaison personnalis\u00e9e\"],\r\n    units: [\"Tonnes m\u00e9triques (T)\",\"M\u00e8tres cubes (m\u00b3)\",\"Conteneur (TEU \/ FEU)\",\"Palettes\"]\r\n  },\r\n  \"Entreposage\": {\r\n    types: [\"Stockage palette\",\"Stockage en vrac\",\"Chambre froide\",\"Zone sous douane\"],\r\n    units: [\"Surface (m\u00b2)\",\"Volume (m\u00b3)\",\"Tonnes (T)\",\"Dur\u00e9e < 1 mois\",\"Dur\u00e9e 1\u20133 mois\",\"Dur\u00e9e 3\u20136 mois\",\"Dur\u00e9e + 6 mois\"]\r\n  },\r\n  \"D\u00e9douanement\": {\r\n    types: [\"Import\",\"Export\",\"Transit\",\"R\u00e9gime suspensif\"],\r\n    units: [\"Valeur d\u00e9clar\u00e9e en USD\",\"Valeur d\u00e9clar\u00e9e en EUR\",\"Valeur d\u00e9clar\u00e9e en XOF (FCFA)\",\"Poids brut (kg)\",\"Nb de lignes tarifaires (LT)\"]\r\n  }\r\n};\r\n\r\n\/\/ \u2500\u2500 INIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nwindow.onload = function() {\r\n  initGeoSelects();\r\n  updateProgress(1);\r\n};\r\n\r\n\/\/ \u2500\u2500 STEP NAVIGATION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction changeStep(targetStep) {\r\n  const currentEl = document.querySelector('.form-step.active');\r\n  const currentNum = parseInt(currentEl.id.replace('step',''));\r\n\r\n  \/\/ Validate on forward\r\n  if (targetStep > currentNum) {\r\n    const required = currentEl.querySelectorAll('[required]');\r\n    let valid = true;\r\n    required.forEach(f => {\r\n      if (!f.value) {\r\n        f.classList.add('error');\r\n        valid = false;\r\n      } else {\r\n        f.classList.remove('error');\r\n      }\r\n    });\r\n\r\n    if (currentNum === 2) {\r\n      \/\/ Service obligatoire\r\n      if (!document.getElementById('serviceVal').value) {\r\n        alert('Veuillez s\u00e9lectionner un service PortaLis.');\r\n        return;\r\n      }\r\n      \/\/ Pays \/ Ports obligatoires (relation d\u00e9pendante)\r\n      const paysO = document.getElementById('val-pays-origine').value;\r\n      const paysD = document.getElementById('val-pays-destination').value;\r\n      const portO = document.getElementById('val-port-origine').value;\r\n      const portD = document.getElementById('val-port-destination').value;\r\n\r\n      let geoOk = true;\r\n      if (!paysO) { paysOrigineSelect.markError(); geoOk = false; }\r\n      if (!paysD) { paysDestinationSelect.markError(); geoOk = false; }\r\n      if (!portOrigineSelect.isDisabled && !portO) { portOrigineSelect.markError(); geoOk = false; }\r\n      if (!portDestinationSelect.isDisabled && !portD) { portDestinationSelect.markError(); geoOk = false; }\r\n\r\n      if (!geoOk) {\r\n        alert(\"Veuillez s\u00e9lectionner un pays et un port pour l'origine et pour la destination.\");\r\n        document.getElementById('combo-pays-origine').scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n        return;\r\n      }\r\n    }\r\n\r\n    if (!valid) {\r\n      currentEl.querySelector('.error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n      return;\r\n    }\r\n  }\r\n\r\n  \/\/ Switch steps\r\n  document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));\r\n  document.getElementById('step' + targetStep).classList.add('active');\r\n\r\n  updateProgress(targetStep);\r\n\r\n  \/\/ Scroll to top of form on mobile\r\n  if (window.innerWidth < 768) {\r\n    document.querySelector('.form-card').scrollIntoView({ behavior: 'smooth' });\r\n  }\r\n}\r\n\r\n\/\/ \u2500\u2500 PROGRESS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction updateProgress(step) {\r\n  const pct = (step \/ 4) * 100;\r\n  document.getElementById('progressFill').style.width = pct + '%';\r\n\r\n  document.querySelectorAll('.step-item').forEach(item => {\r\n    const n = parseInt(item.dataset.step);\r\n    item.classList.remove('active','done');\r\n    if (n === step) item.classList.add('active');\r\n    else if (n < step) item.classList.add('done');\r\n  });\r\n}\r\n\r\n\/\/ \u2500\u2500 SERVICE SELECTION \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction selectService(card, serviceName) {\r\n  document.querySelectorAll('.service-card').forEach(c => c.classList.remove('selected'));\r\n  card.classList.add('selected');\r\n  document.getElementById('serviceVal').value = serviceName;\r\n\r\n  \/\/ Show\/hide \"Autre\" text field\r\n  const autreGroup = document.getElementById('autreServiceGroup');\r\n  autreGroup.style.display = serviceName === 'Autre' ? 'block' : 'none';\r\n\r\n  \/\/ Update dynamic volume fields on step 3\r\n  const volDiv = document.getElementById('volumeDynamic');\r\n  if (SERVICE_DATA[serviceName]) {\r\n    const data = SERVICE_DATA[serviceName];\r\n    document.getElementById('volumeServiceName').textContent = serviceName;\r\n    fillSelect('typeConditionnement', data.types);\r\n    fillSelect('uniteMesure', data.units);\r\n    volDiv.classList.add('visible');\r\n  } else {\r\n    volDiv.classList.remove('visible');\r\n  }\r\n}\r\n\r\nfunction fillSelect(id, options) {\r\n  const sel = document.getElementById(id);\r\n  sel.innerHTML = '<option value=\"\">\u25bc S\u00e9lectionner...<\/option>';\r\n  options.forEach(o => {\r\n    const opt = document.createElement('option');\r\n    opt.value = o; opt.textContent = o;\r\n    sel.appendChild(opt);\r\n  });\r\n}\r\n\r\n\/\/ \u2500\u2500 RADIO PILLS \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction selectRadio(label, fieldName, value) {\r\n  \/\/ Deselect siblings\r\n  label.closest('.radio-group').querySelectorAll('.radio-option').forEach(l => l.classList.remove('selected'));\r\n  label.classList.add('selected');\r\n  \/\/ Set hidden input\r\n  const hiddenMap = {\r\n    'Type_Client': 'typeClientVal',\r\n    'Conditions_Fret': 'condFretVal',\r\n    'Urgence': 'urgenceVal',\r\n    'Flexibilite': 'flexibiliteVal',\r\n    'Budget': 'budgetVal',\r\n    'Frequence': 'frequenceVal',\r\n  };\r\n  const hid = hiddenMap[fieldName];\r\n  if (hid) document.getElementById(hid).value = value;\r\n}\r\n\r\n\/\/ \u2500\u2500 UPLOAD FEEDBACK \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nfunction markUploaded(btnId, input) {\r\n  if (input.files && input.files[0]) {\r\n    const btn = document.getElementById(btnId);\r\n    btn.classList.add('uploaded');\r\n    btn.innerHTML = '<i class=\"fas fa-check\"><\/i> ' + input.files[0].name.substring(0, 18) + '...';\r\n  }\r\n}\r\n\r\n\/\/ \u2500\u2500 SUBMIT \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\nasync function handleSubmit(e) {\r\n  e.preventDefault(); \/\/ On g\u00e8re toujours l'envoi nous-m\u00eames (AJAX), jamais de rechargement de page.\r\n\r\n  const consent = document.getElementById('consentCheck');\r\n  const errorBox = document.getElementById('submitError');\r\n  errorBox.classList.remove('show');\r\n\r\n  if (!consent.checked) {\r\n    consent.closest('.consent-box').style.border = '1.5px solid var(--error)';\r\n    consent.closest('.consent-box').scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n    return;\r\n  }\r\n\r\n  \/\/ Garde-fou final : pays\/ports toujours renseign\u00e9s (au cas o\u00f9 l'\u00e9tape 2\r\n  \/\/ aurait \u00e9t\u00e9 contourn\u00e9e)\r\n  const paysO = document.getElementById('val-pays-origine').value;\r\n  const paysD = document.getElementById('val-pays-destination').value;\r\n  const portO = document.getElementById('val-port-origine').value;\r\n  const portD = document.getElementById('val-port-destination').value;\r\n  const portOreq = !portOrigineSelect.isDisabled;\r\n  const portDreq = !portDestinationSelect.isDisabled;\r\n\r\n  if (!paysO || !paysD || (portOreq && !portO) || (portDreq && !portD)) {\r\n    changeStep(2);\r\n    alert(\"Merci de compl\u00e9ter le pays et le port d'origine et de destination avant l'envoi.\");\r\n    return;\r\n  }\r\n\r\n  const form = document.getElementById('devisForm');\r\n  const submitBtn = document.getElementById('submitBtn');\r\n  const originalBtnHTML = submitBtn.innerHTML;\r\n  submitBtn.disabled = true;\r\n  submitBtn.innerHTML = '<i class=\"fas fa-spinner fa-spin\"><\/i> Envoi en cours...';\r\n\r\n  const nomComplet = form.querySelector('[name=\"Nom_Complet\"]').value.trim();\r\n\r\n  try {\r\n    const formData = new FormData(form);\r\n    const response = await fetch('https:\/\/formsubmit.co\/ajax\/infokeurguidigital@gmail.com', {\r\n      method: 'POST',\r\n      body: formData,\r\n      headers: { 'Accept': 'application\/json' }\r\n    });\r\n\r\n    if (!response.ok) throw new Error('R\u00e9ponse serveur invalide');\r\n\r\n    \/\/ G\u00e9n\u00e8re une r\u00e9f\u00e9rence de dossier lisible\r\n    const ref = 'PTL-' + new Date().getFullYear() + '-' + Math.floor(1000 + Math.random() * 9000);\r\n\r\n    document.getElementById('successName').textContent = nomComplet ? ', ' + nomComplet.split(' ')[0] : '';\r\n    document.getElementById('successRef').textContent = 'R\u00e9f\u00e9rence dossier : ' + ref;\r\n\r\n    form.style.display = 'none';\r\n    document.getElementById('successScreen').classList.add('show');\r\n    updateProgress(4);\r\n    window.scrollTo({ top: 0, behavior: 'smooth' });\r\n\r\n  } catch (err) {\r\n    console.error('Erreur envoi formulaire :', err);\r\n    submitBtn.disabled = false;\r\n    submitBtn.innerHTML = originalBtnHTML;\r\n    errorBox.classList.add('show');\r\n    errorBox.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n  }\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Demande de Devis \u2014 Services PortaLis Offre personnalis\u00e9e sous 48h ouvr\u00e9es PORTALIS Transport &#038; Logistique Multimodale Gratuit Sans engagement R\u00e9ponse 48h WhatsApp Besoin d&rsquo;aide ? 1 Profil 2 Trajet 3 Marchandise 4 Validation Demande envoy\u00e9e avec succ\u00e8s ! Merci pour votre&#8230;<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-12034","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/12034","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/comments?post=12034"}],"version-history":[{"count":86,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/12034\/revisions"}],"predecessor-version":[{"id":14998,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/12034\/revisions\/14998"}],"wp:attachment":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/media?parent=12034"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}