Suivi d'exp\u00e9dition \u2014 Tracking<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');\r\n\r\n :root{\r\n --petrol-950:#071F1C;\r\n --petrol-900:#0B342F;\r\n --petrol-850:#0E3F38;\r\n --petrol-800:#12493F;\r\n --petrol-700:#1C6357;\r\n --petrol-line: rgba(255,255,255,.14);\r\n --gold-500:#D9A62B;\r\n --gold-400:#EAC15C;\r\n --gold-600:#B4871E;\r\n --cream-50:#F8F6EF;\r\n --cream-100:#F0ECE0;\r\n --ink-900:#0C201C;\r\n --ink-600:#54685F;\r\n --ink-400:#8A9A93;\r\n --ink-500:#6C8686;\r\n --white:#FFFFFF;\r\n --black:#000000;\r\n --shadow-soft: 0 20px 60px -25px rgba(9,45,40,.35);\r\n --shadow-card: 0 10px 30px -15px rgba(9,45,40,.25);\r\n --radius-lg:24px;\r\n --radius-md:16px;\r\n --radius-sm:10px;\r\n --ease: cubic-bezier(.22,.68,0,1);\r\n }\r\n\r\n *{box-sizing:border-box;margin:0;padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{\r\n font-family:'Inter', sans-serif;\r\n background:var(--cream-50);\r\n color:var(--ink-900);\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n }\r\n \/* neutralise les styles globaux du th\u00e8me d'accueil (taille, majuscules, gras)\r\n qui peuvent s'appliquer aux balises brutes p \/ span \/ a une fois la page publi\u00e9e *\/\r\n p, span, a, li, label, small, b, strong{\r\n font-size:inherit; font-weight:inherit; text-transform:none !important; letter-spacing:normal;\r\n }\r\n img{max-width:100%;display:block;}\r\n .mono{font-family:'IBM Plex Mono', monospace; letter-spacing:.02em;}\r\n h1,h2,h3{\r\n font-family:'Space Grotesk', sans-serif !important;\r\n font-weight:700 !important;\r\n letter-spacing:-.01em !important;\r\n text-transform:none !important;\r\n color:var(--ink-900);\r\n }\r\n a{color:inherit;}\r\n button{font-family:inherit; cursor:pointer;}\r\n\r\n .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}\r\n\r\n \/* reveal on scroll *\/\r\n .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}\r\n .reveal.in{opacity:1; transform:translateY(0);}\r\n .reveal-stagger > * { transition-delay: calc(var(--i,0) * 90ms); }\r\n\r\n \/* ---------- route thread (signature element) ---------- *\/\r\n .route-thread{\r\n position:fixed; left:28px; top:0; bottom:0; width:2px; z-index:5;\r\n display:flex; justify-content:center; pointer-events:none;\r\n }\r\n .route-thread::before{\r\n content:\"\"; position:absolute; top:0; bottom:0; width:1px;\r\n background:repeating-linear-gradient(to bottom, rgba(11,52,47,.18) 0 6px, transparent 6px 14px);\r\n }\r\n .route-dot{\r\n position:absolute; top:0; width:10px; height:10px; border-radius:50%;\r\n background:var(--gold-500); box-shadow:0 0 0 5px rgba(217,166,43,.18);\r\n transform:translate(-50%,-50%); left:1px; transition: top .1s linear;\r\n }\r\n @media (max-width:1000px){ .route-thread{display:none;} }\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n background:linear-gradient(160deg, var(--petrol-950) 0%, var(--petrol-900) 45%, var(--petrol-800) 100%);\r\n padding:36px 0 96px;\r\n overflow:hidden;\r\n }\r\n .hero-map{\r\n position:absolute; inset:0; opacity:.35; pointer-events:none;\r\n }\r\n .hero-glow{\r\n position:absolute; width:640px; height:640px; border-radius:50%;\r\n background:radial-gradient(circle, rgba(217,166,43,.18), transparent 70%);\r\n top:-220px; right:-180px; pointer-events:none;\r\n }\r\n .hero-inner{\r\n position:relative; z-index:2;\r\n display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;\r\n padding-top:36px;\r\n }\r\n .eyebrow{\r\n display:inline-flex; align-items:center; gap:8px;\r\n background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);\r\n color:var(--gold-400); font-size:12.5px; font-weight:600;\r\n padding:7px 14px 7px 10px; border-radius:999px; margin-bottom:22px;\r\n letter-spacing:.03em;\r\n }\r\n .eyebrow .pin{\r\n width:14px; height:14px; display:inline-block;\r\n animation:pinpulse 2.2s ease-in-out infinite;\r\n }\r\n @keyframes pinpulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }\r\n\r\n .hero h1{\r\n color:var(--white) !important;\r\n font-size:clamp(34px, 4.4vw, 52px) !important;\r\n line-height:1.08 !important;\r\n margin-bottom:18px;\r\n text-transform:none !important;\r\n }\r\n .hero h1 em{ color:var(--gold-400); font-style:normal; }\r\n .hero p.sub{\r\n color:rgba(255,255,255,.68) !important;\r\n font-size:16.5px !important; line-height:1.6 !important;\r\n font-weight:400 !important; text-transform:none !important;\r\n max-width:480px; margin-bottom:34px;\r\n }\r\n\r\n .track-card{\r\n background:rgba(255,255,255,.055);\r\n border:1px solid rgba(255,255,255,.14);\r\n backdrop-filter:blur(6px);\r\n border-radius:var(--radius-lg);\r\n padding:26px 26px 22px;\r\n box-shadow:var(--shadow-soft);\r\n }\r\n .track-form{\r\n display:flex; gap:10px; flex-wrap:wrap;\r\n }\r\n .track-input-wrap{\r\n flex:1 1 260px; position:relative; display:flex; align-items:center;\r\n background:var(--white); border-radius:var(--radius-md);\r\n box-shadow:0 8px 24px -12px rgba(0,0,0,.35);\r\n transition:box-shadow .25s var(--ease), transform .25s var(--ease);\r\n }\r\n .track-input-wrap:focus-within{ box-shadow:0 0 0 3px rgba(217,166,43,.45), 0 8px 24px -12px rgba(0,0,0,.35); transform:translateY(-1px); }\r\n .track-input-wrap svg{ flex:0 0 auto; margin-left:16px; color:var(--petrol-700); }\r\n #tracking-ref{\r\n flex:1; border:none; outline:none; background:transparent;\r\n padding:16px 14px; font-size:15px; font-family:'IBM Plex Mono', monospace; color:var(--ink-900);\r\n }\r\n #tracking-ref::placeholder{ color:var(--ink-400); font-family:'Inter',sans-serif; }\r\n\r\n .btn-gold{\r\n display:inline-flex; align-items:center; gap:8px;\r\n background:linear-gradient(180deg, var(--gold-400), var(--gold-500));\r\n color:var(--petrol-950); border:none; font-weight:700; font-size:14.5px;\r\n padding:0 26px; border-radius:var(--radius-md);\r\n box-shadow:0 10px 26px -10px rgba(217,166,43,.65);\r\n transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);\r\n }\r\n .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(217,166,43,.8); filter:brightness(1.03); }\r\n .btn-gold:active{ transform:translateY(0); }\r\n .btn-gold svg{ transition:transform .3s var(--ease); }\r\n .btn-gold:hover svg{ transform:translateX(2px) rotate(0deg); }\r\n\r\n .track-help{\r\n margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.55;\r\n }\r\n .track-help b{ color:rgba(255,255,255,.75); font-weight:600; }\r\n\r\n \/* video demo card *\/\r\n .demo-badge{\r\n display:inline-flex; align-items:center; gap:7px;\r\n background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);\r\n color:rgba(255,255,255,.8); font-size:12px; font-weight:600;\r\n padding:6px 12px; border-radius:999px; margin-bottom:14px;\r\n }\r\n .demo-card{\r\n position:relative; border-radius:20px; overflow:hidden;\r\n background:linear-gradient(155deg, var(--petrol-800), var(--petrol-900));\r\n border:1px solid rgba(255,255,255,.12);\r\n box-shadow:var(--shadow-soft);\r\n aspect-ratio:4\/3.1;\r\n transition:transform .4s var(--ease), box-shadow .4s var(--ease);\r\n }\r\n .demo-card:hover{ transform:scale(1.012); box-shadow:0 28px 70px -22px rgba(9,45,40,.55); }\r\n .demo-screen{\r\n position:absolute; inset:14px; background:var(--cream-50); border-radius:14px;\r\n padding:18px; display:flex; flex-direction:column; gap:12px;\r\n font-family:'Inter',sans-serif;\r\n }\r\n .demo-topline{ display:flex; gap:6px; }\r\n .demo-topline span{ width:8px; height:8px; border-radius:50%; background:var(--cream-100); border:1px solid rgba(11,52,47,.15); }\r\n .demo-input-row{ display:flex; gap:8px; margin-top:6px; }\r\n .demo-input{\r\n flex:1; background:var(--white); border:1px solid rgba(11,52,47,.14); border-radius:8px;\r\n padding:9px 10px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-900);\r\n display:flex; align-items:center; min-height:32px;\r\n }\r\n .demo-input .caret{ display:inline-block; width:2px; height:13px; background:var(--petrol-700); margin-left:2px; animation:blink 1s step-end infinite; }\r\n @keyframes blink{ 50%{opacity:0;} }\r\n .demo-btn{\r\n background:var(--gold-500); border-radius:8px; padding:0 12px; font-size:11.5px; font-weight:700;\r\n color:var(--petrol-950); display:flex; align-items:center; transition:filter .2s;\r\n }\r\n .demo-result{\r\n margin-top:4px; background:var(--white); border-radius:10px; padding:12px;\r\n box-shadow:var(--shadow-card); opacity:0; transform:translateY(8px);\r\n transition:opacity .45s var(--ease), transform .45s var(--ease);\r\n }\r\n .demo-result.show{ opacity:1; transform:translateY(0); }\r\n .demo-route{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-600); margin-bottom:8px; font-family:'IBM Plex Mono',monospace;}\r\n .demo-steps{ display:flex; justify-content:space-between; position:relative; padding:0 2px; }\r\n .demo-steps::before{ content:\"\"; position:absolute; top:5px; left:8px; right:8px; height:2px; background:var(--cream-100); z-index:0; }\r\n .demo-steps .bar{ position:absolute; top:5px; left:8px; height:2px; background:var(--gold-500); width:0%; transition:width .5s var(--ease); z-index:1; }\r\n .demo-step{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:5px; width:20%; }\r\n .demo-step .dot{ width:11px; height:11px; border-radius:50%; background:var(--cream-100); border:2px solid var(--white); box-shadow:0 0 0 1px rgba(11,52,47,.15); transition:background .3s, transform .3s; }\r\n .demo-step.active .dot{ background:var(--gold-500); transform:scale(1.15); }\r\n .demo-step.done .dot{ background:var(--petrol-700); }\r\n .demo-step small{ font-size:8px; color:var(--ink-600); text-align:center; line-height:1.2; }\r\n .demo-final{\r\n margin-top:8px; text-align:center; font-size:12px; font-weight:700; color:var(--petrol-800);\r\n opacity:0; transition:opacity .4s var(--ease);\r\n }\r\n .demo-final.show{ opacity:1; }\r\n\r\n .play-btn{\r\n position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%;\r\n background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;\r\n box-shadow:0 12px 30px -10px rgba(0,0,0,.5);\r\n transition:transform .25s var(--ease), background .25s var(--ease);\r\n z-index:5;\r\n }\r\n .play-btn:hover{ transform:scale(1.08); background:var(--white); }\r\n .play-btn svg{ margin-left:3px; }\r\n .demo-card.playing .play-btn{ opacity:0; pointer-events:none; transform:scale(.8); }\r\n .demo-card .play-btn{ transition:opacity .25s, transform .25s; }\r\n .demo-veil{\r\n position:absolute; inset:0; background:rgba(7,31,28,.28); z-index:3;\r\n transition:opacity .3s var(--ease);\r\n }\r\n .demo-card.playing .demo-veil{ opacity:0; pointer-events:none; }\r\n\r\n \/* ---------- stats ---------- *\/\r\n .stats{ background:var(--cream-50); padding:64px 0 20px; }\r\n .stats-grid{\r\n display:grid; grid-template-columns:repeat(6,1fr); gap:14px;\r\n }\r\n .stat-card{\r\n background:var(--white); border:1px solid rgba(11,52,47,.08);\r\n border-radius:var(--radius-md); padding:20px 14px; text-align:center;\r\n box-shadow:var(--shadow-card);\r\n transition:transform .3s var(--ease), box-shadow .3s var(--ease);\r\n }\r\n .stat-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(9,45,40,.3); }\r\n .stat-card .ico{ font-size:22px; margin-bottom:8px; }\r\n .stat-card .val{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink-900); }\r\n @media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }\r\n @media (max-width:520px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }\r\n\r\n \/* ---------- how it works ---------- *\/\r\n .how{ padding:110px 0 100px; background:var(--ink-500); position:relative; }\r\n .section-head{ max-width:560px; margin-bottom:56px; }\r\n .section-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-500); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; display:block; }\r\n .section-head h2{ font-size:clamp(26px,3vw,34px) !important; line-height:1.15 !important; margin-bottom:12px; text-transform:none !important; color:var(--ink-900) !important; }\r\n .section-head p{ color:var(--black); font-size:15.5px; line-height:1.6; }\r\n\r\n .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }\r\n .steps::before{\r\n content:\"\"; position:absolute; top:26px; left:calc(100%\/6); right:calc(100%\/6);\r\n height:2px; background:repeating-linear-gradient(to right, rgba(11,52,47,.18) 0 8px, transparent 8px 16px);\r\n z-index:0;\r\n }\r\n .step{ position:relative; padding:0 20px; text-align:left; }\r\n .step .num{\r\n width:52px; height:52px; border-radius:50%; background:var(--petrol-900); color:var(--gold-400);\r\n font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;\r\n display:flex; align-items:center; justify-content:center; margin-bottom:20px;\r\n position:relative; z-index:1; box-shadow:0 0 0 6px var(--cream-50);\r\n transition:transform .3s var(--ease), background .3s var(--ease);\r\n }\r\n .step:hover .num{ transform:scale(1.08); background:var(--gold-500); color:var(--petrol-950); }\r\n .step h3{ font-size:18px !important; line-height:1.3 !important; margin-bottom:8px; text-transform:none !important; color:var(--ink-900) !important; }\r\n .step p{ color:var(--black); font-size:14.5px; line-height:1.55; }\r\n @media (max-width:800px){\r\n .steps{ grid-template-columns:1fr; gap:36px; }\r\n .steps::before{ display:none; }\r\n }\r\n\r\n \/* ---------- result section ---------- *\/\r\n .result{ padding:20px 0 120px; background:var(--ink-500); }\r\n .result-card{\r\n background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);\r\n border:1px solid rgba(11,52,47,.08); overflow:hidden;\r\n }\r\n .result-top{\r\n background:linear-gradient(135deg, var(--petrol-900), var(--petrol-800));\r\n color:var(--white); padding:30px 34px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px;\r\n }\r\n .status-badge{\r\n display:inline-flex; align-items:center; gap:8px; background:rgba(234,193,92,.16);\r\n border:1px solid rgba(234,193,92,.4); color:var(--gold-400); font-weight:700; font-size:13px;\r\n padding:7px 14px; border-radius:999px; margin-bottom:12px;\r\n }\r\n .status-badge .dotpulse{ width:7px; height:7px; border-radius:50%; background:var(--gold-400); animation:pinpulse 1.6s ease-in-out infinite; }\r\n .result-route{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; }\r\n .result-note{ color:rgba(255,255,255,.65); font-size:14px; margin-top:6px; max-width:420px; }\r\n .result-meta{ display:flex; gap:28px; flex-wrap:wrap; font-size:13px; }\r\n .result-meta div span{ display:block; color:rgba(255,255,255,.5); font-size:11px; margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em; }\r\n .result-meta div b{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:13.5px; }\r\n\r\n .timeline{ padding:36px 34px 40px; }\r\n .timeline-title{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); margin-bottom:22px; font-weight:600; }\r\n .tl{ display:flex; position:relative; }\r\n .tl::before{ content:\"\"; position:absolute; top:13px; left:0; right:0; height:2px; background:var(--cream-100); }\r\n .tl-bar{ position:absolute; top:13px; left:0; height:2px; background:linear-gradient(to right, var(--petrol-700), var(--gold-500)); width:0%; transition:width 1.1s var(--ease); }\r\n .tl-step{ flex:1; text-align:center; position:relative; z-index:1; }\r\n .tl-step .pt{ width:26px; height:26px; border-radius:50%; background:var(--white); border:2px solid var(--cream-100); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); }\r\n .tl-step.done .pt{ background:var(--petrol-700); border-color:var(--petrol-700); }\r\n .tl-step.active .pt{ background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 0 0 6px rgba(217,166,43,.18); }\r\n .tl-step .pt svg{ opacity:0; transition:opacity .3s; }\r\n .tl-step.done .pt svg{ opacity:1; }\r\n .tl-step label{ font-size:12.5px; font-weight:600; color:var(--ink-900); display:block; }\r\n .tl-step small{ font-size:11px; color:var(--ink-400); }\r\n @media (max-width:700px){\r\n .tl-step label{ font-size:10.5px; }\r\n .result-top{ padding:24px; }\r\n }\r\n\r\n \/* ---------- whatsapp float button ---------- *\/\r\n .whatsapp-fab{\r\n position:fixed; right:24px; bottom:24px; z-index:50;\r\n width:56px; height:56px; border-radius:50%;\r\n background:#25D366; border:none; display:flex; align-items:center; justify-content:center;\r\n box-shadow:0 14px 30px -10px rgba(37,211,102,.55), 0 0 0 6px rgba(37,211,102,.12);\r\n transition:transform .25s var(--ease), box-shadow .25s var(--ease);\r\n }\r\n .whatsapp-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px -8px rgba(37,211,102,.65), 0 0 0 8px rgba(37,211,102,.16); }\r\n .whatsapp-fab svg{ width:28px; height:28px; }\r\n @media (max-width:600px){\r\n .whatsapp-fab{ right:16px; bottom:16px; width:50px; height:50px; }\r\n .whatsapp-fab svg{ width:24px; height:24px; }\r\n }\r\n\r\n \/* ---------- footer ---------- *\/\r\n footer{ background:var(--petrol-950); color:rgba(255,255,255,.5); text-align:center; padding:26px 0; font-size:12.5px; }\r\n footer b{ color:rgba(255,255,255,.8); }\r\n\r\n \/* responsive hero *\/\r\n @media (max-width:980px){\r\n .hero-inner{ grid-template-columns:1fr; gap:40px; }\r\n .demo-card{ aspect-ratio:16\/10; }\r\n }\r\n @media (max-width:600px){\r\n .wrap{ padding:0 18px; }\r\n .hero{ padding:20px 0 64px; }\r\n .track-form{ flex-direction:column; }\r\n .btn-gold{ padding:14px; justify-content:center; }\r\n .hero h1{ font-size:30px; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }\r\n html{ scroll-behavior:auto; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"route-thread\" aria-hidden=\"true\"><div class=\"route-dot\" id=\"routeDot\"><\/div><\/div>\r\n\r\n\r\n<section class=\"hero\">\r\n <div class=\"hero-glow\"><\/div>\r\n <svg class=\"hero-map\" viewBox=\"0 0 1200 500\" preserveAspectRatio=\"xMidYMid slice\">\r\n <g fill=\"none\" stroke=\"rgba(255,255,255,.5)\" stroke-width=\"1\">\r\n <circle cx=\"120\" cy=\"90\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"380\" cy=\"160\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"680\" cy=\"80\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"950\" cy=\"180\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"820\" cy=\"330\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"260\" cy=\"300\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <path d=\"M120,90 Q250,20 380,160\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M380,160 Q550,60 680,80\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M680,80 Q820,40 950,180\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M950,180 Q900,260 820,330\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M260,300 Q450,380 820,330\" stroke-dasharray=\"4 6\"\/>\r\n <\/g>\r\n <\/svg>\r\n\r\n <div class=\"wrap hero-inner\">\r\n <div class=\"reveal in\">\r\n <span class=\"eyebrow\">\r\n <svg class=\"pin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z\"\/><circle cx=\"12\" cy=\"9.5\" r=\"2.4\"\/><\/svg>\r\n Suivi international \u00b7 temps r\u00e9el\r\n <\/span>\r\n <h1>Suivez votre <em>exp\u00e9dition<\/em><br>en temps r\u00e9el<\/h1>\r\n <p class=\"sub\">Entrez votre num\u00e9ro de suivi pour conna\u00eetre instantan\u00e9ment la position et le statut de votre marchandise, o\u00f9 qu'elle soit dans le monde.<\/p>\r\n\r\n <div class=\"track-card\">\r\n <form class=\"track-form\" id=\"trackForm\">\r\n <label for=\"tracking-ref\" style=\"position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);\">R\u00e9f\u00e9rence d'exp\u00e9dition\/ N\u00b0AWB\/N\u00b0BL<\/label>\r\n <div class=\"track-input-wrap\">\r\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\r\n <input type=\"text\" id=\"tracking-ref\" name=\"tracking_reference\" placeholder=\"R\u00e9f\u00e9rence exp\u00e9dition ou num\u00e9ro AWB\" autocomplete=\"off\">\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-gold\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\r\n Rechercher\r\n <\/button>\r\n <\/form>\r\n <p class=\"track-help\"><b>Astuce :<\/b> pour une recherche multiple, s\u00e9parez les num\u00e9ros par une virgule ou un espace. Exemple : PL-2025-00437, 157-12345678<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal in\" style=\"transition-delay:.15s\">\r\n <span class=\"demo-badge\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M10 8l6 4-6 4z\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\r\n Voir comment \u00e7a fonctionne\r\n <\/span>\r\n <div class=\"demo-card\" id=\"demoCard\">\r\n <div class=\"demo-screen\">\r\n <div class=\"demo-topline\"><span><\/span><span><\/span><span><\/span><\/div>\r\n <div style=\"font-size:11px;color:var(--ink-600);font-weight:600;margin-top:2px;\">Suivi d'exp\u00e9dition<\/div>\r\n <div class=\"demo-input-row\">\r\n <div class=\"demo-input\"><span id=\"demoTyped\"><\/span><span class=\"caret\"><\/span><\/div>\r\n <div class=\"demo-btn\" id=\"demoBtn\">Rechercher<\/div>\r\n <\/div>\r\n <div class=\"demo-result\" id=\"demoResult\">\r\n <div class=\"demo-route\"><span>Paris (CDG)<\/span><span>Casablanca (CMN)<\/span><\/div>\r\n <div class=\"demo-steps\">\r\n <div class=\"bar\" id=\"demoBar\"><\/div>\r\n <div class=\"demo-step\" data-s=\"0\"><div class=\"dot\"><\/div><small>Confirm\u00e9e<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"1\"><div class=\"dot\"><\/div><small>En transit<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"2\"><div class=\"dot\"><\/div><small>Hub<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"3\"><div class=\"dot\"><\/div><small>Livraison<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"4\"><div class=\"dot\"><\/div><small>Livr\u00e9e<\/small><\/div>\r\n <\/div>\r\n <div class=\"demo-final\" id=\"demoFinal\">\u2713 Exp\u00e9dition livr\u00e9e<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"demo-veil\"><\/div>\r\n <button class=\"play-btn\" id=\"playBtn\" aria-label=\"Lancer la d\u00e9monstration\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"var(--petrol-900)\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"how\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"section-eyebrow\">Processus<\/span>\r\n <h2>Comment \u00e7a marche ?<\/h2>\r\n <p>Trois \u00e9tapes suffisent pour garder un \u0153il sur votre marchandise, du d\u00e9part jusqu'\u00e0 la livraison finale.<\/p>\r\n <\/div>\r\n <div class=\"steps\">\r\n <div class=\"step reveal\">\r\n <div class=\"num\">01<\/div>\r\n <h3>Entrez votre r\u00e9f\u00e9rence<\/h3>\r\n <p>Saisissez votre num\u00e9ro AWB ou votre r\u00e9f\u00e9rence d'exp\u00e9dition dans le champ de recherche.<\/p>\r\n <\/div>\r\n <div class=\"step reveal\" style=\"transition-delay:.1s\">\r\n <div class=\"num\">02<\/div>\r\n <h3>Consultez votre trajet<\/h3>\r\n <p>Visualisez la position et l'\u00e9tat actuel de votre marchandise sur son itin\u00e9raire complet.<\/p>\r\n <\/div>\r\n <div class=\"step reveal\" style=\"transition-delay:.2s\">\r\n <div class=\"num\">03<\/div>\r\n <h3>Recevez votre livraison<\/h3>\r\n <p>Suivez chaque \u00e9tape jusqu'\u00e0 la livraison finale, en toute transparence.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"result\" id=\"resultSection\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"section-eyebrow\">R\u00e9sultat de recherche<\/span>\r\n <h2>L'\u00e9tat de votre exp\u00e9dition, en un coup d'\u0153il<\/h2>\r\n <p>Un aper\u00e7u clair du statut, du trajet et de chaque \u00e9tape franchie par votre marchandise.<\/p>\r\n <\/div>\r\n\r\n <div class=\"result-card reveal\">\r\n <div class=\"result-top\">\r\n <div>\r\n <div class=\"status-badge\"><span class=\"dotpulse\"><\/span> En transit<\/div>\r\n <div class=\"result-route\" id=\"resRoute\">Paris \u2192 Casablanca<\/div>\r\n <div class=\"result-note\">Votre exp\u00e9dition est actuellement en transit vers sa destination.<\/div>\r\n <\/div>\r\n <div class=\"result-meta\">\r\n <div><span>N\u00b0 AWB<\/span><b id=\"resAwb\" class=\"mono\">157-12345678<\/b><\/div>\r\n <div><span>Origine<\/span><b>Paris, FR<\/b><\/div>\r\n <div><span>Destination<\/span><b>Casablanca, MA<\/b><\/div>\r\n <div><span>Livraison estim\u00e9e<\/span><b id=\"resEta\">12 ao\u00fbt 2026<\/b><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline\">\r\n <div class=\"timeline-title\">Timeline de l'exp\u00e9dition<\/div>\r\n <div class=\"tl\">\r\n <div class=\"tl-bar\" id=\"tlBar\"><\/div>\r\n <div class=\"tl-step done\" data-t=\"0\"><div class=\"pt\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div><label>Confirm\u00e9e<\/label><small>02 ao\u00fbt<\/small><\/div>\r\n <div class=\"tl-step done\" data-t=\"1\"><div class=\"pt\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div><label>En transit<\/label><small>05 ao\u00fbt<\/small><\/div>\r\n <div class=\"tl-step active\" data-t=\"2\"><div class=\"pt\"><\/div><label>Arriv\u00e9e hub<\/label><small>08 ao\u00fbt<\/small><\/div>\r\n <div class=\"tl-step\" data-t=\"3\"><div class=\"pt\"><\/div><label>En livraison<\/label><small>\u2014<\/small><\/div>\r\n <div class=\"tl-step\" data-t=\"4\"><div class=\"pt\"><\/div><label>Livr\u00e9e<\/label><small>\u2014<\/small><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ ---- scroll reveal ----\r\n const revealEls = document.querySelectorAll('.reveal');\r\n const io = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });\r\n }, { threshold: .15 });\r\n revealEls.forEach(el=> io.observe(el));\r\n\r\n \/\/ ---- route thread progress dot ----\r\n const dot = document.getElementById('routeDot');\r\n function updateDot(){\r\n const h = document.documentElement;\r\n const scrolled = h.scrollTop \/ (h.scrollHeight - h.clientHeight);\r\n const track = window.innerHeight;\r\n dot.style.top = (scrolled * (document.body.scrollHeight - 40)) + 'px';\r\n }\r\n document.addEventListener('scroll', updateDot);\r\n updateDot();\r\n\r\n \/\/ ---- hero demo animation ----\r\n const demoCard = document.getElementById('demoCard');\r\n const playBtn = document.getElementById('playBtn');\r\n const demoTyped = document.getElementById('demoTyped');\r\n const demoResult = document.getElementById('demoResult');\r\n const demoBar = document.getElementById('demoBar');\r\n const demoFinal = document.getElementById('demoFinal');\r\n const demoSteps = demoCard.querySelectorAll('.demo-step');\r\n let demoRunning = false;\r\n const AWB = \"157-12345678\";\r\n\r\n function resetDemo(){\r\n demoTyped.textContent = '';\r\n demoResult.classList.remove('show');\r\n demoBar.style.width = '0%';\r\n demoFinal.classList.remove('show');\r\n demoSteps.forEach(s=> s.classList.remove('active','done'));\r\n }\r\n\r\n function playDemo(){\r\n if(demoRunning) return;\r\n demoRunning = true;\r\n resetDemo();\r\n demoCard.classList.add('playing');\r\n let i = 0;\r\n const typer = setInterval(()=>{\r\n demoTyped.textContent = AWB.slice(0, i);\r\n i++;\r\n if(i > AWB.length){\r\n clearInterval(typer);\r\n setTimeout(()=>{\r\n demoResult.classList.add('show');\r\n runSteps(0);\r\n }, 350);\r\n }\r\n }, 65);\r\n }\r\n\r\n function runSteps(idx){\r\n if(idx >= demoSteps.length){\r\n demoFinal.classList.add('show');\r\n setTimeout(()=>{ demoRunning = false; demoCard.classList.remove('playing'); }, 1400);\r\n return;\r\n }\r\n demoSteps.forEach((s,k)=>{\r\n if(k < idx) s.classList.add('done');\r\n });\r\n demoSteps[idx].classList.add('active');\r\n demoBar.style.width = ((idx) \/ (demoSteps.length-1) * 100) + '%';\r\n setTimeout(()=>{\r\n demoSteps[idx].classList.remove('active');\r\n demoSteps[idx].classList.add('done');\r\n runSteps(idx+1);\r\n }, 700);\r\n }\r\n\r\n playBtn.addEventListener('click', playDemo);\r\n demoCard.addEventListener('click', (e)=>{\r\n if(demoCard.classList.contains('playing') && e.target !== playBtn){\r\n demoRunning = false;\r\n demoCard.classList.remove('playing');\r\n }\r\n });\r\n\r\n \/\/ ---- hero form -> reveal result section with typed reference ----\r\n const trackForm = document.getElementById('trackForm');\r\n const resultSection = document.getElementById('resultSection');\r\n const resAwb = document.getElementById('resAwb');\r\n const resRoute = document.getElementById('resRoute');\r\n const tlBar = document.getElementById('tlBar');\r\n\r\n trackForm.addEventListener('submit', (e)=>{\r\n e.preventDefault();\r\n const val = document.getElementById('tracking-ref').value.trim();\r\n if(val){ resAwb.textContent = val.split(\/[, ]+\/)[0]; }\r\n resultSection.scrollIntoView({ behavior:'smooth', block:'start' });\r\n tlBar.style.width = '0%';\r\n setTimeout(()=>{ tlBar.style.width = '55%'; }, 300);\r\n\r\n \/*\r\n NOTE POUR L'INT\u00c9GRATION BACKEND :\r\n Ce formulaire est pr\u00eat pour \u00eatre reli\u00e9 \u00e0 la logique de recherche existante.\r\n Remplacer ce comportement de d\u00e9monstration par l'appel r\u00e9el \u00e0 l'API\/backend\r\n de tracking, puis injecter la r\u00e9ponse (statut, origine, destination, ETA,\r\n timeline) dans les \u00e9l\u00e9ments #resAwb, #resRoute, .result-note, .tl-step, etc.\r\n *\/\r\n });\r\n\r\n \/\/ init timeline bar width based on \"done\" steps already in markup\r\n window.addEventListener('load', ()=>{\r\n const doneCount = document.querySelectorAll('.tl-step.done').length;\r\n const total = document.querySelectorAll('.tl-step').length;\r\n tlBar.style.width = ((doneCount-0.5)\/(total-1)*100) + '%';\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<div class=\"elementor-element elementor-element-3005d3b e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"3005d3b\" 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-c5f80f6 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"c5f80f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\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-443a812d e-flex e-con-boxed cut-corner-no sticky-container-off elementor-invisible e-con e-parent\" data-id=\"443a812d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"animation":"zoomIn"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7978140f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"7978140f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34cafbb8 elementor-widget elementor-widget-logico_heading\" data-id=\"34cafbb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"logico-title\">Pr\u00eat \u00e0 d\u00e9marrer ?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a1cedfc e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"2a1cedfc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44085d16 elementor-widget elementor-widget-logico_button\" data-id=\"44085d16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n <div class=\"button-widget\">\n <div class=\"button-container\">\n <a href=\"https:\/\/portalisholding.com\/demande-de-cotations\/\" target=\"_blank\" class=\"logico-alter-button\">\n Demande de devis <\/a>\n <\/div>\n <\/div>\n \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f826c4e elementor-widget elementor-widget-logico_button\" data-id=\"3f826c4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n <div class=\"button-widget\">\n <div class=\"button-container\">\n <a href=\"https:\/\/portalisholding.com\/contacts\/\" target=\"_blank\" class=\"logico-alter-button\">\n Contact <\/a>\n <\/div>\n <\/div>\n \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-4c62ec9 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"4c62ec9\" 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-ffee1e7 elementor-widget elementor-widget-html\" data-id=\"ffee1e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"badges-wrap\">\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83c\udf0d<\/span> 15+ Pays<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\u2708\ufe0f<\/span> Fret A\u00e9rien<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udea2<\/span> Fret Maritime<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\ude9b<\/span> Transport Routier<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udd12<\/span> Paiement S\u00e9curis\u00e9<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\u2b50<\/span> 98% Clients Satisfaits<\/div>\n<\/div>\n<style>\n.badges-wrap {\n background: #fafaf5;\n padding: 20px 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 32px;\n border-top: 1px solid #e8e4dc;\n}\n.badge-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n color: #2c2c2c;\n font-weight: 500;\n}\n.badge-item span.badge-icon {\n font-size: 20px;\n}\n.cta-content {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n}\n.cta-content.visible {\n opacity: 1;\n transform: translateY(0);\n}\n@media (max-width: 600px) {\n .badges-wrap { padding: 20px; gap: 16px; }\n .badge-item { font-size: 13px; }\n}\n<\/style>\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","protected":false},"excerpt":{"rendered":"<p>Suivi d’exp\u00e9dition \u2014 Tracking Suivi international \u00b7 temps r\u00e9el Suivez votre exp\u00e9ditionen temps r\u00e9el Entrez votre num\u00e9ro de suivi pour conna\u00eetre instantan\u00e9ment la position et le statut de votre marchandise, o\u00f9 qu’elle soit dans le monde. R\u00e9f\u00e9rence d’exp\u00e9dition\/ N\u00b0AWB\/N\u00b0BL Rechercher Astuce…<\/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-10634","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/10634","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=10634"}],"version-history":[{"count":109,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/10634\/revisions"}],"predecessor-version":[{"id":15459,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/10634\/revisions\/15459"}],"wp:attachment":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/media?parent=10634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t\t

\n\t\t\t\t

\n\t\t\t\t\t\r\n\r\n\r\n\r\n\r\nSuivi d'exp\u00e9dition \u2014 Tracking<\/title>\r\n<style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');\r\n\r\n :root{\r\n --petrol-950:#071F1C;\r\n --petrol-900:#0B342F;\r\n --petrol-850:#0E3F38;\r\n --petrol-800:#12493F;\r\n --petrol-700:#1C6357;\r\n --petrol-line: rgba(255,255,255,.14);\r\n --gold-500:#D9A62B;\r\n --gold-400:#EAC15C;\r\n --gold-600:#B4871E;\r\n --cream-50:#F8F6EF;\r\n --cream-100:#F0ECE0;\r\n --ink-900:#0C201C;\r\n --ink-600:#54685F;\r\n --ink-400:#8A9A93;\r\n --ink-500:#6C8686;\r\n --white:#FFFFFF;\r\n --black:#000000;\r\n --shadow-soft: 0 20px 60px -25px rgba(9,45,40,.35);\r\n --shadow-card: 0 10px 30px -15px rgba(9,45,40,.25);\r\n --radius-lg:24px;\r\n --radius-md:16px;\r\n --radius-sm:10px;\r\n --ease: cubic-bezier(.22,.68,0,1);\r\n }\r\n\r\n *{box-sizing:border-box;margin:0;padding:0;}\r\n html{scroll-behavior:smooth;}\r\n body{\r\n font-family:'Inter', sans-serif;\r\n background:var(--cream-50);\r\n color:var(--ink-900);\r\n -webkit-font-smoothing:antialiased;\r\n overflow-x:hidden;\r\n }\r\n \/* neutralise les styles globaux du th\u00e8me d'accueil (taille, majuscules, gras)\r\n qui peuvent s'appliquer aux balises brutes p \/ span \/ a une fois la page publi\u00e9e *\/\r\n p, span, a, li, label, small, b, strong{\r\n font-size:inherit; font-weight:inherit; text-transform:none !important; letter-spacing:normal;\r\n }\r\n img{max-width:100%;display:block;}\r\n .mono{font-family:'IBM Plex Mono', monospace; letter-spacing:.02em;}\r\n h1,h2,h3{\r\n font-family:'Space Grotesk', sans-serif !important;\r\n font-weight:700 !important;\r\n letter-spacing:-.01em !important;\r\n text-transform:none !important;\r\n color:var(--ink-900);\r\n }\r\n a{color:inherit;}\r\n button{font-family:inherit; cursor:pointer;}\r\n\r\n .wrap{max-width:1180px; margin:0 auto; padding:0 32px;}\r\n\r\n \/* reveal on scroll *\/\r\n .reveal{opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease);}\r\n .reveal.in{opacity:1; transform:translateY(0);}\r\n .reveal-stagger > * { transition-delay: calc(var(--i,0) * 90ms); }\r\n\r\n \/* ---------- route thread (signature element) ---------- *\/\r\n .route-thread{\r\n position:fixed; left:28px; top:0; bottom:0; width:2px; z-index:5;\r\n display:flex; justify-content:center; pointer-events:none;\r\n }\r\n .route-thread::before{\r\n content:\"\"; position:absolute; top:0; bottom:0; width:1px;\r\n background:repeating-linear-gradient(to bottom, rgba(11,52,47,.18) 0 6px, transparent 6px 14px);\r\n }\r\n .route-dot{\r\n position:absolute; top:0; width:10px; height:10px; border-radius:50%;\r\n background:var(--gold-500); box-shadow:0 0 0 5px rgba(217,166,43,.18);\r\n transform:translate(-50%,-50%); left:1px; transition: top .1s linear;\r\n }\r\n @media (max-width:1000px){ .route-thread{display:none;} }\r\n\r\n \/* ---------- hero ---------- *\/\r\n .hero{\r\n position:relative;\r\n background:linear-gradient(160deg, var(--petrol-950) 0%, var(--petrol-900) 45%, var(--petrol-800) 100%);\r\n padding:36px 0 96px;\r\n overflow:hidden;\r\n }\r\n .hero-map{\r\n position:absolute; inset:0; opacity:.35; pointer-events:none;\r\n }\r\n .hero-glow{\r\n position:absolute; width:640px; height:640px; border-radius:50%;\r\n background:radial-gradient(circle, rgba(217,166,43,.18), transparent 70%);\r\n top:-220px; right:-180px; pointer-events:none;\r\n }\r\n .hero-inner{\r\n position:relative; z-index:2;\r\n display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:start;\r\n padding-top:36px;\r\n }\r\n .eyebrow{\r\n display:inline-flex; align-items:center; gap:8px;\r\n background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);\r\n color:var(--gold-400); font-size:12.5px; font-weight:600;\r\n padding:7px 14px 7px 10px; border-radius:999px; margin-bottom:22px;\r\n letter-spacing:.03em;\r\n }\r\n .eyebrow .pin{\r\n width:14px; height:14px; display:inline-block;\r\n animation:pinpulse 2.2s ease-in-out infinite;\r\n }\r\n @keyframes pinpulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.18);} }\r\n\r\n .hero h1{\r\n color:var(--white) !important;\r\n font-size:clamp(34px, 4.4vw, 52px) !important;\r\n line-height:1.08 !important;\r\n margin-bottom:18px;\r\n text-transform:none !important;\r\n }\r\n .hero h1 em{ color:var(--gold-400); font-style:normal; }\r\n .hero p.sub{\r\n color:rgba(255,255,255,.68) !important;\r\n font-size:16.5px !important; line-height:1.6 !important;\r\n font-weight:400 !important; text-transform:none !important;\r\n max-width:480px; margin-bottom:34px;\r\n }\r\n\r\n .track-card{\r\n background:rgba(255,255,255,.055);\r\n border:1px solid rgba(255,255,255,.14);\r\n backdrop-filter:blur(6px);\r\n border-radius:var(--radius-lg);\r\n padding:26px 26px 22px;\r\n box-shadow:var(--shadow-soft);\r\n }\r\n .track-form{\r\n display:flex; gap:10px; flex-wrap:wrap;\r\n }\r\n .track-input-wrap{\r\n flex:1 1 260px; position:relative; display:flex; align-items:center;\r\n background:var(--white); border-radius:var(--radius-md);\r\n box-shadow:0 8px 24px -12px rgba(0,0,0,.35);\r\n transition:box-shadow .25s var(--ease), transform .25s var(--ease);\r\n }\r\n .track-input-wrap:focus-within{ box-shadow:0 0 0 3px rgba(217,166,43,.45), 0 8px 24px -12px rgba(0,0,0,.35); transform:translateY(-1px); }\r\n .track-input-wrap svg{ flex:0 0 auto; margin-left:16px; color:var(--petrol-700); }\r\n #tracking-ref{\r\n flex:1; border:none; outline:none; background:transparent;\r\n padding:16px 14px; font-size:15px; font-family:'IBM Plex Mono', monospace; color:var(--ink-900);\r\n }\r\n #tracking-ref::placeholder{ color:var(--ink-400); font-family:'Inter',sans-serif; }\r\n\r\n .btn-gold{\r\n display:inline-flex; align-items:center; gap:8px;\r\n background:linear-gradient(180deg, var(--gold-400), var(--gold-500));\r\n color:var(--petrol-950); border:none; font-weight:700; font-size:14.5px;\r\n padding:0 26px; border-radius:var(--radius-md);\r\n box-shadow:0 10px 26px -10px rgba(217,166,43,.65);\r\n transition:transform .22s var(--ease), box-shadow .22s var(--ease), filter .22s var(--ease);\r\n }\r\n .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 16px 30px -10px rgba(217,166,43,.8); filter:brightness(1.03); }\r\n .btn-gold:active{ transform:translateY(0); }\r\n .btn-gold svg{ transition:transform .3s var(--ease); }\r\n .btn-gold:hover svg{ transform:translateX(2px) rotate(0deg); }\r\n\r\n .track-help{\r\n margin-top:14px; font-size:12.5px; color:rgba(255,255,255,.5); line-height:1.55;\r\n }\r\n .track-help b{ color:rgba(255,255,255,.75); font-weight:600; }\r\n\r\n \/* video demo card *\/\r\n .demo-badge{\r\n display:inline-flex; align-items:center; gap:7px;\r\n background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14);\r\n color:rgba(255,255,255,.8); font-size:12px; font-weight:600;\r\n padding:6px 12px; border-radius:999px; margin-bottom:14px;\r\n }\r\n .demo-card{\r\n position:relative; border-radius:20px; overflow:hidden;\r\n background:linear-gradient(155deg, var(--petrol-800), var(--petrol-900));\r\n border:1px solid rgba(255,255,255,.12);\r\n box-shadow:var(--shadow-soft);\r\n aspect-ratio:4\/3.1;\r\n transition:transform .4s var(--ease), box-shadow .4s var(--ease);\r\n }\r\n .demo-card:hover{ transform:scale(1.012); box-shadow:0 28px 70px -22px rgba(9,45,40,.55); }\r\n .demo-screen{\r\n position:absolute; inset:14px; background:var(--cream-50); border-radius:14px;\r\n padding:18px; display:flex; flex-direction:column; gap:12px;\r\n font-family:'Inter',sans-serif;\r\n }\r\n .demo-topline{ display:flex; gap:6px; }\r\n .demo-topline span{ width:8px; height:8px; border-radius:50%; background:var(--cream-100); border:1px solid rgba(11,52,47,.15); }\r\n .demo-input-row{ display:flex; gap:8px; margin-top:6px; }\r\n .demo-input{\r\n flex:1; background:var(--white); border:1px solid rgba(11,52,47,.14); border-radius:8px;\r\n padding:9px 10px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-900);\r\n display:flex; align-items:center; min-height:32px;\r\n }\r\n .demo-input .caret{ display:inline-block; width:2px; height:13px; background:var(--petrol-700); margin-left:2px; animation:blink 1s step-end infinite; }\r\n @keyframes blink{ 50%{opacity:0;} }\r\n .demo-btn{\r\n background:var(--gold-500); border-radius:8px; padding:0 12px; font-size:11.5px; font-weight:700;\r\n color:var(--petrol-950); display:flex; align-items:center; transition:filter .2s;\r\n }\r\n .demo-result{\r\n margin-top:4px; background:var(--white); border-radius:10px; padding:12px;\r\n box-shadow:var(--shadow-card); opacity:0; transform:translateY(8px);\r\n transition:opacity .45s var(--ease), transform .45s var(--ease);\r\n }\r\n .demo-result.show{ opacity:1; transform:translateY(0); }\r\n .demo-route{ display:flex; justify-content:space-between; font-size:11px; color:var(--ink-600); margin-bottom:8px; font-family:'IBM Plex Mono',monospace;}\r\n .demo-steps{ display:flex; justify-content:space-between; position:relative; padding:0 2px; }\r\n .demo-steps::before{ content:\"\"; position:absolute; top:5px; left:8px; right:8px; height:2px; background:var(--cream-100); z-index:0; }\r\n .demo-steps .bar{ position:absolute; top:5px; left:8px; height:2px; background:var(--gold-500); width:0%; transition:width .5s var(--ease); z-index:1; }\r\n .demo-step{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:5px; width:20%; }\r\n .demo-step .dot{ width:11px; height:11px; border-radius:50%; background:var(--cream-100); border:2px solid var(--white); box-shadow:0 0 0 1px rgba(11,52,47,.15); transition:background .3s, transform .3s; }\r\n .demo-step.active .dot{ background:var(--gold-500); transform:scale(1.15); }\r\n .demo-step.done .dot{ background:var(--petrol-700); }\r\n .demo-step small{ font-size:8px; color:var(--ink-600); text-align:center; line-height:1.2; }\r\n .demo-final{\r\n margin-top:8px; text-align:center; font-size:12px; font-weight:700; color:var(--petrol-800);\r\n opacity:0; transition:opacity .4s var(--ease);\r\n }\r\n .demo-final.show{ opacity:1; }\r\n\r\n .play-btn{\r\n position:absolute; inset:0; margin:auto; width:60px; height:60px; border-radius:50%;\r\n background:rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;\r\n box-shadow:0 12px 30px -10px rgba(0,0,0,.5);\r\n transition:transform .25s var(--ease), background .25s var(--ease);\r\n z-index:5;\r\n }\r\n .play-btn:hover{ transform:scale(1.08); background:var(--white); }\r\n .play-btn svg{ margin-left:3px; }\r\n .demo-card.playing .play-btn{ opacity:0; pointer-events:none; transform:scale(.8); }\r\n .demo-card .play-btn{ transition:opacity .25s, transform .25s; }\r\n .demo-veil{\r\n position:absolute; inset:0; background:rgba(7,31,28,.28); z-index:3;\r\n transition:opacity .3s var(--ease);\r\n }\r\n .demo-card.playing .demo-veil{ opacity:0; pointer-events:none; }\r\n\r\n \/* ---------- stats ---------- *\/\r\n .stats{ background:var(--cream-50); padding:64px 0 20px; }\r\n .stats-grid{\r\n display:grid; grid-template-columns:repeat(6,1fr); gap:14px;\r\n }\r\n .stat-card{\r\n background:var(--white); border:1px solid rgba(11,52,47,.08);\r\n border-radius:var(--radius-md); padding:20px 14px; text-align:center;\r\n box-shadow:var(--shadow-card);\r\n transition:transform .3s var(--ease), box-shadow .3s var(--ease);\r\n }\r\n .stat-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px -18px rgba(9,45,40,.3); }\r\n .stat-card .ico{ font-size:22px; margin-bottom:8px; }\r\n .stat-card .val{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:14.5px; color:var(--ink-900); }\r\n @media (max-width:900px){ .stats-grid{ grid-template-columns:repeat(3,1fr); } }\r\n @media (max-width:520px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }\r\n\r\n \/* ---------- how it works ---------- *\/\r\n .how{ padding:110px 0 100px; background:var(--ink-500); position:relative; }\r\n .section-head{ max-width:560px; margin-bottom:56px; }\r\n .section-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--gold-500); letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; display:block; }\r\n .section-head h2{ font-size:clamp(26px,3vw,34px) !important; line-height:1.15 !important; margin-bottom:12px; text-transform:none !important; color:var(--ink-900) !important; }\r\n .section-head p{ color:var(--black); font-size:15.5px; line-height:1.6; }\r\n\r\n .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; position:relative; }\r\n .steps::before{\r\n content:\"\"; position:absolute; top:26px; left:calc(100%\/6); right:calc(100%\/6);\r\n height:2px; background:repeating-linear-gradient(to right, rgba(11,52,47,.18) 0 8px, transparent 8px 16px);\r\n z-index:0;\r\n }\r\n .step{ position:relative; padding:0 20px; text-align:left; }\r\n .step .num{\r\n width:52px; height:52px; border-radius:50%; background:var(--petrol-900); color:var(--gold-400);\r\n font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:16px;\r\n display:flex; align-items:center; justify-content:center; margin-bottom:20px;\r\n position:relative; z-index:1; box-shadow:0 0 0 6px var(--cream-50);\r\n transition:transform .3s var(--ease), background .3s var(--ease);\r\n }\r\n .step:hover .num{ transform:scale(1.08); background:var(--gold-500); color:var(--petrol-950); }\r\n .step h3{ font-size:18px !important; line-height:1.3 !important; margin-bottom:8px; text-transform:none !important; color:var(--ink-900) !important; }\r\n .step p{ color:var(--black); font-size:14.5px; line-height:1.55; }\r\n @media (max-width:800px){\r\n .steps{ grid-template-columns:1fr; gap:36px; }\r\n .steps::before{ display:none; }\r\n }\r\n\r\n \/* ---------- result section ---------- *\/\r\n .result{ padding:20px 0 120px; background:var(--ink-500); }\r\n .result-card{\r\n background:var(--white); border-radius:var(--radius-lg); box-shadow:var(--shadow-soft);\r\n border:1px solid rgba(11,52,47,.08); overflow:hidden;\r\n }\r\n .result-top{\r\n background:linear-gradient(135deg, var(--petrol-900), var(--petrol-800));\r\n color:var(--white); padding:30px 34px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:20px;\r\n }\r\n .status-badge{\r\n display:inline-flex; align-items:center; gap:8px; background:rgba(234,193,92,.16);\r\n border:1px solid rgba(234,193,92,.4); color:var(--gold-400); font-weight:700; font-size:13px;\r\n padding:7px 14px; border-radius:999px; margin-bottom:12px;\r\n }\r\n .status-badge .dotpulse{ width:7px; height:7px; border-radius:50%; background:var(--gold-400); animation:pinpulse 1.6s ease-in-out infinite; }\r\n .result-route{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:22px; }\r\n .result-note{ color:rgba(255,255,255,.65); font-size:14px; margin-top:6px; max-width:420px; }\r\n .result-meta{ display:flex; gap:28px; flex-wrap:wrap; font-size:13px; }\r\n .result-meta div span{ display:block; color:rgba(255,255,255,.5); font-size:11px; margin-bottom:3px; text-transform:uppercase; letter-spacing:.05em; }\r\n .result-meta div b{ font-family:'IBM Plex Mono',monospace; font-weight:500; font-size:13.5px; }\r\n\r\n .timeline{ padding:36px 34px 40px; }\r\n .timeline-title{ font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-400); margin-bottom:22px; font-weight:600; }\r\n .tl{ display:flex; position:relative; }\r\n .tl::before{ content:\"\"; position:absolute; top:13px; left:0; right:0; height:2px; background:var(--cream-100); }\r\n .tl-bar{ position:absolute; top:13px; left:0; height:2px; background:linear-gradient(to right, var(--petrol-700), var(--gold-500)); width:0%; transition:width 1.1s var(--ease); }\r\n .tl-step{ flex:1; text-align:center; position:relative; z-index:1; }\r\n .tl-step .pt{ width:26px; height:26px; border-radius:50%; background:var(--white); border:2px solid var(--cream-100); margin:0 auto 12px; display:flex; align-items:center; justify-content:center; transition:all .4s var(--ease); }\r\n .tl-step.done .pt{ background:var(--petrol-700); border-color:var(--petrol-700); }\r\n .tl-step.active .pt{ background:var(--gold-500); border-color:var(--gold-500); box-shadow:0 0 0 6px rgba(217,166,43,.18); }\r\n .tl-step .pt svg{ opacity:0; transition:opacity .3s; }\r\n .tl-step.done .pt svg{ opacity:1; }\r\n .tl-step label{ font-size:12.5px; font-weight:600; color:var(--ink-900); display:block; }\r\n .tl-step small{ font-size:11px; color:var(--ink-400); }\r\n @media (max-width:700px){\r\n .tl-step label{ font-size:10.5px; }\r\n .result-top{ padding:24px; }\r\n }\r\n\r\n \/* ---------- whatsapp float button ---------- *\/\r\n .whatsapp-fab{\r\n position:fixed; right:24px; bottom:24px; z-index:50;\r\n width:56px; height:56px; border-radius:50%;\r\n background:#25D366; border:none; display:flex; align-items:center; justify-content:center;\r\n box-shadow:0 14px 30px -10px rgba(37,211,102,.55), 0 0 0 6px rgba(37,211,102,.12);\r\n transition:transform .25s var(--ease), box-shadow .25s var(--ease);\r\n }\r\n .whatsapp-fab:hover{ transform:translateY(-3px) scale(1.05); box-shadow:0 18px 36px -8px rgba(37,211,102,.65), 0 0 0 8px rgba(37,211,102,.16); }\r\n .whatsapp-fab svg{ width:28px; height:28px; }\r\n @media (max-width:600px){\r\n .whatsapp-fab{ right:16px; bottom:16px; width:50px; height:50px; }\r\n .whatsapp-fab svg{ width:24px; height:24px; }\r\n }\r\n\r\n \/* ---------- footer ---------- *\/\r\n footer{ background:var(--petrol-950); color:rgba(255,255,255,.5); text-align:center; padding:26px 0; font-size:12.5px; }\r\n footer b{ color:rgba(255,255,255,.8); }\r\n\r\n \/* responsive hero *\/\r\n @media (max-width:980px){\r\n .hero-inner{ grid-template-columns:1fr; gap:40px; }\r\n .demo-card{ aspect-ratio:16\/10; }\r\n }\r\n @media (max-width:600px){\r\n .wrap{ padding:0 18px; }\r\n .hero{ padding:20px 0 64px; }\r\n .track-form{ flex-direction:column; }\r\n .btn-gold{ padding:14px; justify-content:center; }\r\n .hero h1{ font-size:30px; }\r\n }\r\n\r\n @media (prefers-reduced-motion: reduce){\r\n *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }\r\n html{ scroll-behavior:auto; }\r\n }\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"route-thread\" aria-hidden=\"true\"><div class=\"route-dot\" id=\"routeDot\"><\/div><\/div>\r\n\r\n\r\n<section class=\"hero\">\r\n <div class=\"hero-glow\"><\/div>\r\n <svg class=\"hero-map\" viewBox=\"0 0 1200 500\" preserveAspectRatio=\"xMidYMid slice\">\r\n <g fill=\"none\" stroke=\"rgba(255,255,255,.5)\" stroke-width=\"1\">\r\n <circle cx=\"120\" cy=\"90\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"380\" cy=\"160\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"680\" cy=\"80\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"950\" cy=\"180\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"820\" cy=\"330\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <circle cx=\"260\" cy=\"300\" r=\"2\" fill=\"rgba(255,255,255,.4)\"\/>\r\n <path d=\"M120,90 Q250,20 380,160\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M380,160 Q550,60 680,80\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M680,80 Q820,40 950,180\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M950,180 Q900,260 820,330\" stroke-dasharray=\"4 6\"\/>\r\n <path d=\"M260,300 Q450,380 820,330\" stroke-dasharray=\"4 6\"\/>\r\n <\/g>\r\n <\/svg>\r\n\r\n <div class=\"wrap hero-inner\">\r\n <div class=\"reveal in\">\r\n <span class=\"eyebrow\">\r\n <svg class=\"pin\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><path d=\"M12 21s7-6.2 7-11.5A7 7 0 0 0 5 9.5C5 14.8 12 21 12 21z\"\/><circle cx=\"12\" cy=\"9.5\" r=\"2.4\"\/><\/svg>\r\n Suivi international \u00b7 temps r\u00e9el\r\n <\/span>\r\n <h1>Suivez votre <em>exp\u00e9dition<\/em><br>en temps r\u00e9el<\/h1>\r\n <p class=\"sub\">Entrez votre num\u00e9ro de suivi pour conna\u00eetre instantan\u00e9ment la position et le statut de votre marchandise, o\u00f9 qu'elle soit dans le monde.<\/p>\r\n\r\n <div class=\"track-card\">\r\n <form class=\"track-form\" id=\"trackForm\">\r\n <label for=\"tracking-ref\" style=\"position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);\">R\u00e9f\u00e9rence d'exp\u00e9dition\/ N\u00b0AWB\/N\u00b0BL<\/label>\r\n <div class=\"track-input-wrap\">\r\n <svg width=\"17\" height=\"17\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\r\n <input type=\"text\" id=\"tracking-ref\" name=\"tracking_reference\" placeholder=\"R\u00e9f\u00e9rence exp\u00e9dition ou num\u00e9ro AWB\" autocomplete=\"off\">\r\n <\/div>\r\n <button type=\"submit\" class=\"btn-gold\">\r\n <svg width=\"15\" height=\"15\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\"><circle cx=\"11\" cy=\"11\" r=\"7\"\/><path d=\"M21 21l-4.3-4.3\"\/><\/svg>\r\n Rechercher\r\n <\/button>\r\n <\/form>\r\n <p class=\"track-help\"><b>Astuce :<\/b> pour une recherche multiple, s\u00e9parez les num\u00e9ros par une virgule ou un espace. Exemple : PL-2025-00437, 157-12345678<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"reveal in\" style=\"transition-delay:.15s\">\r\n <span class=\"demo-badge\">\r\n <svg width=\"13\" height=\"13\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M10 8l6 4-6 4z\" fill=\"currentColor\" stroke=\"none\"\/><\/svg>\r\n Voir comment \u00e7a fonctionne\r\n <\/span>\r\n <div class=\"demo-card\" id=\"demoCard\">\r\n <div class=\"demo-screen\">\r\n <div class=\"demo-topline\"><span><\/span><span><\/span><span><\/span><\/div>\r\n <div style=\"font-size:11px;color:var(--ink-600);font-weight:600;margin-top:2px;\">Suivi d'exp\u00e9dition<\/div>\r\n <div class=\"demo-input-row\">\r\n <div class=\"demo-input\"><span id=\"demoTyped\"><\/span><span class=\"caret\"><\/span><\/div>\r\n <div class=\"demo-btn\" id=\"demoBtn\">Rechercher<\/div>\r\n <\/div>\r\n <div class=\"demo-result\" id=\"demoResult\">\r\n <div class=\"demo-route\"><span>Paris (CDG)<\/span><span>Casablanca (CMN)<\/span><\/div>\r\n <div class=\"demo-steps\">\r\n <div class=\"bar\" id=\"demoBar\"><\/div>\r\n <div class=\"demo-step\" data-s=\"0\"><div class=\"dot\"><\/div><small>Confirm\u00e9e<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"1\"><div class=\"dot\"><\/div><small>En transit<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"2\"><div class=\"dot\"><\/div><small>Hub<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"3\"><div class=\"dot\"><\/div><small>Livraison<\/small><\/div>\r\n <div class=\"demo-step\" data-s=\"4\"><div class=\"dot\"><\/div><small>Livr\u00e9e<\/small><\/div>\r\n <\/div>\r\n <div class=\"demo-final\" id=\"demoFinal\">\u2713 Exp\u00e9dition livr\u00e9e<\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"demo-veil\"><\/div>\r\n <button class=\"play-btn\" id=\"playBtn\" aria-label=\"Lancer la d\u00e9monstration\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"var(--petrol-900)\"><path d=\"M8 5v14l11-7z\"\/><\/svg>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"how\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"section-eyebrow\">Processus<\/span>\r\n <h2>Comment \u00e7a marche ?<\/h2>\r\n <p>Trois \u00e9tapes suffisent pour garder un \u0153il sur votre marchandise, du d\u00e9part jusqu'\u00e0 la livraison finale.<\/p>\r\n <\/div>\r\n <div class=\"steps\">\r\n <div class=\"step reveal\">\r\n <div class=\"num\">01<\/div>\r\n <h3>Entrez votre r\u00e9f\u00e9rence<\/h3>\r\n <p>Saisissez votre num\u00e9ro AWB ou votre r\u00e9f\u00e9rence d'exp\u00e9dition dans le champ de recherche.<\/p>\r\n <\/div>\r\n <div class=\"step reveal\" style=\"transition-delay:.1s\">\r\n <div class=\"num\">02<\/div>\r\n <h3>Consultez votre trajet<\/h3>\r\n <p>Visualisez la position et l'\u00e9tat actuel de votre marchandise sur son itin\u00e9raire complet.<\/p>\r\n <\/div>\r\n <div class=\"step reveal\" style=\"transition-delay:.2s\">\r\n <div class=\"num\">03<\/div>\r\n <h3>Recevez votre livraison<\/h3>\r\n <p>Suivez chaque \u00e9tape jusqu'\u00e0 la livraison finale, en toute transparence.<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n\r\n<section class=\"result\" id=\"resultSection\">\r\n <div class=\"wrap\">\r\n <div class=\"section-head reveal\">\r\n <span class=\"section-eyebrow\">R\u00e9sultat de recherche<\/span>\r\n <h2>L'\u00e9tat de votre exp\u00e9dition, en un coup d'\u0153il<\/h2>\r\n <p>Un aper\u00e7u clair du statut, du trajet et de chaque \u00e9tape franchie par votre marchandise.<\/p>\r\n <\/div>\r\n\r\n <div class=\"result-card reveal\">\r\n <div class=\"result-top\">\r\n <div>\r\n <div class=\"status-badge\"><span class=\"dotpulse\"><\/span> En transit<\/div>\r\n <div class=\"result-route\" id=\"resRoute\">Paris \u2192 Casablanca<\/div>\r\n <div class=\"result-note\">Votre exp\u00e9dition est actuellement en transit vers sa destination.<\/div>\r\n <\/div>\r\n <div class=\"result-meta\">\r\n <div><span>N\u00b0 AWB<\/span><b id=\"resAwb\" class=\"mono\">157-12345678<\/b><\/div>\r\n <div><span>Origine<\/span><b>Paris, FR<\/b><\/div>\r\n <div><span>Destination<\/span><b>Casablanca, MA<\/b><\/div>\r\n <div><span>Livraison estim\u00e9e<\/span><b id=\"resEta\">12 ao\u00fbt 2026<\/b><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"timeline\">\r\n <div class=\"timeline-title\">Timeline de l'exp\u00e9dition<\/div>\r\n <div class=\"tl\">\r\n <div class=\"tl-bar\" id=\"tlBar\"><\/div>\r\n <div class=\"tl-step done\" data-t=\"0\"><div class=\"pt\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div><label>Confirm\u00e9e<\/label><small>02 ao\u00fbt<\/small><\/div>\r\n <div class=\"tl-step done\" data-t=\"1\"><div class=\"pt\"><svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"white\" stroke-width=\"3\"><path d=\"M20 6L9 17l-5-5\"\/><\/svg><\/div><label>En transit<\/label><small>05 ao\u00fbt<\/small><\/div>\r\n <div class=\"tl-step active\" data-t=\"2\"><div class=\"pt\"><\/div><label>Arriv\u00e9e hub<\/label><small>08 ao\u00fbt<\/small><\/div>\r\n <div class=\"tl-step\" data-t=\"3\"><div class=\"pt\"><\/div><label>En livraison<\/label><small>\u2014<\/small><\/div>\r\n <div class=\"tl-step\" data-t=\"4\"><div class=\"pt\"><\/div><label>Livr\u00e9e<\/label><small>\u2014<\/small><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n\r\n<script>\r\n \/\/ ---- scroll reveal ----\r\n const revealEls = document.querySelectorAll('.reveal');\r\n const io = new IntersectionObserver((entries)=>{\r\n entries.forEach(e=>{ if(e.isIntersecting){ e.target.classList.add('in'); io.unobserve(e.target); } });\r\n }, { threshold: .15 });\r\n revealEls.forEach(el=> io.observe(el));\r\n\r\n \/\/ ---- route thread progress dot ----\r\n const dot = document.getElementById('routeDot');\r\n function updateDot(){\r\n const h = document.documentElement;\r\n const scrolled = h.scrollTop \/ (h.scrollHeight - h.clientHeight);\r\n const track = window.innerHeight;\r\n dot.style.top = (scrolled * (document.body.scrollHeight - 40)) + 'px';\r\n }\r\n document.addEventListener('scroll', updateDot);\r\n updateDot();\r\n\r\n \/\/ ---- hero demo animation ----\r\n const demoCard = document.getElementById('demoCard');\r\n const playBtn = document.getElementById('playBtn');\r\n const demoTyped = document.getElementById('demoTyped');\r\n const demoResult = document.getElementById('demoResult');\r\n const demoBar = document.getElementById('demoBar');\r\n const demoFinal = document.getElementById('demoFinal');\r\n const demoSteps = demoCard.querySelectorAll('.demo-step');\r\n let demoRunning = false;\r\n const AWB = \"157-12345678\";\r\n\r\n function resetDemo(){\r\n demoTyped.textContent = '';\r\n demoResult.classList.remove('show');\r\n demoBar.style.width = '0%';\r\n demoFinal.classList.remove('show');\r\n demoSteps.forEach(s=> s.classList.remove('active','done'));\r\n }\r\n\r\n function playDemo(){\r\n if(demoRunning) return;\r\n demoRunning = true;\r\n resetDemo();\r\n demoCard.classList.add('playing');\r\n let i = 0;\r\n const typer = setInterval(()=>{\r\n demoTyped.textContent = AWB.slice(0, i);\r\n i++;\r\n if(i > AWB.length){\r\n clearInterval(typer);\r\n setTimeout(()=>{\r\n demoResult.classList.add('show');\r\n runSteps(0);\r\n }, 350);\r\n }\r\n }, 65);\r\n }\r\n\r\n function runSteps(idx){\r\n if(idx >= demoSteps.length){\r\n demoFinal.classList.add('show');\r\n setTimeout(()=>{ demoRunning = false; demoCard.classList.remove('playing'); }, 1400);\r\n return;\r\n }\r\n demoSteps.forEach((s,k)=>{\r\n if(k < idx) s.classList.add('done');\r\n });\r\n demoSteps[idx].classList.add('active');\r\n demoBar.style.width = ((idx) \/ (demoSteps.length-1) * 100) + '%';\r\n setTimeout(()=>{\r\n demoSteps[idx].classList.remove('active');\r\n demoSteps[idx].classList.add('done');\r\n runSteps(idx+1);\r\n }, 700);\r\n }\r\n\r\n playBtn.addEventListener('click', playDemo);\r\n demoCard.addEventListener('click', (e)=>{\r\n if(demoCard.classList.contains('playing') && e.target !== playBtn){\r\n demoRunning = false;\r\n demoCard.classList.remove('playing');\r\n }\r\n });\r\n\r\n \/\/ ---- hero form -> reveal result section with typed reference ----\r\n const trackForm = document.getElementById('trackForm');\r\n const resultSection = document.getElementById('resultSection');\r\n const resAwb = document.getElementById('resAwb');\r\n const resRoute = document.getElementById('resRoute');\r\n const tlBar = document.getElementById('tlBar');\r\n\r\n trackForm.addEventListener('submit', (e)=>{\r\n e.preventDefault();\r\n const val = document.getElementById('tracking-ref').value.trim();\r\n if(val){ resAwb.textContent = val.split(\/[, ]+\/)[0]; }\r\n resultSection.scrollIntoView({ behavior:'smooth', block:'start' });\r\n tlBar.style.width = '0%';\r\n setTimeout(()=>{ tlBar.style.width = '55%'; }, 300);\r\n\r\n \/*\r\n NOTE POUR L'INT\u00c9GRATION BACKEND :\r\n Ce formulaire est pr\u00eat pour \u00eatre reli\u00e9 \u00e0 la logique de recherche existante.\r\n Remplacer ce comportement de d\u00e9monstration par l'appel r\u00e9el \u00e0 l'API\/backend\r\n de tracking, puis injecter la r\u00e9ponse (statut, origine, destination, ETA,\r\n timeline) dans les \u00e9l\u00e9ments #resAwb, #resRoute, .result-note, .tl-step, etc.\r\n *\/\r\n });\r\n\r\n \/\/ init timeline bar width based on \"done\" steps already in markup\r\n window.addEventListener('load', ()=>{\r\n const doneCount = document.querySelectorAll('.tl-step.done').length;\r\n const total = document.querySelectorAll('.tl-step').length;\r\n tlBar.style.width = ((doneCount-0.5)\/(total-1)*100) + '%';\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<div class=\"elementor-element elementor-element-3005d3b e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"3005d3b\" 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-c5f80f6 elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"c5f80f6\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\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-443a812d e-flex e-con-boxed cut-corner-no sticky-container-off elementor-invisible e-con e-parent\" data-id=\"443a812d\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"animation":"zoomIn"}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7978140f e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"7978140f\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-34cafbb8 elementor-widget elementor-widget-logico_heading\" data-id=\"34cafbb8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"logico-title\">Pr\u00eat \u00e0 d\u00e9marrer ?\n<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-2a1cedfc e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"2a1cedfc\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-44085d16 elementor-widget elementor-widget-logico_button\" data-id=\"44085d16\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n <div class=\"button-widget\">\n <div class=\"button-container\">\n <a href=\"https:\/\/portalisholding.com\/demande-de-cotations\/\" target=\"_blank\" class=\"logico-alter-button\">\n Demande de devis <\/a>\n <\/div>\n <\/div>\n \t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3f826c4e elementor-widget elementor-widget-logico_button\" data-id=\"3f826c4e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"logico_button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\n <div class=\"button-widget\">\n <div class=\"button-container\">\n <a href=\"https:\/\/portalisholding.com\/contacts\/\" target=\"_blank\" class=\"logico-alter-button\">\n Contact <\/a>\n <\/div>\n <\/div>\n \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-4c62ec9 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"4c62ec9\" 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-ffee1e7 elementor-widget elementor-widget-html\" data-id=\"ffee1e7\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"badges-wrap\">\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83c\udf0d<\/span> 15+ Pays<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\u2708\ufe0f<\/span> Fret A\u00e9rien<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udea2<\/span> Fret Maritime<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\ude9b<\/span> Transport Routier<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udd12<\/span> Paiement S\u00e9curis\u00e9<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\u2b50<\/span> 98% Clients Satisfaits<\/div>\n<\/div>\n<style>\n.badges-wrap {\n background: #fafaf5;\n padding: 20px 40px;\n display: flex;\n align-items: center;\n justify-content: center;\n flex-wrap: wrap;\n gap: 32px;\n border-top: 1px solid #e8e4dc;\n}\n.badge-item {\n display: flex;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n color: #2c2c2c;\n font-weight: 500;\n}\n.badge-item span.badge-icon {\n font-size: 20px;\n}\n.cta-content {\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease, transform 0.6s ease;\n}\n.cta-content.visible {\n opacity: 1;\n transform: translateY(0);\n}\n@media (max-width: 600px) {\n .badges-wrap { padding: 20px; gap: 16px; }\n .badge-item { font-size: 13px; }\n}\n<\/style>\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","protected":false},"excerpt":{"rendered":"<p>Suivi d’exp\u00e9dition \u2014 Tracking Suivi international \u00b7 temps r\u00e9el Suivez votre exp\u00e9ditionen temps r\u00e9el Entrez votre num\u00e9ro de suivi pour conna\u00eetre instantan\u00e9ment la position et le statut de votre marchandise, o\u00f9 qu’elle soit dans le monde. R\u00e9f\u00e9rence d’exp\u00e9dition\/ N\u00b0AWB\/N\u00b0BL Rechercher Astuce…<\/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-10634","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/10634","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=10634"}],"version-history":[{"count":109,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/10634\/revisions"}],"predecessor-version":[{"id":15459,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/10634\/revisions\/15459"}],"wp:attachment":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/media?parent=10634"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}