\n\n\n \n \n
MapLibre \u2013 Trac-World (UI Layers am\u00e9lior\u00e9e)<\/title>\n\n <link href=\"https:\/\/unpkg.com\/maplibre-gl@5.13.0\/dist\/maplibre-gl.css\" rel=\"stylesheet\" \/>\n <script src=\"https:\/\/unpkg.com\/maplibre-gl@5.13.0\/dist\/maplibre-gl.js\"><\/script>\n <script src=\"https:\/\/unpkg.com\/@turf\/turf@6.5.0\/turf.min.js\"><\/script>\n\n <style>\n :root{\n --tw-navy: #0b1f46;\n --tw-navy-2:#103061;\n --tw-gold: #f6c21a;\n --tw-orange:#ff7a00;\n --tw-ice: #eaf1ff;\n\n --page-bg: #f3f6fb;\n --page-bg-2: #eef2f8;\n\n --card: rgba(255,255,255,.86);\n --card-strong: rgba(255,255,255,.94);\n --glass: blur(14px) saturate(160%);\n --text: #0f172a;\n --text-soft: #64748b;\n\n --quai: var(--tw-gold);\n --quai-soft: rgba(246,194,26,.20);\n --quai-glow: rgba(246,194,26,.55);\n\n --terrain: var(--tw-navy);\n --terrain-soft: rgba(11,31,70,.18);\n --terrain-glow: rgba(11,31,70,.45);\n\n --proj: #ff8a1f;\n --proj-soft: rgba(255,138,31,.18);\n --proj-glow: rgba(255,138,31,.50);\n\n --radius-xl: 22px;\n --radius-lg: 14px;\n --radius-md: 12px;\n --shadow-xl: 0 22px 60px rgba(15, 23, 42, .16);\n --shadow-lg: 0 12px 34px rgba(15, 23, 42, .12);\n --shadow-md: 0 10px 24px rgba(15, 23, 42, .10);\n --stroke: rgba(15, 23, 42, .08);\n --stroke-2: rgba(15, 23, 42, .10);\n --font: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;\n\n --ease: cubic-bezier(.2,.8,.2,1);\n }\n\n html, body { height: 100%; }\n body{\n margin: 0;\n font-family: var(--font);\n background: radial-gradient(900px 420px at 15% 0%, #dfe9ff 0%, transparent 60%),\n radial-gradient(900px 420px at 110% 0%, #e7f0ff 0%, transparent 55%),\n linear-gradient(180deg, var(--page-bg), var(--page-bg-2));\n color: var(--text);\n }\n\n .wrap{\n position: relative;\n margin: clamp(10px, 2vw, 18px);\n border-radius: var(--radius-xl);\n overflow: hidden;\n box-shadow: var(--shadow-xl);\n outline: 1px solid var(--stroke);\n background:\n radial-gradient(1100px 600px at 10% -10%, #dfe9ff 0%, transparent 60%),\n radial-gradient(900px 500px at 110% 0%, #e7f0ff 0%, transparent 55%),\n linear-gradient(180deg, var(--page-bg), var(--page-bg-2));\n isolation: isolate;\n }\n\n #map{\n height: min(78vh, 860px);\n width: 100%;\n background: #e5e7eb;\n }\n\n .wrap::after{\n content:\"\";\n position:absolute;\n inset:0;\n pointer-events:none;\n background:\n radial-gradient(120% 120% at 50% 50%, transparent 70%, rgba(15,23,42,.08) 100%),\n linear-gradient(180deg, rgba(255,255,255,.80), transparent 22%, transparent 78%, rgba(15,23,42,.06));\n z-index: 3;\n }\n\n .badge{\n position:absolute;\n z-index:10;\n top:14px;\n left:14px;\n display:flex;\n align-items:center;\n gap:10px;\n background: var(--card);\n backdrop-filter: var(--glass);\n border: 1px solid var(--stroke);\n padding: 10px 12px;\n border-radius: 999px;\n box-shadow: var(--shadow-lg);\n }\n .badge .dot{\n width:10px;height:10px;border-radius:999px;\n background: linear-gradient(135deg, var(--tw-gold), #ffdd6a);\n box-shadow: 0 0 0 4px rgba(246,194,26,.18), 0 0 18px rgba(246,194,26,.45);\n }\n .badge .title{\n font-weight:950;\n font-size:14px;\n color: var(--tw-navy);\n line-height:1.1;\n letter-spacing:.2px;\n }\n .badge .sub{\n font-size:12px;\n font-weight:750;\n color:var(--text-soft);\n margin-top:2px;\n }\n\n .map-mask{\n position:absolute;\n inset:0;\n z-index:20;\n display:flex;\n flex-direction:column;\n justify-content:center;\n align-items:center;\n gap:12px;\n background: rgba(243,246,251,.95);\n backdrop-filter: blur(8px);\n transition: opacity .5s ease, visibility .5s ease;\n opacity: 1;\n visibility: visible;\n }\n .map-mask.hide{\n opacity:0;\n visibility:hidden;\n pointer-events:none;\n }\n .spinner{\n width:46px;height:46px;border-radius:999px;\n border:4px solid rgba(15,23,42,.12);\n border-top-color: var(--tw-gold);\n animation: spin 1s linear infinite;\n }\n @keyframes spin{ to{ transform: rotate(360deg); } }\n .mask-text{\n font-size:13px;\n font-weight:950;\n color: var(--tw-navy);\n letter-spacing:.4px;\n }\n\n .chip{\n position:absolute;\n z-index:10;\n bottom:14px;\n left:14px;\n background: var(--card-strong);\n border:1px solid var(--stroke);\n backdrop-filter: var(--glass);\n padding:10px 12px;\n border-radius: var(--radius-lg);\n box-shadow: var(--shadow-lg);\n font-size:12px;\n color: var(--text-soft);\n }\n .chip b{ color: var(--text); font-weight:950; }\n\n .panel{\n position:absolute;\n z-index:12;\n top:14px;\n right:14px;\n background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82));\n backdrop-filter: var(--glass);\n border:1px solid var(--stroke);\n box-shadow: var(--shadow-lg);\n border-radius: 18px;\n overflow: hidden;\n }\n .panel-header{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:10px;\n padding: 12px 12px 10px;\n border-bottom:1px solid rgba(15,23,42,.06);\n background: radial-gradient(700px 180px at 20% 0%, var(--tw-ice) 0%, transparent 55%);\n }\n .panel-title{\n display:flex; align-items:center; gap:10px;\n min-width: 0;\n }\n .panel-title .icon{\n width:34px; height:34px; border-radius:12px;\n display:flex; align-items:center; justify-content:center;\n color: var(--tw-navy);\n font-weight:950;\n letter-spacing:.4px;\n user-select:none;\n }\n .panel-title .txt{\n min-width:0;\n }\n .panel-title h3{\n margin:0;\n font-size:13px;\n font-weight:950;\n color: var(--tw-navy);\n letter-spacing:.2px;\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n }\n .panel-title p{\n margin:2px 0 0;\n font-size:12px;\n font-weight:750;\n color: var(--text-soft);\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n }\n\n .panel-actions{\n display:flex; gap:8px; flex-shrink:0;\n }\n\n .btn{\n border:1px solid rgba(15,23,42,.10);\n background: rgba(255,255,255,.88);\n backdrop-filter: blur(10px);\n border-radius: 12px;\n padding: 8px 10px;\n font-size:12px;\n font-weight:900;\n color: var(--tw-navy);\n cursor:pointer;\n transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);\n box-shadow: 0 8px 18px rgba(15,23,42,.08);\n user-select:none;\n }\n .btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(15,23,42,.10); }\n .btn:active{ transform: translateY(0px) scale(.98); }\n .btn.secondary{\n background: rgba(255,255,255,.72);\n color: rgba(11,31,70,.85);\n }\n\n .panel-body{\n padding: 10px 12px 12px;\n display:grid;\n gap:10px;\n }\n\n .layer-row{\n display:flex;\n align-items:center;\n justify-content:space-between;\n gap:10px;\n padding: 10px 10px;\n background: rgba(255,255,255,.78);\n border: 1px solid rgba(15,23,42,.08);\n border-radius: 14px;\n box-shadow: 0 10px 20px rgba(15,23,42,.06);\n transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);\n }\n .layer-row:hover{\n transform: translateY(-1px);\n box-shadow: 0 12px 26px rgba(15,23,42,.08);\n border-color: rgba(15,23,42,.12);\n }\n\n .layer-left{ display:flex; align-items:center; gap:10px; min-width:0; }\n .swatch{\n width:34px; height:34px; border-radius: 12px;\n border: 1px solid rgba(15,23,42,.10);\n box-shadow: inset 0 0 0 4px rgba(255,255,255,.35), 0 10px 18px rgba(15,23,42,.08);\n flex-shrink:0;\n position:relative;\n }\n .swatch::after{\n content:\"\";\n position:absolute; inset:-3px;\n border-radius: 14px;\n opacity:.55;\n filter: blur(10px);\n z-index:-1;\n }\n\n .layer-meta{ min-width:0; }\n .layer-meta .name{\n font-size:12.5px;\n font-weight:950;\n color: var(--tw-navy);\n letter-spacing:.2px;\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n margin:0;\n }\n .layer-meta .desc{\n margin:3px 0 0;\n font-size:12px;\n font-weight:750;\n color: var(--text-soft);\n white-space:nowrap;\n overflow:hidden;\n text-overflow:ellipsis;\n }\n\n .layer-right{\n display:flex; align-items:center; gap:10px; flex-shrink:0;\n }\n\n .pill{\n font-size:11px;\n font-weight:950;\n padding: 6px 8px;\n border-radius: 999px;\n border:1px solid rgba(15,23,42,.10);\n background: rgba(255,255,255,.75);\n color: rgba(11,31,70,.80);\n }\n\n .toggle{\n width: 46px; height: 28px;\n border-radius: 999px;\n border:1px solid rgba(15,23,42,.12);\n background: rgba(15,23,42,.08);\n position:relative;\n cursor:pointer;\n box-shadow: inset 0 1px 0 rgba(255,255,255,.45);\n transition: background .18s var(--ease), border-color .18s var(--ease);\n user-select:none;\n }\n .toggle::after{\n content:\"\";\n position:absolute;\n top:3px; left:3px;\n width: 22px; height: 22px;\n border-radius: 999px;\n background: rgba(255,255,255,.95);\n box-shadow: 0 10px 18px rgba(15,23,42,.14);\n transition: transform .18s var(--ease);\n }\n .toggle[data-on=\"true\"]{\n background: rgba(246,194,26,.35);\n border-color: rgba(246,194,26,.45);\n }\n .toggle[data-on=\"true\"]::after{ transform: translateX(18px); }\n\n .hint{\n font-size:12px;\n font-weight:750;\n color: var(--text-soft);\n margin: 2px 0 0;\n padding: 0 2px;\n }\n\n .panel-collapsed .panel-body{ display:none; }\n .panel-collapsed .hint{ display:none; }\n .panel-collapse-btn{ display:inline-flex; }\n\n .ml-popup{ font-family: var(--font); min-width: 240px; }\n .ml-popup .head{\n display:flex; align-items:center; gap:10px;\n padding:10px 12px;\n background: radial-gradient(520px 140px at 20% 0%, rgba(234,241,255,.95) 0%, rgba(255,255,255,.92) 60%);\n border-bottom:1px solid rgba(15,23,42,.06);\n }\n .ml-popup .dot{ width:10px; height:10px; border-radius:999px; }\n .ml-popup .title{ font-weight:950; font-size:14px; color: var(--tw-navy); letter-spacing:.2px; }\n .ml-popup .sub{ font-size:12px; font-weight:800; color:#64748b; margin-top:2px; }\n\n .ml-popup .body{\n padding:10px 12px 12px;\n display:grid;\n grid-template-columns: 1fr;\n gap:8px;\n font-size:12.5px;\n }\n .ml-popup .item{\n background:#fff;\n border:1px solid rgba(15,23,42,.08);\n padding:9px 10px;\n border-radius:12px;\n display:flex;\n justify-content:space-between;\n gap:10px;\n box-shadow: 0 8px 18px rgba(15,23,42,.06);\n }\n .ml-popup .item span{ color:#0f172a; }\n .ml-popup .item b{ color: var(--tw-navy); font-weight:950; white-space:nowrap; }\n\n .maplibregl-popup-content{\n border-radius: 18px !important;\n padding:0 !important;\n background: rgba(255,255,255,.96) !important;\n box-shadow: 0 18px 52px rgba(15,23,42,.18) !important;\n border:1px solid rgba(15,23,42,.08) !important;\n backdrop-filter: blur(10px) saturate(140%);\n overflow: hidden;\n }\n .maplibregl-popup-tip{ border-top-color: rgba(255,255,255,.96) !important; }\n\n @media (max-width: 768px){\n .panel{ display:none !important; }\n\n .maplibregl-popup.popup-2025.mobile-full{\n position: absolute !important;\n left: 12px !important; right: 12px !important;\n bottom: 120px !important; top: auto !important;\n transform: none !important;\n max-width: none !important;\n width: auto !important;\n z-index: 9999;\n }\n .maplibregl-popup.popup-2025.mobile-full .maplibregl-popup-content{\n width: 100% !important;\n max-width: none !important;\n max-height: calc(62vh) !important;\n overflow: auto !important;\n border-radius: 18px !important;\n }\n .maplibregl-popup.popup-2025.mobile-full .maplibregl-popup-tip{ display: none !important; }\n .maplibregl-popup.popup-2025.mobile-full .maplibregl-popup-close-button{\n font-size: 22px; padding: 10px 12px;\n }\n\n .maplibregl-ctrl-attrib.maplibregl-compact-show{\n visibility:hidden !important;\n }\n }\n <\/style>\n<\/head>\n\n<body>\n <div class=\"wrap js-map-onview\">\n <div class=\"map-mask\" aria-hidden=\"true\">\n <div class=\"spinner\"><\/div>\n <div class=\"mask-text\">Chargement\u2026<\/div>\n <\/div>\n\n <div class=\"badge\">\n <span class=\"dot\"><\/span>\n <div>\n <div class=\"title\">Trac-World<\/div>\n <div class=\"sub\">Terminal maritime & terrain<\/div>\n <\/div>\n <\/div>\n\n <div class=\"panel panel-collapsed\" id=\"layerPanel\">\n <div class=\"panel-header\">\n <div class=\"panel-title\">\n <div class=\"icon\">TW<\/div>\n <\/div>\n <div class=\"panel-actions\">\n <button class=\"btn secondary panel-collapse-btn\" id=\"btnCollapse\" type=\"button\">R\u00e9duire<\/button>\n <button class=\"btn\" id=\"btnReset\" type=\"button\">R\u00e9initialiser<\/button>\n <\/div>\n <\/div>\n <div class=\"panel-body\">\n <div class=\"layer-row\" data-layer=\"terrain\">\n <div class=\"layer-left\">\n <div class=\"swatch\" style=\"background: linear-gradient(135deg, rgba(11,31,70,.95), rgba(16,48,97,.85));\">\n <span style=\"position:absolute; inset:0; border-radius:12px; box-shadow: 0 0 0 4px rgba(11,31,70,.10) inset;\"><\/span>\n <\/div>\n <div class=\"layer-meta\">\n <p class=\"name\">Terrain Trac-World<\/p>\n <\/div>\n <\/div>\n <div class=\"layer-right\">\n <span class=\"pill\" id=\"countTerrain\">1<\/span>\n <div class=\"toggle\" role=\"switch\" aria-checked=\"true\" tabindex=\"0\" data-on=\"true\" data-target=\"terrain\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"layer-row\" data-layer=\"quai\">\n <div class=\"layer-left\">\n <div class=\"swatch\" style=\"background: linear-gradient(135deg, rgba(246,194,26,.95), rgba(255,221,106,.88));\">\n <span style=\"position:absolute; inset:0; border-radius:12px; box-shadow: 0 0 0 4px rgba(246,194,26,.14) inset;\"><\/span>\n <\/div>\n <div class=\"layer-meta\">\n <p class=\"name\">Terminal maritime<\/p>\n <\/div>\n <\/div>\n <div class=\"layer-right\">\n <span class=\"pill\" id=\"countQuai\">2<\/span>\n <div class=\"toggle\" role=\"switch\" aria-checked=\"true\" tabindex=\"0\" data-on=\"true\" data-target=\"quai\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"layer-row\" data-layer=\"projet\">\n <div class=\"layer-left\">\n <div class=\"swatch\" style=\"background: linear-gradient(135deg, rgba(255,138,31,.95), rgba(255,198,120,.85));\">\n <span style=\"position:absolute; inset:0; border-radius:12px; box-shadow: 0 0 0 4px rgba(255,138,31,.12) inset;\"><\/span>\n <\/div>\n <div class=\"layer-meta\">\n <p class=\"name\">Zone projet<\/p>\n <\/div>\n <\/div>\n <div class=\"layer-right\">\n <span class=\"pill\" id=\"countProjet\">1<\/span>\n <div class=\"toggle\" role=\"switch\" aria-checked=\"true\" tabindex=\"0\" data-on=\"true\" data-target=\"projet\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"layer-row\" data-layer=\"features\">\n <div class=\"layer-left\">\n <div class=\"swatch\" style=\"background: linear-gradient(135deg, rgba(11,31,70,.20), rgba(246,194,26,.28));\">\n <span style=\"position:absolute; inset:0; border-radius:12px; box-shadow: 0 0 0 4px rgba(11,31,70,.07) inset;\"><\/span>\n <\/div>\n <div class=\"layer-meta\">\n <p class=\"name\">B\u00e2tisses<\/p>\n <\/div>\n <\/div>\n <div class=\"layer-right\">\n <span class=\"pill\" id=\"countFeat\">3<\/span>\n <div class=\"toggle\" role=\"switch\" aria-checked=\"true\" tabindex=\"0\" data-on=\"true\" data-target=\"features\"><\/div>\n <\/div>\n <\/div>\n\n <div class=\"hint\">Clique sur une zone pour voir les d\u00e9tails.<\/div>\n <\/div>\n <\/div>\n\n <div class=\"chip\">\n <span>Clique sur une zone pour voir les d\u00e9tails<\/span>\n <\/div>\n\n <div id=\"map\"><\/div>\n <\/div>\n\n <script>\n (function(){\n let started = false;\n\n const currentLang = (document.documentElement.getAttribute(\"lang\") || \"fr\").toLowerCase();\n const LANG = currentLang.startsWith(\"en\") ? \"en\" : \"fr\";\n\n const I18N = {\n fr: {\n loading: \"Chargement\u2026\",\n badgeSub: \"Terminaux\",\n panelTitle: \"Terminaux & projets\",\n panelSubtitle: \"Affichage des zones & rep\u00e8res\",\n collapse: \"R\u00e9duire\",\n open: \"Ouvrir\",\n reset: \"R\u00e9initialiser\",\n terrainName: \"Terminal Trac-World\",\n quaiName: \"Terminal maritime\",\n projetName: \"Zone projet\",\n featuresName: \"B\u00e2tisses\",\n hint: \"Clique sur une zone pour voir les d\u00e9tails.\",\n chip: \"Clique sur une zone pour voir les d\u00e9tails\",\n popupPort: \"Infrastructure portuaire\",\n popupProject: \"Zone de projet\",\n popupSite: \"Site Trac-World\",\n popupInfo: \"Info\",\n popupComing: \"D\u00e9tails \u00e0 venir\",\n terminalMaritime: \"Terminal Maritime\",\n terrain: \"Terminal Trac-World\",\n projet: \"Projet d\u2019agrandissement - Construction 2027\",\n balance: \"Balance publique certifi\u00e9e\",\n ciment: \"Terminal Ciment\",\n capacite: \"Capacit\u00e9\",\n levage: \"Levage\",\n navigation: \"Navigation\",\n profondeur: \"Profondeur\",\n terrainLabel: \"Superficie\",\n batiments: \"B\u00e2timents\",\n hauteur: \"Hauteur\",\n securite: \"S\u00e9curit\u00e9\",\n ctpat: \"C-TPAT\",\n cautionne: \"Cautionn\u00e9\",\n statut: \"Statut\",\n horizon: \"Horizon\",\n planifie: \"Planifi\u00e9\",\n accredite: \"Accr\u00e9dit\u00e9\",\n courtLong: \"Court & long terme\",\n avrDec: \"Avr\u2013D\u00e9c\"\n },\n en: {\n loading: \"Loading\u2026\",\n badgeSub: \"Terminals\",\n panelTitle: \"Terminals & projects\",\n panelSubtitle: \"Area & landmark display\",\n collapse: \"Collapse\",\n open: \"Open\",\n reset: \"Reset\",\n terrainName: \"Trac-World Terminal\",\n quaiName: \"Maritime Terminal\",\n projetName: \"Project Area\",\n featuresName: \"Buildings\",\n hint: \"Click an area to view details.\",\n chip: \"Click an area to view details\",\n popupPort: \"Port infrastructure\",\n popupProject: \"Project area\",\n popupSite: \"Trac-World site\",\n popupInfo: \"Info\",\n popupComing: \"Details coming soon\",\n terminalMaritime: \"Maritime Terminal\",\n terrain: \"Trac-World Terminal\",\n projet: \"Expansion Project - Construction 2027\",\n balance: \"Certified Public Scale\",\n ciment: \"Cement Terminal\",\n capacite: \"Capacity\",\n levage: \"Lifting\",\n navigation: \"Navigation\",\n profondeur: \"Depth\",\n terrainLabel: \"Area\",\n batiments: \"Buildings\",\n hauteur: \"Height\",\n securite: \"Security\",\n ctpat: \"C-TPAT\",\n cautionne: \"Bonded\",\n statut: \"Status\",\n horizon: \"Timeline\",\n planifie: \"Planned\",\n accredite: \"Accredited\",\n courtLong: \"Short & long term\",\n avrDec: \"Apr\u2013Dec\"\n }\n };\n\n const T = I18N[LANG];\n\n function setText(selector, value){\n const el = document.querySelector(selector);\n if (el) el.textContent = value;\n }\n\n function applyUiTranslations(){\n setText(\".mask-text\", T.loading);\n setText(\".badge .sub\", T.badgeSub);\n setText(\"#panelSubtitle\", T.panelSubtitle);\n setText(\"#btnReset\", T.reset);\n setText(\".chip span\", T.chip);\n setText(\".hint\", T.hint);\n\n const rows = document.querySelectorAll(\".layer-row\");\n if (rows[0]){\n rows[0].querySelector(\".name\").textContent = T.terrainName;\n }\n if (rows[1]){\n rows[1].querySelector(\".name\").textContent = T.quaiName;\n }\n if (rows[2]){\n rows[2].querySelector(\".name\").textContent = T.projetName;\n }\n if (rows[3]){\n rows[3].querySelector(\".name\").textContent = T.featuresName;\n }\n }\n\n applyUiTranslations();\n\n function initMap(){\n if (started) return;\n started = true;\n\n const mask = document.querySelector(\".map-mask\");\n const styleUrl = \"https:\/\/basemaps.cartocdn.com\/gl\/positron-gl-style\/style.json\";\n const isMobile = window.matchMedia(\"(max-width: 768px)\").matches;\n\n const map = new maplibregl.Map({\n container: \"map\",\n style: styleUrl,\n center: [-73.5920, 45.4048],\n zoom: 12.35,\n pitch: 58,\n bearing: -32,\n antialias: true,\n interactive: true\n });\n\n map.scrollZoom.enable();\n map.boxZoom.enable();\n map.dragRotate.enable();\n map.dragPan.enable();\n map.keyboard.enable();\n map.doubleClickZoom.enable();\n map.touchZoomRotate.enable();\n map.touchPitch.enable();\n\n map.on(\"error\", () => mask?.classList.add(\"hide\"));\n\n const geojsonSite = {\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"type\":\"Feature\",\n \"id\": 1,\n \"properties\": {\n \"kind\":\"quai\",\n \"name\": T.terminalMaritime,\n \"f2_label\": T.capacite, \"f2_value\": LANG === \"en\" ? \"4 vessels\" : \"4 navires\",\n \"f3_label\": T.levage, \"f3_value\":\"150k lbs\",\n \"f4_label\": T.navigation, \"f4_value\": T.avrDec,\n \"f5_label\": T.profondeur, \"f5_value\":\"8 m\"\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [[\n [-73.594793, 45.406921],\n [-73.594510, 45.405958],\n [-73.593064, 45.406186],\n [-73.592549, 45.406239],\n [-73.589895, 45.406348],\n [-73.589982, 45.407326],\n [-73.592936, 45.407214],\n [-73.594793, 45.406921]\n ]]\n }\n },\n {\n \"type\":\"Feature\",\n \"id\": 4,\n \"properties\": {\n \"kind\":\"quai\",\n \"name\": T.terminalMaritime,\n \"noLabel\": true,\n \"f2_label\": T.capacite, \"f2_value\": LANG === \"en\" ? \"4 vessels\" : \"4 navires\",\n \"f3_label\": T.levage, \"f3_value\":\"150k lbs\",\n \"f4_label\": T.navigation, \"f4_value\": T.avrDec,\n \"f5_label\": T.profondeur, \"f5_value\":\"8 m\"\n },\n \"geometry\": {\n \"type\":\"Polygon\",\n \"coordinates\":[[\n [-73.585208, 45.407509],\n [-73.585171, 45.406826],\n [-73.587443, 45.406715],\n [-73.587522, 45.407423],\n [-73.585208, 45.407509]\n ]]\n }\n },\n {\n \"type\":\"Feature\",\n \"id\": 2,\n \"properties\": {\n \"kind\":\"terrain\",\n \"name\": T.terrain,\n \"f1_label\": T.terrainLabel, \"f1_value\": LANG === \"en\" ? \"280,000 m\u00b2 (3M sq ft)\" : \"280 000 m\u00b2 (3 M pi\u00b2)\",\n \"f2_label\": T.batiments, \"f2_value\": LANG === \"en\" ? \"24,000 m\u00b2 (250,000 sq ft)\" : \"24 000 m\u00b2 (250 000 pi\u00b2)\",\n \"f3_label\": T.hauteur, \"f3_value\": LANG === \"en\" ? \"7.3\u201311 m (24\u201336 ft)\" : \"7,3\u201311 m (24\u201336 pi)\",\n \"f4_label\": T.securite, \"f4_value\": LANG === \"en\" ? \"24\/7 \/ 365 days\" : \"24 h \/ 365 jours\",\n \"f5_label\": T.ctpat, \"f5_value\": T.accredite,\n \"f6_label\": T.cautionne, \"f6_value\": T.courtLong\n },\n \"geometry\":{\n \"type\":\"Polygon\",\n \"coordinates\":[[\n [-73.590221, 45.400641],\n [-73.594282, 45.400497],\n [-73.594742, 45.405883],\n [-73.593005, 45.406153],\n [-73.592446, 45.406198],\n [-73.590708, 45.406272],\n [-73.590221, 45.400641]\n ]]\n }\n },\n {\n \"type\":\"Feature\",\n \"id\": 3,\n \"properties\": {\n \"kind\":\"projet\",\n \"name\": T.projet,\n \"f1_label\": T.statut, \"f1_value\": T.planifie,\n \"f2_label\": T.horizon, \"f2_value\":\"2027\"\n },\n \"geometry\":{\n \"type\":\"Polygon\",\n \"coordinates\": [[\n [-73.593879, 45.400425],\n [-73.596807, 45.400324],\n [-73.598213, 45.397084],\n [-73.595712, 45.396478],\n [-73.593879, 45.400425]\n ]]\n }\n }\n ]\n };\n\n let popup;\n\n const panel = document.getElementById(\"layerPanel\");\n const btnReset = document.getElementById(\"btnReset\");\n const btnCollapse = document.getElementById(\"btnCollapse\");\n\n if (isMobile && panel) panel.style.display = \"none\";\n\n function setToggle(el, on){\n el.dataset.on = String(on);\n el.setAttribute(\"aria-checked\", String(on));\n }\n function getToggle(el){ return el.dataset.on === \"true\"; }\n\n function setLayerVisibility(target, visible){\n const v = visible ? \"visible\" : \"none\";\n\n const poly = {\n terrain: [\"terrain-glow\",\"terrain-fill\",\"terrain-outline\",\"terrain-label\"],\n quai: [\"quai-glow\",\"quai-fill\",\"quai-outline\",\"quai-label\"],\n projet: [\"projet-glow\",\"projet-fill\",\"projet-outline\",\"projet-label\"]\n };\n\n const feats = [\"cylinders-extrusion\",\"cylinders-outline\",\"cyl-label-layer\",\n \"balances-extrusion\",\"balances-outline\",\"balance-label-layer\",\n \"batisse-projet-extrusion\",\"batisse-projet-outline\"];\n\n const ids = target === \"features\" ? feats : (poly[target] || []);\n ids.forEach(id => {\n if (map.getLayer(id)) map.setLayoutProperty(id, \"visibility\", v);\n });\n }\n\n function setFocus(kindOrNull){\n const allKinds = [\"terrain\",\"quai\",\"projet\",\"features\"];\n allKinds.forEach(k => {\n const row = document.querySelector(`.layer-row[data-layer=\"${k}\"]`);\n if (!row) return;\n row.style.opacity = (!kindOrNull || kindOrNull === k) ? \"1\" : \".55\";\n });\n\n const opacity = {\n terrain: { fill: 0.26, line: 0.98, glow: 0.35 },\n quai: { fill: 0.30, line: 0.94, glow: 0.55 },\n projet: { fill: 0.22, line: 0.92, glow: 0.45 }\n };\n\n function setOne(k, isFocused){\n const base = opacity[k];\n if (!base) return;\n\n const mult = isFocused ? 1 : 0.40;\n if (map.getLayer(`${k}-fill`)) map.setPaintProperty(`${k}-fill`, \"fill-opacity\", base.fill * mult);\n if (map.getLayer(`${k}-outline`)) map.setPaintProperty(`${k}-outline`, \"line-opacity\", base.line * mult);\n if (map.getLayer(`${k}-glow`)) map.setPaintProperty(`${k}-glow`, \"line-opacity\", base.glow * mult);\n }\n\n [\"terrain\",\"quai\",\"projet\"].forEach(k => setOne(k, !kindOrNull || kindOrNull === k));\n }\n\n let hoveredId = null;\n function setHover(id){\n if (hoveredId !== null) {\n map.setFeatureState({ source: \"site\", id: hoveredId }, { hover: false });\n }\n hoveredId = id;\n if (hoveredId !== null) {\n map.setFeatureState({ source: \"site\", id: hoveredId }, { hover: true });\n }\n }\n\n function openPopup(feature, lngLat){\n if (popup) popup.remove();\n\n const kind = feature.properties.kind;\n const isQuai = kind === \"quai\";\n const isProjet = kind === \"projet\";\n\n const dotColor = isQuai ? \"var(--quai)\" : (isProjet ? \"var(--proj)\" : \"var(--terrain)\");\n const dotSoft = isQuai ? \"var(--quai-soft)\" : (isProjet ? \"var(--proj-soft)\" : \"var(--terrain-soft)\");\n\n const items = [];\n for (let i = 1; i <= 6; i++) {\n const lab = feature.properties[`f${i}_label`];\n const val = feature.properties[`f${i}_value`];\n if (lab && val) items.push({ lab, val });\n }\n\n const itemsHtml = items.length\n ? items.map(it => `<div class=\"item\"><span>${it.lab}<\/span><b>${it.val}<\/b><\/div>`).join(\"\")\n : `<div class=\"item\"><span>${T.popupInfo}<\/span><b>${T.popupComing}<\/b><\/div>`;\n\n const html = `\n <div class=\"ml-popup\">\n <div class=\"head\">\n <span class=\"dot\" style=\"background:${dotColor}; box-shadow:0 0 0 4px ${dotSoft};\"><\/span>\n <div>\n <div class=\"title\">${feature.properties.name}<\/div>\n <\/div>\n <\/div>\n <div class=\"body\">${itemsHtml}<\/div>\n <\/div>\n `;\n\n popup = new maplibregl.Popup({\n closeButton: true,\n closeOnClick: true,\n maxWidth: isMobile ? \"none\" : \"330px\",\n className: isMobile ? \"popup-2025 mobile-full\" : \"popup-2025\"\n })\n .setLngLat(lngLat)\n .setHTML(html)\n .addTo(map);\n }\n\n map.on(\"load\", () => {\n mask?.classList.add(\"hide\");\n\n map.addSource(\"site\", { type:\"geojson\", data: geojsonSite });\n\n map.addLayer({\n id: \"terrain-glow\",\n type: \"line\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"terrain\"],\n paint: {\n \"line-color\": \"rgba(11,31,70,1)\",\n \"line-width\": 12,\n \"line-blur\": 12,\n \"line-opacity\": 0.35\n }\n });\n\n map.addLayer({\n id: \"terrain-fill\",\n type: \"fill\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"terrain\"],\n paint: {\n \"fill-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n \"rgba(11,31,70,0.30)\",\n \"rgba(11,31,70,0.22)\"\n ],\n \"fill-opacity\": [\"interpolate\", [\"linear\"], [\"zoom\"], 11, 0.18, 13, 0.22, 16, 0.28]\n }\n });\n\n map.addLayer({\n id: \"terrain-outline\",\n type: \"line\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"terrain\"],\n paint: {\n \"line-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n \"rgba(246,194,26,0.95)\",\n \"rgba(16,48,97,0.98)\"\n ],\n \"line-width\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n 3.6,\n 2.6\n ],\n \"line-opacity\": 0.98\n }\n });\n\n map.addLayer({\n id: \"quai-glow\",\n type: \"line\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"quai\"],\n paint: {\n \"line-color\": \"rgba(246,194,26,1)\",\n \"line-width\": 14,\n \"line-blur\": 14,\n \"line-opacity\": 0.55\n }\n });\n\n map.addLayer({\n id: \"quai-fill\",\n type: \"fill\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"quai\"],\n paint: {\n \"fill-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n \"rgba(246,194,26,0.36)\",\n \"rgba(246,194,26,0.28)\"\n ],\n \"fill-opacity\": [\"interpolate\", [\"linear\"], [\"zoom\"], 11, 0.22, 13, 0.28, 16, 0.36]\n }\n });\n\n map.addLayer({\n id: \"quai-outline\",\n type: \"line\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"quai\"],\n paint: {\n \"line-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n \"rgba(11,31,70,0.98)\",\n \"rgba(122,84,0,0.92)\"\n ],\n \"line-width\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n 3.4,\n 2.4\n ],\n \"line-opacity\": 0.94\n }\n });\n\n map.addLayer({\n id: \"projet-glow\",\n type: \"line\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"projet\"],\n paint: {\n \"line-color\": \"rgba(255,138,31,1)\",\n \"line-width\": 14,\n \"line-blur\": 14,\n \"line-opacity\": 0.45\n }\n });\n\n map.addLayer({\n id: \"projet-fill\",\n type: \"fill\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"projet\"],\n paint: {\n \"fill-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n \"rgba(255,138,31,0.30)\",\n \"rgba(255,138,31,0.20)\"\n ],\n \"fill-opacity\": [\"interpolate\", [\"linear\"], [\"zoom\"], 11, 0.16, 13, 0.20, 16, 0.26]\n }\n });\n\n map.addLayer({\n id: \"projet-outline\",\n type: \"line\",\n source: \"site\",\n filter: [\"==\", [\"get\",\"kind\"], \"projet\"],\n paint: {\n \"line-color\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n \"rgba(246,194,26,0.95)\",\n \"rgba(168,77,0,0.92)\"\n ],\n \"line-width\": [\n \"case\",\n [\"boolean\", [\"feature-state\",\"hover\"], false],\n 3.3,\n 2.3\n ],\n \"line-opacity\": 0.92\n }\n });\n\n const batisseProjet = {\n \"type\": \"FeatureCollection\",\n \"features\": [\n {\n \"type\": \"Feature\",\n \"properties\": {\n \"id\": \"bat-1\",\n \"height\": 20, \/\/ hauteur en m\u00e8tres (modifiable)\n \"color\": \"rgba(255,138,31,1)\"\n },\n \"geometry\": {\n \"type\": \"Polygon\",\n \"coordinates\": [[\n [-73.594721, 45.400238], \/\/ B1\n [-73.59411, 45.400172], \/\/ B2\n [-73.59446, 45.399381], \/\/ B3\n [-73.595073, 45.399463], \/\/ B4\n [-73.594721, 45.400238] \/\/ B5 fermeture\n ]]\n }\n }\n ]\n};\n\n map.addSource(\"batisse-projet\", { type:\"geojson\", data: batisseProjet });\n\n map.addLayer({\n id: \"batisse-projet-extrusion\",\n type: \"fill-extrusion\",\n source: \"batisse-projet\",\n paint: {\n \"fill-extrusion-color\": [\"get\",\"color\"],\n \"fill-extrusion-height\": [\"get\",\"height\"],\n \"fill-extrusion-base\": 0,\n \"fill-extrusion-opacity\": 0.62\n }\n });\n\n map.addLayer({\n id: \"batisse-projet-outline\",\n type: \"line\",\n source: \"batisse-projet\",\n paint: { \"line-color\": \"rgba(11,31,70,0.95)\", \"line-width\": 2.0, \"line-opacity\": 0.92 }\n });\n\n const labelFeatures = geojsonSite.features\n .filter(f => !f.properties?.noLabel)\n .map(f => {\n const c = turf.centroid(f);\n return { type:\"Feature\", properties:{ kind: f.properties.kind, name: f.properties.name }, geometry: c.geometry };\n });\n\n map.addSource(\"labels\", { type:\"geojson\", data:{ type:\"FeatureCollection\", features: labelFeatures } });\n\n const baseLabelLayout = {\n \"text-field\": [\"get\",\"name\"],\n \"text-font\": [\"Open Sans Bold\", \"Arial Unicode MS Bold\"],\n \"text-size\": [\"interpolate\", [\"linear\"], [\"zoom\"], 12, 12, 14, 16, 17, 19],\n \"text-allow-overlap\": true,\n \"visibility\": \"none\"\n };\n\n map.addLayer({\n id: \"terrain-label\",\n type: \"symbol\",\n source: \"labels\",\n filter: [\"==\", [\"get\",\"kind\"], \"terrain\"],\n layout: baseLabelLayout,\n paint: {\n \"text-color\": \"rgba(11,31,70,1)\",\n \"text-halo-color\": \"rgba(255,255,255,0.98)\",\n \"text-halo-width\": 1.9\n }\n });\n\n map.addLayer({\n id: \"quai-label\",\n type: \"symbol\",\n source: \"labels\",\n filter: [\"==\", [\"get\",\"kind\"], \"quai\"],\n layout: baseLabelLayout,\n paint: {\n \"text-color\": \"rgba(122,84,0,1)\",\n \"text-halo-color\": \"rgba(255,255,255,0.98)\",\n \"text-halo-width\": 1.9\n }\n });\n\n map.addLayer({\n id: \"projet-label\",\n type: \"symbol\",\n source: \"labels\",\n filter: [\"==\", [\"get\",\"kind\"], \"projet\"],\n layout: baseLabelLayout,\n paint: {\n \"text-color\": \"rgba(168,77,0,1)\",\n \"text-halo-color\": \"rgba(255,255,255,0.98)\",\n \"text-halo-width\": 1.9\n }\n });\n\n const cylinders = [\n { id: \"cyl-1\", lng: -73.59388978078935, lat: 45.40523210804179, radiusM: 18, heightM: 85, color: \"rgba(11,31,70,1)\" },\n { id: \"cyl-2\", lng: -73.59390745406424, lat: 45.40543932453121, radiusM: 14, heightM: 70, color: \"rgba(11,31,70,1)\" }\n ];\n\n const cylFeatures = cylinders.map(c => {\n const circle = turf.circle([c.lng, c.lat], c.radiusM \/ 1000, { steps: 256, units: \"kilometers\" });\n circle.properties = { id: c.id, height: c.heightM, color: c.color };\n return circle;\n });\n\n map.addSource(\"cylinders\", { type: \"geojson\", data: { type: \"FeatureCollection\", features: cylFeatures } });\n\n map.addLayer({\n id: \"cylinders-extrusion\",\n type: \"fill-extrusion\",\n source: \"cylinders\",\n paint: {\n \"fill-extrusion-color\": [\"get\", \"color\"],\n \"fill-extrusion-height\": [\"get\", \"height\"],\n \"fill-extrusion-base\": 0,\n \"fill-extrusion-opacity\": 0.58\n }\n });\n\n map.addLayer({\n id: \"cylinders-outline\",\n type: \"line\",\n source: \"cylinders\",\n paint: { \"line-color\": \"rgba(11,31,70,0.95)\", \"line-width\": 2.0, \"line-opacity\": 0.9 }\n });\n\n const balancePoly = {\n \"type\":\"Feature\",\n \"properties\":{\n \"id\":\"balance-1\",\n \"kind\":\"balance\",\n \"name\": T.balance,\n \"height\": 18,\n \"color\":\"rgba(11,31,70,1)\"\n },\n \"geometry\":{\n \"type\":\"Polygon\",\n \"coordinates\":[[\n [-73.594217, 45.401665],\n [-73.593711, 45.401690],\n [-73.593662, 45.401039],\n [-73.594186, 45.400999],\n [-73.594217, 45.401665]\n ]]\n }\n };\n\n map.addSource(\"balances\", { type: \"geojson\", data: { type: \"FeatureCollection\", features: [balancePoly] } });\n\n map.addLayer({\n id: \"balances-extrusion\",\n type: \"fill-extrusion\",\n source: \"balances\",\n paint: {\n \"fill-extrusion-color\": [\"get\",\"color\"],\n \"fill-extrusion-height\": [\"get\",\"height\"],\n \"fill-extrusion-base\": 0,\n \"fill-extrusion-opacity\": 0.58\n }\n });\n\n map.addLayer({\n id: \"balances-outline\",\n type: \"line\",\n source: \"balances\",\n paint: { \"line-color\": \"rgba(11,31,70,0.95)\", \"line-width\": 2.0, \"line-opacity\": 0.9 }\n });\n\n const balanceLabelFeature = {\n type: \"Feature\",\n properties: { title: T.balance },\n geometry: turf.centroid(balancePoly).geometry\n };\n\n map.addSource(\"balance-label\", { type: \"geojson\", data: { type: \"FeatureCollection\", features: [balanceLabelFeature] } });\n\n map.addLayer({\n id: \"balance-label-layer\",\n type: \"symbol\",\n source: \"balance-label\",\n layout: {\n \"text-field\": [\"get\", \"title\"],\n \"text-font\": [\"Open Sans Bold\", \"Arial Unicode MS Bold\"],\n \"text-size\": 15,\n \"text-anchor\": \"right\",\n \"text-offset\": [-1.6, 0],\n \"text-allow-overlap\": true,\n \"text-ignore-placement\": true,\n \"visibility\": \"none\"\n },\n paint: { \"text-color\": \"rgba(11,31,70,1)\", \"text-halo-color\": \"rgba(255,255,255,0.98)\", \"text-halo-width\": 1.9 }\n });\n\n const cylLabelFeature = {\n type: \"Feature\",\n properties: { title: T.ciment },\n geometry: { type: \"Point\", coordinates: [-73.59388978078935, 45.40523210804179] }\n };\n\n map.addSource(\"cyl-label\", { type: \"geojson\", data: { type: \"FeatureCollection\", features: [cylLabelFeature] } });\n\n map.addLayer({\n id: \"cyl-label-layer\",\n type: \"symbol\",\n source: \"cyl-label\",\n layout: {\n \"text-field\": [\"get\", \"title\"],\n \"text-font\": [\"Open Sans Bold\", \"Arial Unicode MS Bold\"],\n \"text-size\": 15,\n \"text-anchor\": \"right\",\n \"text-offset\": [-1.6, 0],\n \"text-allow-overlap\": true,\n \"text-ignore-placement\": true,\n \"visibility\": \"none\"\n },\n paint: { \"text-color\": \"rgba(11,31,70,1)\", \"text-halo-color\": \"rgba(255,255,255,0.98)\", \"text-halo-width\": 1.9 }\n });\n\n const siteCoords = geojsonSite.features.flatMap(f => f.geometry.coordinates[0]);\n const boundsSite = siteCoords.reduce(\n (b, c) => b.extend(c),\n new maplibregl.LngLatBounds(siteCoords[0], siteCoords[0])\n );\n\n const padding = isMobile\n ? { top: 90, bottom: 210, left: 20, right: 20 }\n : { top: 120, bottom: 120, left: 120, right: 120 };\n\n setTimeout(() => {\n map.once(\"moveend\", () => {\n const labelIds = [\"terrain-label\",\"quai-label\",\"projet-label\",\"cyl-label-layer\",\"balance-label-layer\"];\n const vis = isMobile ? \"none\" : \"visible\";\n labelIds.forEach(id => {\n if (map.getLayer(id)) map.setLayoutProperty(id, \"visibility\", vis);\n });\n });\n\n const cam = map.cameraForBounds(boundsSite, {\n padding,\n pitch: isMobile ? 55 : 65,\n bearing: -36\n });\n\n cam.zoom = Math.max(cam.zoom, isMobile ? 12.2 : 14.7);\n map.easeTo({ ...cam, duration: 5200, easing: t => t * t * (3 - 1.9*t) });\n }, 600);\n\n let tt = 0;\n function breathe(){\n tt += 0.01;\n\n const opQuai = 0.28 + Math.sin(tt) * 0.02;\n const opTer = 0.22 + Math.sin(tt + 1.6) * 0.015;\n const opProj = 0.20 + Math.sin(tt + 2.7) * 0.015;\n\n if (map.getLayer(\"quai-fill\") && map.getLayoutProperty(\"quai-fill\",\"visibility\") !== \"none\") {\n map.setPaintProperty(\"quai-fill\",\"fill-opacity\", opQuai);\n }\n if (map.getLayer(\"terrain-fill\") && map.getLayoutProperty(\"terrain-fill\",\"visibility\") !== \"none\") {\n map.setPaintProperty(\"terrain-fill\",\"fill-opacity\", opTer);\n }\n if (map.getLayer(\"projet-fill\") && map.getLayoutProperty(\"projet-fill\",\"visibility\") !== \"none\") {\n map.setPaintProperty(\"projet-fill\",\"fill-opacity\", opProj);\n }\n\n requestAnimationFrame(breathe);\n }\n breathe();\n\n function bindHover(layerId){\n map.on(\"mousemove\", layerId, (e) => {\n map.getCanvas().style.cursor = \"pointer\";\n const f = e.features && e.features[0];\n if (f && typeof f.id !== \"undefined\") setHover(f.id);\n });\n map.on(\"mouseleave\", layerId, () => {\n map.getCanvas().style.cursor = \"\";\n setHover(null);\n });\n }\n bindHover(\"terrain-fill\");\n bindHover(\"quai-fill\");\n bindHover(\"projet-fill\");\n\n map.on(\"click\", \"terrain-fill\", (e) => openPopup(e.features[0], e.lngLat));\n map.on(\"click\", \"quai-fill\", (e) => openPopup(e.features[0], e.lngLat));\n map.on(\"click\", \"projet-fill\", (e) => openPopup(e.features[0], e.lngLat));\n\n if (!isMobile) {\n const toggles = Array.from(document.querySelectorAll(\".toggle[data-target]\"));\n\n function applyToggle(target, on){\n setLayerVisibility(target, on);\n }\n\n toggles.forEach(tg => {\n tg.addEventListener(\"click\", () => {\n const on = !getToggle(tg);\n setToggle(tg, on);\n applyToggle(tg.dataset.target, on);\n setFocus(null);\n });\n tg.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" || e.key === \" \") {\n e.preventDefault();\n tg.click();\n }\n });\n });\n\n document.querySelectorAll(\".layer-row\").forEach(row => {\n row.addEventListener(\"dblclick\", () => {\n const k = row.dataset.layer;\n setFocus(k === \"features\" ? \"features\" : k);\n });\n });\n\n btnReset?.addEventListener(\"click\", () => {\n toggles.forEach(tg => setToggle(tg, true));\n [\"terrain\",\"quai\",\"projet\",\"features\"].forEach(k => setLayerVisibility(k, true));\n setFocus(null);\n if (popup) popup.remove();\n });\n\n function updateCollapseBtn(){\n if (!btnCollapse) return;\n const collapsed = panel.classList.contains(\"panel-collapsed\");\n btnCollapse.textContent = collapsed ? T.open : T.collapse;\n }\n if (btnCollapse){\n btnCollapse.addEventListener(\"click\", () => {\n panel.classList.toggle(\"panel-collapsed\");\n updateCollapseBtn();\n });\n updateCollapseBtn();\n }\n } else {\n [\"terrain-label\",\"quai-label\",\"projet-label\",\"cyl-label-layer\",\"balance-label-layer\"].forEach(id => {\n if (map.getLayer(id)) map.setLayoutProperty(id, \"visibility\", \"none\");\n });\n }\n });\n }\n\n function runWhenVisible(){\n const target = document.querySelector(\".js-map-onview\");\n if (!target) return;\n\n if (\"IntersectionObserver\" in window){\n const io = new IntersectionObserver((entries, obs) => {\n entries.forEach(entry => {\n if (entry.isIntersecting){\n initMap();\n obs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.2 });\n io.observe(target);\n return;\n }\n initMap();\n }\n\n if (document.readyState === \"loading\"){\n document.addEventListener(\"DOMContentLoaded\", runWhenVisible);\n } else {\n runWhenVisible();\n }\n })();\n <\/script>\n<\/body>\n<\/html><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-6 fusion-flex-container has-pattern-background has-mask-background fusion-parallax-none nonhundred-percent-fullwidth non-hundred-percent-height-scrolling lazyload\" style=\"--awb-background-position:center top;--awb-border-sizes-top:0px;--awb-border-sizes-bottom:0px;--awb-border-sizes-left:0px;--awb-border-sizes-right:0px;--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-padding-top:60px;--awb-padding-bottom:60px;--awb-padding-top-medium:100px;--awb-padding-bottom-medium:100px;--awb-padding-top-small:90px;--awb-padding-bottom-small:90px;--awb-margin-top:50px;--awb-margin-bottom:80px;--awb-margin-bottom-small:0px;--awb-background-color:hsla(var(--awb-color8-h),var(--awb-color8-s),calc( var(--awb-color8-l) + 10% ),var(--awb-color8-a));--awb-background-image:linear-gradient(180deg, hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc( var(--awb-color8-a) - 50% )) 0%,hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc( var(--awb-color8-a) - 50% )) 100%);;--awb-background-size:cover;--awb-flex-wrap:wrap;\" data-bg=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/tw_img_03-e1765900929849.jpg\" data-bg-gradient=\"linear-gradient(180deg, hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc( var(--awb-color8-a) - 50% )) 0%,hsla(var(--awb-color8-h),var(--awb-color8-s),var(--awb-color8-l),calc( var(--awb-color8-a) - 50% )) 100%)\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-center fusion-flex-content-wrap\" style=\"max-width:calc( 1170px + 120px );margin-left: calc(-120px \/ 2 );margin-right: calc(-120px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-14 fusion_builder_column_1_2 1_2 fusion-flex-column fusion-animated\" style=\"--awb-overflow:hidden;--awb-bg-size:cover;--awb-border-radius:10px 10px 10px 10px;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:calc( 0.04 * calc( 100% - 120px ) );--awb-margin-bottom-large:0px;--awb-spacing-left-large:60px;--awb-width-medium:40%;--awb-order-medium:0;--awb-spacing-right-medium:calc( 0.05 * calc( 100% - 120px ) );--awb-spacing-left-medium:60px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:60px;--awb-margin-bottom-small:60px;--awb-spacing-left-small:60px;\" data-animationType=\"fadeInLeft\" data-animationDuration=\"1.3\" data-animationOffset=\"top-into-view\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-image-element \" style=\"--awb-caption-title-font-family:var(--h2_typography-font-family);--awb-caption-title-font-weight:var(--h2_typography-font-weight);--awb-caption-title-font-style:var(--h2_typography-font-style);--awb-caption-title-size:var(--h2_typography-font-size);--awb-caption-title-transform:var(--h2_typography-text-transform);--awb-caption-title-line-height:var(--h2_typography-line-height);--awb-caption-title-letter-spacing:var(--h2_typography-letter-spacing);\"><span class=\" fusion-imageframe imageframe-none imageframe-1 hover-type-none\"><img decoding=\"async\" width=\"851\" height=\"676\" title=\"camion\" src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion.jpeg\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion.jpeg\" alt class=\"lazyload img-responsive wp-image-5692\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27851%27%20height%3D%27676%27%20viewBox%3D%270%200%20851%20676%27%3E%3Crect%20width%3D%27851%27%20height%3D%27676%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-srcset=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion-200x159.jpeg 200w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion-400x318.jpeg 400w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion-600x477.jpeg 600w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion-800x635.jpeg 800w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/11\/camion.jpeg 851w\" data-sizes=\"auto\" data-orig-sizes=\"(max-width: 1024px) 100vw, (max-width: 768px) 100vw, 600px\" \/><\/span><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-15 fusion_builder_column_1_2 1_2 fusion-flex-column fusion-animated\" style=\"--awb-padding-right-medium:0px;--awb-padding-left-medium:0px;--awb-overflow:hidden;--awb-bg-color:rgba(252,252,252,0);--awb-bg-color-hover:rgba(252,252,252,0);--awb-bg-size:cover;--awb-border-radius:10px 10px 10px 10px;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:60px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:calc( 0.04 * calc( 100% - 120px ) );--awb-width-medium:60%;--awb-order-medium:0;--awb-spacing-right-medium:60px;--awb-spacing-left-medium:calc( 0.033333333333333 * calc( 100% - 120px ) );--awb-width-small:100%;--awb-order-small:1;--awb-spacing-right-small:60px;--awb-margin-bottom-small:0px;--awb-spacing-left-small:60px;\" data-animationType=\"fadeInRight\" data-animationDuration=\"1.3\" data-animationOffset=\"top-into-view\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column\"><div class=\"fusion-title title fusion-title-8 fusion-title-text fusion-title-size-two\" style=\"--awb-text-color:var(--awb-color1);--awb-margin-top:10px;--awb-margin-right:0px;--awb-margin-bottom:20px;--awb-margin-left:0px;--awb-margin-top-small:10px;--awb-margin-right-small:0px;--awb-margin-bottom-small:50px;--awb-margin-left-small:0px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:var(--awb-color3);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h2 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:none;--fontSize:42;line-height:var(--awb-typography1-line-height);\"><strong>Notre engagement, <span style=\"color: #f1b700;\">c\u2019est votre r\u00e9ussite<\/span>.<\/strong><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:var(--awb-color3);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-12 fusion-text-no-margin\" style=\"--awb-text-color:var(--awb-color1);--awb-margin-right:10%;--awb-margin-bottom:40px;\"><p><strong>Depuis nos d\u00e9buts, nous pla\u00e7ons la qualit\u00e9 du service et la rigueur op\u00e9rationnelle au c\u0153ur de notre mission. Trac-World, c\u2019est une \u00e9quipe d\u00e9vou\u00e9e qui \u0153uvre chaque jour \u00e0 b\u00e2tir un r\u00e9seau logistique solide et performant.<\/strong><\/p>\n<\/div><div ><a class=\"fusion-button button-flat button-large button-custom fusion-button-default button-7 fusion-button-default-span fusion-button-default-type\" style=\"--button_accent_color:var(--awb-color5);--button_border_color:var(--awb-color5);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button-border-radius-top-left:10px;--button-border-radius-top-right:10px;--button-border-radius-bottom-right:10px;--button-border-radius-bottom-left:10px;--button_gradient_top_color:var(--awb-color4);--button_gradient_bottom_color:var(--awb-color4);--button_gradient_top_color_hover:var(--awb-color5);--button_gradient_bottom_color_hover:var(--awb-color5);\" target=\"_self\" href=\"https:\/\/www.trac-world.com\/about\/\"><span class=\"fusion-button-text awb-button__text awb-button__text--default\">En savoir plus<\/span><\/a><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-7 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling fusion-animated\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-margin-top:50px;--awb-margin-bottom:50px;--awb-flex-wrap:wrap;\" data-animationType=\"fadeInLeft\" data-animationDuration=\"2.0\" data-animationOffset=\"top-into-view\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"max-width:1216.8px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-16 fusion_builder_column_1_1 1_1 fusion-flex-column\" style=\"--awb-bg-blend:overlay;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:20px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-column\"><div class=\"fusion-separator fusion-has-icon fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:0px;margin-bottom:0px;width:100%;\"><div class=\"fusion-separator-border sep-shadow\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:var(--awb-color5);background:radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-webkit-radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-moz-radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-o-radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);\"><\/div><span class=\"icon-wrapper\" style=\"border-color:var(--awb-color5);background-color:var(--awb-color5);font-size:50px;width: 1.75em; height: 1.75em;border-width:2px;padding:2px;\"><i class=\"fa-star fas\" style=\"font-size: inherit;color:var(--awb-color4);\" aria-hidden=\"true\"><\/i><\/span><div class=\"fusion-separator-border sep-shadow\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:var(--awb-color5);background:radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-webkit-radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-moz-radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);background:-o-radial-gradient(ellipse at 50% -50% , var(--awb-color5) 0px, rgba(255, 255, 255, 0) 80%) repeat scroll 0 0 rgba(0, 0, 0, 0);\"><\/div><\/div><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-17 fusion_builder_column_3_5 3_5 fusion-flex-column fusion-flex-align-self-flex-start fusion-column-no-min-height fusion-animated\" style=\"--awb-bg-color:rgba(255,255,255,0);--awb-bg-color-hover:rgba(255,255,255,0);--awb-bg-blend:overlay;--awb-bg-size:cover;--awb-width-large:60%;--awb-margin-top-large:0px;--awb-spacing-right-large:3.2%;--awb-margin-bottom-large:40px;--awb-spacing-left-large:3.2%;--awb-width-medium:80%;--awb-order-medium:0;--awb-spacing-right-medium:2.4%;--awb-spacing-left-medium:2.4%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-animationType=\"fadeInLeft\" data-animationDuration=\"0.3\" data-animationOffset=\"top-into-view\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-row\"><div class=\"fusion-title title fusion-title-9 fusion-title-center fusion-title-text fusion-title-size-two\" style=\"--awb-margin-top-small:0px;--awb-margin-bottom-small:20px;\"><div class=\"title-sep-container title-sep-container-left\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:var(--awb-color3);\"><\/div><\/div><span class=\"awb-title-spacer\"><\/span><h2 class=\"fusion-title-heading title-heading-center fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:capitalize;--fontSize:42;line-height:var(--awb-typography1-line-height);\"><span style=\"color: #1d3557;\">Leader en logistique et transport<\/span> <span style=\"color: #f1b700;\">depuis 1991<\/span><\/h2><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:var(--awb-color3);\"><\/div><\/div><\/div><div class=\"fusion-separator\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-bottom:20px;width:100%;max-width:20%;\"><div class=\"fusion-separator-border sep-single sep-solid\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:var(--awb-color4);border-color:var(--awb-color4);border-top-width:2px;\"><\/div><\/div><div class=\"fusion-text fusion-text-13 fusion-text-no-margin\" style=\"--awb-content-alignment:center;--awb-margin-bottom:0px;\"><p data-start=\"96\" data-end=\"520\"><em>Fond\u00e9e en 1991, Trac-World se distingue par son expertise en logistique de transport, tant pour l\u2019import-export que pour le transport interprovincial et vers les \u00c9tats-Unis. La v\u00e9ritable distinction en logistique vient du fait que la compagnie poss\u00e8de ses propres terrains et b\u00e2timents, ses propres \u00e9quipements routiers, ses propres \u00e9quipements de manutention et surtout son personnel sur place, d\u00e9di\u00e9 \u00e0 vous servir.<\/em><\/p>\n<p data-start=\"522\" data-end=\"789\"><em>Situ\u00e9 sur un terminal routier dot\u00e9 d\u2019une voie ferroviaire pouvant accueillir jusqu\u2019\u00e0 28 wagons par service ainsi que d\u2019une installation maritime, le terminal de Trac-World est situ\u00e9 en bordure de la Voie maritime du Saint-Laurent, \u00e0 quelques minutes de Montr\u00e9al.<\/em><\/p>\n<\/div><div class=\"fusion-separator fusion-full-width-sep\" style=\"align-self: center;margin-left: auto;margin-right: auto;margin-top:15px;width:100%;\"><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-8 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--link_color: var(--awb-color5);--awb-border-color:var(--awb-color3);--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-margin-top:0px;--awb-margin-bottom:60px;--awb-margin-bottom-medium:80px;--awb-margin-bottom-small:60px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-stretch fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"max-width:calc( 1170px + 0px );margin-left: calc(-0px \/ 2 );margin-right: calc(-0px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-18 fusion_builder_column_1_2 1_2 fusion-flex-column fusion-animated home-column-left-cta\" style=\"--awb-padding-top:70px;--awb-padding-right:70px;--awb-padding-bottom:70px;--awb-padding-left:70px;--awb-padding-top-small:36px;--awb-padding-right-small:36px;--awb-padding-bottom-small:36px;--awb-padding-left-small:36px;--awb-bg-image:linear-gradient(180deg, rgba(29,53,87,0) 0%,rgba(29,53,87,0.25) 100%);;--awb-bg-position:left center;--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0px;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:0px;--awb-margin-bottom-small:0px;--awb-spacing-left-small:0px;\" data-animationType=\"fadeInUp\" data-animationDuration=\"1.3\" data-animationOffset=\"top-into-view\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper lazyload fusion-column-has-shadow fusion-flex-justify-content-space-between fusion-content-layout-column fusion-empty-column-bg-image fusion-column-has-bg-image\" data-bg-url=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-7-janv.-2026-11-h-04-min-30-s.jpg\" data-bg=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2026\/01\/ChatGPT-Image-7-janv.-2026-11-h-04-min-30-s.jpg\" data-bg-gradient=\"linear-gradient(180deg, rgba(29,53,87,0) 0%,rgba(29,53,87,0.25) 100%)\"><img decoding=\"async\" class=\"fusion-empty-dims-img-placeholder fusion-no-large-visibility fusion-no-medium-visibility\" aria-label=\"ChatGPT Image 7 janv. 2026, 11 h 04 min 30 s\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27800%27%20height%3D%27800%27%20viewBox%3D%270%200%20800%20800%27%3E%3Crect%20width%3D%27800%27%20height%3D%27800%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\"><\/div><\/div><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-19 fusion_builder_column_1_2 1_2 fusion-flex-column fusion-animated home-column-right-cta\" style=\"--awb-padding-top:80px;--awb-padding-right:80px;--awb-padding-bottom:80px;--awb-padding-left:80px;--awb-padding-top-small:36px;--awb-padding-right-small:36px;--awb-padding-bottom-small:36px;--awb-padding-left-small:36px;--awb-bg-color:var(--awb-color8);--awb-bg-color-hover:var(--awb-color8);--awb-bg-size:cover;--awb-width-large:50%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:0px;--awb-spacing-left-large:0px;--awb-width-medium:50%;--awb-order-medium:0;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:0px;--awb-spacing-left-small:0px;\" data-animationType=\"fadeInUp\" data-animationDuration=\"1.3\" data-animationOffset=\"top-into-view\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-center fusion-content-layout-column\"><div class=\"fusion-text fusion-text-14 fusion-text-no-margin\" style=\"--awb-font-size:var(--awb-typography2-font-size);--awb-line-height:var(--awb-typography2-line-height);--awb-letter-spacing:var(--awb-typography2-letter-spacing);--awb-text-transform:var(--awb-typography2-text-transform);--awb-text-color:var(--awb-color4);--awb-margin-bottom:0px;--awb-text-font-family:var(--awb-typography2-font-family);--awb-text-font-weight:var(--awb-typography2-font-weight);--awb-text-font-style:var(--awb-typography2-font-style);\"><p style=\"letter-spacing: 3px;\">Carri\u00e8res<\/p>\n<\/div><div class=\"fusion-title title fusion-title-10 fusion-title-text fusion-title-size-one\" style=\"--awb-text-color:var(--awb-color1);--awb-margin-bottom:0px;--awb-margin-top-small:0px;--awb-margin-bottom-small:20px;--awb-font-size:40px;\"><div class=\"title-sep-container title-sep-container-left fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:var(--awb-color3);\"><\/div><\/div><span class=\"awb-title-spacer fusion-no-large-visibility fusion-no-medium-visibility fusion-no-small-visibility\"><\/span><h1 class=\"fusion-title-heading title-heading-left fusion-responsive-typography-calculated\" style=\"margin:0;text-transform:capitalize;font-size:1em;--fontSize:40;line-height:1.38;\"><strong>Rejoignez Trac-World<\/strong><\/h1><span class=\"awb-title-spacer\"><\/span><div class=\"title-sep-container title-sep-container-right\"><div class=\"title-sep sep- sep-solid\" style=\"border-color:var(--awb-color3);\"><\/div><\/div><\/div><div class=\"fusion-text fusion-text-15 fusion-text-no-margin\" style=\"--awb-text-color:var(--awb-color1);--awb-margin-bottom:10px;\"><div class=\"n6owBd awi2gc\" data-sfc-cp=\"\" data-sfc-root=\"c\" data-sfc-cb=\"\" data-hveid=\"CAAIBRAA\" data-complete=\"true\" data-processed=\"true\" data-copy-service-computed-style=\"font-family: \"><strong class=\"Yjhzub\" data-sfc-root=\"c\" data-sfc-cb=\"\" data-complete=\"true\" data-processed=\"true\" data-copy-service-computed-style=\"font-family: \">Construisez votre carri\u00e8re avec nous : Fa\u00e7onner l’avenir de la logistique.<!--TgQPHd|[]--><\/strong><!--TgQPHd|[]--><\/div>\n<div class=\"Fsg96\" data-sfc-cp=\"\" data-sfc-root=\"c\" data-sfc-cb=\"\" data-complete=\"true\" data-processed=\"true\" data-copy-service-computed-style=\"font-family: \"><!--TgQPHd|[]--><\/div>\n<\/div><div class=\"fusion-separator\" style=\"align-self: flex-start;margin-right:auto;margin-bottom:20px;width:100%;max-width:20%;\"><div class=\"fusion-separator-border sep-single sep-solid\" style=\"--awb-height:20px;--awb-amount:20px;--awb-sep-color:var(--awb-color4);border-color:var(--awb-color4);border-top-width:2px;\"><\/div><\/div><div class=\"fusion-text fusion-text-16 fusion-text-no-margin\" style=\"--awb-text-color:var(--awb-color1);--awb-margin-bottom:0px;\"><p data-start=\"633\" data-end=\"996\">Chez Trac-World, nous innovons chaque jour pour transformer le secteur du transport et de la logistique. Nous recherchons des personnes passionn\u00e9es, pr\u00eates \u00e0 relever de nouveaux d\u00e9fis.<\/p>\n<\/div><div class=\"fusion-builder-row fusion-builder-row-inner fusion-row fusion-flex-align-items-stretch fusion-flex-justify-content-center fusion-flex-content-wrap\" style=\"--awb-flex-grow:0;--awb-flex-grow-medium:0;--awb-flex-grow-small:0;--awb-flex-shrink:0;--awb-flex-shrink-medium:0;--awb-flex-shrink-small:0;width:calc( 100% + 0px ) !important;max-width:calc( 100% + 0px ) !important;margin-left: calc(-0px \/ 2 );margin-right: calc(-0px \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column_inner fusion-builder-nested-column-0 fusion_builder_column_inner_1_1 1_1 fusion-flex-column fusion-flex-align-self-center\" style=\"--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:0px;--awb-margin-bottom-large:20px;--awb-spacing-left-large:0px;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:0px;--awb-spacing-left-medium:0px;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:0px;--awb-spacing-left-small:0px;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-space-evenly fusion-content-layout-row fusion-flex-align-items-center\"><div class=\"sm-text-align-left\"><a class=\"fusion-button button-flat button-large button-custom fusion-button-default button-8 fusion-button-default-span \" style=\"--awb-margin-top:20px;--button_accent_color:var(--awb-color5);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:0px;--button_border_width-right:0px;--button_border_width-bottom:0px;--button_border_width-left:0px;--button-border-radius-top-left:10px;--button-border-radius-top-right:10px;--button-border-radius-bottom-right:10px;--button-border-radius-bottom-left:10px;--button_gradient_top_color:rgba(241,183,0,0.9);--button_gradient_bottom_color:rgba(241,183,0,0.9);--button_gradient_top_color_hover:var(--awb-color8);--button_gradient_bottom_color_hover:var(--awb-color8);--button_text_transform:none;--button_typography-letter-spacing:0px;\" target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\/\/ca.indeed.com\/cmp\/Services-De-Transport-Trac--world-Inc.-1\/jobs\"><span class=\"fusion-button-text awb-button__text awb-button__text--default\">Voir les opportunit\u00e9s<\/span><\/a><\/div><div class=\"sm-text-align-left\"><a class=\"fusion-button button-flat button-large button-custom fusion-button-default button-9 fusion-button-default-span \" style=\"--awb-margin-top:20px;--button_accent_color:var(--awb-color1);--button_accent_hover_color:var(--awb-color1);--button_border_hover_color:var(--awb-color1);--button_border_width-top:1px;--button_border_width-right:1px;--button_border_width-bottom:1px;--button_border_width-left:1px;--button-border-radius-top-left:10px;--button-border-radius-top-right:10px;--button-border-radius-bottom-right:10px;--button-border-radius-bottom-left:10px;--button_gradient_top_color:rgba(241,183,0,0);--button_gradient_bottom_color:rgba(241,183,0,0);--button_gradient_top_color_hover:var(--awb-color8);--button_gradient_bottom_color_hover:var(--awb-color8);--button_text_transform:none;--button_typography-letter-spacing:0px;\" target=\"_self\" href=\"https:\/\/www.trac-world.com\/about\/\"><span class=\"fusion-button-text awb-button__text awb-button__text--default\">D\u00e9couvrir Trac-World<\/span><\/a><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><div class=\"fusion-fullwidth fullwidth-box fusion-builder-row-9 fusion-flex-container has-pattern-background has-mask-background nonhundred-percent-fullwidth non-hundred-percent-height-scrolling\" style=\"--awb-border-radius-top-left:0px;--awb-border-radius-top-right:0px;--awb-border-radius-bottom-right:0px;--awb-border-radius-bottom-left:0px;--awb-flex-wrap:wrap;\" ><div class=\"fusion-builder-row fusion-row fusion-flex-align-items-flex-start fusion-flex-content-wrap\" style=\"max-width:1216.8px;margin-left: calc(-4% \/ 2 );margin-right: calc(-4% \/ 2 );\"><div class=\"fusion-layout-column fusion_builder_column fusion-builder-column-20 fusion_builder_column_1_1 1_1 fusion-flex-column fusion-flex-align-self-flex-start fusion-column-no-min-height\" style=\"--awb-bg-blend:overlay;--awb-bg-size:cover;--awb-width-large:100%;--awb-margin-top-large:0px;--awb-spacing-right-large:1.92%;--awb-margin-bottom-large:0px;--awb-spacing-left-large:1.92%;--awb-width-medium:100%;--awb-order-medium:0;--awb-spacing-right-medium:1.92%;--awb-spacing-left-medium:1.92%;--awb-width-small:100%;--awb-order-small:0;--awb-spacing-right-small:1.92%;--awb-spacing-left-small:1.92%;\" data-scroll-devices=\"small-visibility,medium-visibility,large-visibility\"><div class=\"fusion-column-wrapper fusion-column-has-shadow fusion-flex-justify-content-flex-start fusion-content-layout-row\"><div class=\"fusion-image-carousel fusion-image-carousel-auto fusion-image-carousel-1\"><div class=\"awb-carousel awb-swiper awb-swiper-carousel awb-carousel--carousel awb-swiper-dots-position-bottom\" data-layout=\"carousel\" data-autoplay=\"yes\" data-autoplayspeed=\"2500\" data-autoplaypause=\"no\" data-loop=\"yes\" data-columns=\"5\" data-columnsmedium=\"3.0\" data-columnssmall=\"1.0\" data-itemmargin=\"40\" data-itemwidth=\"180\" data-touchscroll=\"drag\" data-freemode=\"no\" data-imagesize=\"auto\" data-scrollitems=\"1\" data-scrollitems-medium=\"0\" data-scrollitems-small=\"0\" data-centeredslides=\"no\" data-rotationangle=\"50\" data-depth=\"100\" data-speed=\"500\" data-shadow=\"no\" data-pagination=\"bullets\" style=\"--awb-column-spacing:40px;--awb-dots-align:center;\"><div class=\"swiper-wrapper awb-image-carousel-wrapper fusion-flex-align-items-center\"><div class=\"swiper-slide\"><div class=\"fusion-carousel-item-wrapper\"><div class=\"fusion-image-wrapper hover-type-none\"><img decoding=\"async\" width=\"167\" height=\"125\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27167%27%20height%3D%27125%27%20viewBox%3D%270%200%20167%20125%27%3E%3Crect%20width%3D%27167%27%20height%3D%27125%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" class=\"attachment-full size-full lazyload\" alt=\"\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/the-grunt-club.jpg\" \/><\/div><\/div><\/div><div class=\"swiper-slide\"><div class=\"fusion-carousel-item-wrapper\"><div class=\"fusion-image-wrapper hover-type-none\"><img decoding=\"async\" width=\"339\" height=\"125\" src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/logo-club-de-trafic-de-montreal-isaac.png\" class=\"attachment-full size-full lazyload\" alt=\"\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27339%27%20height%3D%27125%27%20viewBox%3D%270%200%20339%20125%27%3E%3Crect%20width%3D%27339%27%20height%3D%27125%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/logo-club-de-trafic-de-montreal-isaac.png\" data-srcset=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/logo-club-de-trafic-de-montreal-isaac-200x74.png 200w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/logo-club-de-trafic-de-montreal-isaac.png 339w\" data-sizes=\"auto\" \/><\/div><\/div><\/div><div class=\"swiper-slide\"><div class=\"fusion-carousel-item-wrapper\"><div class=\"fusion-image-wrapper hover-type-none\"><img decoding=\"async\" width=\"109\" height=\"125\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27109%27%20height%3D%27125%27%20viewBox%3D%270%200%20109%20125%27%3E%3Crect%20width%3D%27109%27%20height%3D%27125%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" class=\"attachment-full size-full lazyload\" alt=\"\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/hwy.jpg\" \/><\/div><\/div><\/div><div class=\"swiper-slide\"><div class=\"fusion-carousel-item-wrapper\"><div class=\"fusion-image-wrapper hover-type-none\"><img decoding=\"async\" width=\"233\" height=\"125\" src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/ctpat.jpg\" class=\"attachment-full size-full lazyload\" alt=\"\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27233%27%20height%3D%27125%27%20viewBox%3D%270%200%20233%20125%27%3E%3Crect%20width%3D%27233%27%20height%3D%27125%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/ctpat.jpg\" data-srcset=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/ctpat-200x107.jpg 200w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/ctpat.jpg 233w\" data-sizes=\"auto\" \/><\/div><\/div><\/div><div class=\"swiper-slide\"><div class=\"fusion-carousel-item-wrapper\"><div class=\"fusion-image-wrapper hover-type-none\"><img decoding=\"async\" width=\"227\" height=\"125\" src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/CargoM_logo_FR.png\" class=\"attachment-full size-full lazyload\" alt=\"\" srcset=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27227%27%20height%3D%27125%27%20viewBox%3D%270%200%20227%20125%27%3E%3Crect%20width%3D%27227%27%20height%3D%27125%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/CargoM_logo_FR.png\" data-srcset=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/CargoM_logo_FR-200x110.png 200w, https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/CargoM_logo_FR.png 227w\" data-sizes=\"auto\" \/><\/div><\/div><\/div><div class=\"swiper-slide\"><div class=\"fusion-carousel-item-wrapper\"><div class=\"fusion-image-wrapper hover-type-none\"><img decoding=\"async\" width=\"175\" height=\"125\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27175%27%20height%3D%27125%27%20viewBox%3D%270%200%20175%20125%27%3E%3Crect%20width%3D%27175%27%20height%3D%27125%27%20fill-opacity%3D%220%22%2F%3E%3C%2Fsvg%3E\" class=\"attachment-full size-full lazyload\" alt=\"\" data-orig-src=\"https:\/\/www.trac-world.com\/wp-content\/uploads\/2025\/12\/armateurs-saint-laurent.jpg\" \/><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"100-width.php","meta":{"footnotes":""},"class_list":["post-10348","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/pages\/10348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/comments?post=10348"}],"version-history":[{"count":103,"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/pages\/10348\/revisions"}],"predecessor-version":[{"id":10531,"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/pages\/10348\/revisions\/10531"}],"wp:attachment":[{"href":"https:\/\/www.trac-world.com\/en\/wp-json\/wp\/v2\/media?parent=10348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}