Portalis \u2013 Section<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* \u2500\u2500 RESET & VARIABLES \u2500\u2500 *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --primary: #004C4C;\r\n --primary-light: #006666;\r\n --gold: #EEB646;\r\n --gold-soft: rgba(238,182,70,.15);\r\n --accent-blue: #4FB3D3; \/* fente survol *\/\r\n --cream: #F5F2EC;\r\n --white: #FFFFFF;\r\n --gray-600: #6C8686;\r\n --text-dark: #1A1A1A;\r\n --text-mid: #4A5568;\r\n --shadow-sm: 0 2px 12px rgba(0,76,76,.10);\r\n --shadow-md: 0 8px 32px rgba(0,76,76,.16);\r\n --shadow-lg: 0 20px 60px rgba(0,76,76,.22);\r\n --radius: 16px;\r\n --transition: .45s cubic-bezier(.22,1,.36,1);\r\n }\r\n\r\n \/* \u2500\u2500 WRAPPER \u2500\u2500 *\/\r\n .portalis-wrap {\r\n font-family: 'DM Sans', sans-serif;\r\n background: #004C4C;\r\n padding: 0 0 80px;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 1 \u2013 COUVERTURE G\u00c9OGRAPHIQUE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .geo-section {\r\n padding: 90px 24px 80px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n .geo-section::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,76,76,.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Eyebrow line *\/\r\n .geo-eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: .72rem;\r\n letter-spacing: .18em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n font-weight: 500;\r\n margin-bottom: 18px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity .6s ease, transform .6s ease;\r\n }\r\n .geo-eyebrow::before, .geo-eyebrow::after {\r\n content: '';\r\n display: block;\r\n width: 32px;\r\n height: 1px;\r\n background: var(--gold);\r\n }\r\n\r\n .geo-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(2.2rem, 5vw, 3.4rem);\r\n font-weight: 700;\r\n color: #ffffff !important;\r\n line-height: 1.15;\r\n margin-bottom: 16px;\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition: opacity .7s ease .1s, transform .7s ease .1s;\r\n }\r\n\r\n .portalis-wrap .geo-subtitle {\r\n font-size: clamp(.88rem, 2vw, 1.05rem);\r\n color:#ffffff;\r\n font-weight: 300;\r\n max-width: 560px;\r\n width: 100%;\r\n margin: 0 auto 44px !important;\r\n line-height: 1.7;\r\n text-align: center !important;\r\n padding: 0 16px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity .6s ease .2s, transform .6s ease .2s;\r\n }\r\n\r\n \/* Country pills *\/\r\n .geo-pills {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n opacity: 0;\r\n transform: translateY(18px);\r\n transition: opacity .6s ease .35s, transform .6s ease .35s;\r\n }\r\n\r\n .geo-pill {\r\n padding: 8px 20px;\r\n border: 1.5px solid rgba(0,76,76,.22);\r\n border-radius: 100px;\r\n font-size: .82rem;\r\n font-weight: 500;\r\n color: var(--primary);\r\n background: var(--white);\r\n cursor: default;\r\n transition: background var(--transition), border-color var(--transition),\r\n color var(--transition), transform var(--transition),\r\n box-shadow var(--transition);\r\n }\r\n .geo-pill:hover {\r\n background: var(--primary);\r\n border-color: var(--primary);\r\n color: var(--white);\r\n transform: translateY(-3px);\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n \/* animate-in state *\/\r\n .portalis-wrap.in-view .geo-eyebrow,\r\n .portalis-wrap.in-view .geo-title,\r\n .portalis-wrap.in-view .geo-subtitle,\r\n .portalis-wrap.in-view .geo-pills { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Divider *\/\r\n .section-divider {\r\n width: 56px;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--primary), var(--gold));\r\n border-radius: 2px;\r\n margin: 0 auto 60px;\r\n opacity: 0;\r\n transition: opacity .6s ease .5s, transform .6s ease .5s;\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n }\r\n .portalis-wrap.in-view .section-divider { opacity: 1; transform: scaleX(1); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 2 \u2013 NOS SERVICES\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .services-section {\r\n padding: 0 24px;\r\n position: relative;\r\n }\r\n\r\n .services-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n }\r\n .services-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(2rem, 4.5vw, 3rem);\r\n font-weight: 700;\r\n color:#ffffff !important;\r\n opacity: 0;\r\n transform: translateY(24px);\r\n transition: opacity .7s ease .1s, transform .7s ease .1s;\r\n }\r\n .portalis-wrap.in-view .services-title { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Grid *\/\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 24px;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* \u2500\u2500 SERVICE CARD \u2500\u2500 *\/\r\n .service-card {\r\n position: relative;\r\n background: var(--gray-600);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-sm);\r\n cursor: pointer;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition:\r\n opacity .6s ease,\r\n transform .6s ease,\r\n box-shadow var(--transition);\r\n \/* stagger applied via JS *\/\r\n }\r\n .portalis-wrap.in-view .service-card { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Blue accent fente (left bar on hover) *\/\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n left: 0; top: 0; bottom: 0;\r\n width: 0;\r\n background: linear-gradient(180deg, var(--accent-blue), var(--primary-light));\r\n border-radius: var(--radius) 0 0 var(--radius);\r\n transition: width var(--transition);\r\n z-index: 2;\r\n }\r\n .service-card:hover::before { width: 5px; }\r\n\r\n .service-card:hover {\r\n box-shadow: var(--shadow-lg);\r\n transform: translateY(-6px) scale(1.015) !important;\r\n }\r\n\r\n \/* Image container *\/\r\n .card-img {\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .card-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform var(--transition), filter var(--transition);\r\n display: block;\r\n }\r\n .service-card:hover .card-img img {\r\n transform: scale(1.07);\r\n filter: brightness(1.06) saturate(1.1);\r\n }\r\n\r\n \/* Gold overlay on image hover *\/\r\n .card-img::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(238,182,70,.0) 0%,\r\n rgba(0,76,76,.35) 100%\r\n );\r\n opacity: 0;\r\n transition: opacity var(--transition);\r\n }\r\n .service-card:hover .card-img::after { opacity: 1; }\r\n\r\n \/* Icon badge *\/\r\n .card-badge {\r\n position: absolute;\r\n bottom: -18px;\r\n right: 20px;\r\n width: 42px; height: 42px;\r\n background: var(--gold);\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 4px 16px rgba(238,182,70,.4);\r\n z-index: 3;\r\n transition: transform var(--transition), box-shadow var(--transition);\r\n }\r\n .service-card:hover .card-badge {\r\n transform: rotate(15deg) scale(1.15);\r\n box-shadow: 0 8px 24px rgba(238,182,70,.55);\r\n }\r\n .card-badge svg { width: 18px; height: 18px; fill: var(--primary); }\r\n\r\n \/* Body *\/\r\n .card-body {\r\n padding: 28px 22px 22px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .card-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.15rem;\r\n font-weight: 700;\r\n color: var(--gold);\r\n margin-bottom: 7px;\r\n transition: color var(--transition), letter-spacing var(--transition);\r\n }\r\n .service-card:hover .card-title {\r\n color: var(--primary-light);\r\n letter-spacing: .01em;\r\n }\r\n\r\n .card-desc {\r\n font-size: .82rem;\r\n color: var(--white);\r\n line-height: 1.6;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Arrow link *\/\r\n .card-arrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n margin-top: 14px;\r\n font-size: .78rem;\r\n font-weight: 500;\r\n letter-spacing: .06em;\r\n text-transform: uppercase;\r\n color: var(--primary);\r\n opacity: 0;\r\n transform: translateX(-8px);\r\n transition: opacity var(--transition), transform var(--transition), color var(--transition);\r\n text-decoration: none;\r\n }\r\n .card-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; transition: transform var(--transition); }\r\n .service-card:hover .card-arrow { opacity: 1; transform: translateX(0); }\r\n .service-card:hover .card-arrow:hover { color: var(--gold); }\r\n .service-card:hover .card-arrow:hover svg { transform: translateX(4px); }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 700px) {\r\n .geo-section { padding: 60px 20px 50px; }\r\n .services-section { padding: 0 16px; }\r\n .services-grid { grid-template-columns: 1fr; gap: 18px; }\r\n .card-img { height: 170px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .geo-title { font-size: 1.8rem; }\r\n .services-title { font-size: 1.7rem; }\r\n }\r\n\r\n \/* Scroll reveal already handled via .in-view class + transition-delay *\/\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"portalis-wrap\" id=\"portalisRoot\">\r\n\r\n \r\n <section class=\"geo-section\">\r\n <div class=\"geo-eyebrow\">R\u00e9seau Mondial<\/div>\r\n <h2 class=\"geo-title\">Couverture G\u00e9ographique<\/h2>\r\n <p class=\"geo-subtitle\" style=\"text-align:center !important; width:100%; display:block; margin-left:auto; margin-right:auto;\">R\u00e9seau portuaire couvrant les principaux hubs d'Afrique, d'Europe, des Am\u00e9riques et d'Asie<\/p>\r\n <div class=\"geo-pills\">\r\n <span class=\"geo-pill\">Dakar<\/span>\r\n <span class=\"geo-pill\">Abidjan<\/span>\r\n <span class=\"geo-pill\">Lagos<\/span>\r\n <span class=\"geo-pill\">Douala<\/span>\r\n <span class=\"geo-pill\">Rotterdam<\/span>\r\n <span class=\"geo-pill\">Marseille<\/span>\r\n <span class=\"geo-pill\">Shanghai<\/span>\r\n <span class=\"geo-pill\">Duba\u00ef<\/span>\r\n <span class=\"geo-pill\">Houston<\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n \r\n <section class=\"services-section\">\r\n <div class=\"services-header\">\r\n <h2 class=\"services-title\">Nos Services<\/h2>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1494412574643-ff11b0a5c1c3?w=700&q=80\"\r\n alt=\"FCL \/ LCL\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"13\" rx=\"2\"\/>\r\n <path d=\"M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/>\r\n <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"16\"\/><line x1=\"10\" y1=\"14\" x2=\"14\" y2=\"14\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">FCL \/ LCL<\/div>\r\n <p class=\"card-desc\">Conteneurs complets et groupage maritime sur tous les corridors<\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/Fret-en-vrac-1.png\"\r\n alt=\"Fret Vrac\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Fret Vrac<\/div>\r\n <p class=\"card-desc\">Transport de marchandises en vrac sec et liquide<\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-13-2026-04_16_30-PM-1.png\"\r\n alt=\"Fret R\u00e9frig\u00e9r\u00e9\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\"\/>\r\n <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Fret R\u00e9frig\u00e9r\u00e9<\/div>\r\n <p class=\"card-desc\">Conteneurs refrig\u00e9r\u00e9 pour produits sensibles \u00e0 la temp\u00e9rature<\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-07_18_46-PM.png\"\r\n alt=\"Groupage Maritime\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/>\r\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Groupage Maritime<\/div>\r\n <p class=\"card-desc\">Optimisation des co\u00fbts par groupage\r\n <\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n 'use strict';\r\n\r\n const root = document.getElementById('portalisRoot');\r\n const cards = root.querySelectorAll('.service-card');\r\n\r\n \/* \u2500\u2500 Stagger delays for cards \u2500\u2500 *\/\r\n cards.forEach(function (card, i) {\r\n card.style.transitionDelay = (0.15 + i * 0.1) + 's';\r\n });\r\n\r\n \/* \u2500\u2500 IntersectionObserver \u2013 scroll reveal \u2500\u2500 *\/\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n root.classList.add('in-view');\r\n io.disconnect();\r\n }\r\n });\r\n }, { threshold: 0.08 });\r\n\r\n io.observe(root);\r\n\r\n \/* Fallback: if already visible on load *\/\r\n var rect = root.getBoundingClientRect();\r\n if (rect.top < window.innerHeight) {\r\n root.classList.add('in-view');\r\n }\r\n\r\n \/* \u2500\u2500 Subtle parallax on card images (desktop only) \u2500\u2500 *\/\r\n if (window.matchMedia('(hover: hover)').matches) {\r\n cards.forEach(function (card) {\r\n var img = card.querySelector('.card-img img');\r\n card.addEventListener('mousemove', function (e) {\r\n var r = card.getBoundingClientRect();\r\n var xPct = (e.clientX - r.left) \/ r.width - 0.5;\r\n var yPct = (e.clientY - r.top) \/ r.height - 0.5;\r\n img.style.transform = 'scale(1.07) translate(' + (xPct * 6) + 'px,' + (yPct * 4) + 'px)';\r\n });\r\n card.addEventListener('mouseleave', function () {\r\n img.style.transform = '';\r\n });\r\n });\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-50e77e11 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent\" data-id=\"50e77e11\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-175af92 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"175af92\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-3d88c38d e-grid e-con-full cut-corner-no sticky-container-off e-con e-child\" data-id=\"3d88c38d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-725e6d49 elementor-widget elementor-widget-counter\" data-id=\"725e6d49\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Conteneurs\/mois<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"200\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">+<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bb64b0 elementor-widget elementor-widget-counter\" data-id=\"4bb64b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Ports couverts<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"15\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-209c766b elementor-widget elementor-widget-counter\" data-id=\"209c766b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Continents<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"4\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a87cac0 elementor-widget elementor-widget-counter\" data-id=\"3a87cac0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Ponctualit\u00e9<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"98\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">%<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-45d47a25 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent\" data-id=\"45d47a25\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-6d805daa e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"6d805daa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c609ed0 elementor-widget elementor-widget-logico_heading\" data-id=\"3c609ed0\" 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-1bbd81c5 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"1bbd81c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d7473d8 elementor-widget elementor-widget-logico_button\" data-id=\"3d7473d8\" 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\/en\/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-24ab7751 elementor-widget elementor-widget-logico_button\" data-id=\"24ab7751\" 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\/en\/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<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d4d9026 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"6d4d9026\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7950f6ac e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"7950f6ac\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70c16343 elementor-widget elementor-widget-html\" data-id=\"70c16343\" 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+ Payments<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">Airplane emoji<\/span> Air Freight<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udea2<\/span> Maritime fret<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\ude9b<\/span> Road Transport<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udd12<\/span> Secure Payment<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\u2b50<\/span> 98% Satisfied Customers<\/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<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Portalis \u2013 Section R\u00e9seau Mondial Couverture G\u00e9ographique R\u00e9seau portuaire couvrant les principaux hubs d’Afrique, d’Europe, des Am\u00e9riques et d’Asie Dakar Abidjan Lagos Douala Rotterdam Marseille Shanghai Duba\u00ef Houston Nos Services FCL \/ LCL Conteneurs complets et groupage maritime sur tous les…<\/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-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/84","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=84"}],"version-history":[{"count":131,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":15390,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/84\/revisions\/15390"}],"wp:attachment":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/media?parent=84"}],"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\nPortalis \u2013 Section<\/title>\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:wght@400;600;700&family=DM+Sans:wght@300;400;500&display=swap\" rel=\"stylesheet\">\r\n\r\n<style>\r\n \/* \u2500\u2500 RESET & VARIABLES \u2500\u2500 *\/\r\n *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\n :root {\r\n --primary: #004C4C;\r\n --primary-light: #006666;\r\n --gold: #EEB646;\r\n --gold-soft: rgba(238,182,70,.15);\r\n --accent-blue: #4FB3D3; \/* fente survol *\/\r\n --cream: #F5F2EC;\r\n --white: #FFFFFF;\r\n --gray-600: #6C8686;\r\n --text-dark: #1A1A1A;\r\n --text-mid: #4A5568;\r\n --shadow-sm: 0 2px 12px rgba(0,76,76,.10);\r\n --shadow-md: 0 8px 32px rgba(0,76,76,.16);\r\n --shadow-lg: 0 20px 60px rgba(0,76,76,.22);\r\n --radius: 16px;\r\n --transition: .45s cubic-bezier(.22,1,.36,1);\r\n }\r\n\r\n \/* \u2500\u2500 WRAPPER \u2500\u2500 *\/\r\n .portalis-wrap {\r\n font-family: 'DM Sans', sans-serif;\r\n background: #004C4C;\r\n padding: 0 0 80px;\r\n overflow: hidden;\r\n }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 1 \u2013 COUVERTURE G\u00c9OGRAPHIQUE\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .geo-section {\r\n padding: 90px 24px 80px;\r\n text-align: center;\r\n position: relative;\r\n }\r\n .geo-section::before {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse 60% 50% at 50% 0%, rgba(0,76,76,.07) 0%, transparent 70%);\r\n pointer-events: none;\r\n }\r\n\r\n \/* Eyebrow line *\/\r\n .geo-eyebrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 10px;\r\n font-size: .72rem;\r\n letter-spacing: .18em;\r\n text-transform: uppercase;\r\n color: var(--gold);\r\n font-weight: 500;\r\n margin-bottom: 18px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity .6s ease, transform .6s ease;\r\n }\r\n .geo-eyebrow::before, .geo-eyebrow::after {\r\n content: '';\r\n display: block;\r\n width: 32px;\r\n height: 1px;\r\n background: var(--gold);\r\n }\r\n\r\n .geo-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(2.2rem, 5vw, 3.4rem);\r\n font-weight: 700;\r\n color: #ffffff !important;\r\n line-height: 1.15;\r\n margin-bottom: 16px;\r\n opacity: 0;\r\n transform: translateY(28px);\r\n transition: opacity .7s ease .1s, transform .7s ease .1s;\r\n }\r\n\r\n .portalis-wrap .geo-subtitle {\r\n font-size: clamp(.88rem, 2vw, 1.05rem);\r\n color:#ffffff;\r\n font-weight: 300;\r\n max-width: 560px;\r\n width: 100%;\r\n margin: 0 auto 44px !important;\r\n line-height: 1.7;\r\n text-align: center !important;\r\n padding: 0 16px;\r\n opacity: 0;\r\n transform: translateY(20px);\r\n transition: opacity .6s ease .2s, transform .6s ease .2s;\r\n }\r\n\r\n \/* Country pills *\/\r\n .geo-pills {\r\n display: flex;\r\n flex-wrap: wrap;\r\n justify-content: center;\r\n gap: 10px;\r\n opacity: 0;\r\n transform: translateY(18px);\r\n transition: opacity .6s ease .35s, transform .6s ease .35s;\r\n }\r\n\r\n .geo-pill {\r\n padding: 8px 20px;\r\n border: 1.5px solid rgba(0,76,76,.22);\r\n border-radius: 100px;\r\n font-size: .82rem;\r\n font-weight: 500;\r\n color: var(--primary);\r\n background: var(--white);\r\n cursor: default;\r\n transition: background var(--transition), border-color var(--transition),\r\n color var(--transition), transform var(--transition),\r\n box-shadow var(--transition);\r\n }\r\n .geo-pill:hover {\r\n background: var(--primary);\r\n border-color: var(--primary);\r\n color: var(--white);\r\n transform: translateY(-3px);\r\n box-shadow: var(--shadow-sm);\r\n }\r\n\r\n \/* animate-in state *\/\r\n .portalis-wrap.in-view .geo-eyebrow,\r\n .portalis-wrap.in-view .geo-title,\r\n .portalis-wrap.in-view .geo-subtitle,\r\n .portalis-wrap.in-view .geo-pills { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Divider *\/\r\n .section-divider {\r\n width: 56px;\r\n height: 3px;\r\n background: linear-gradient(90deg, var(--primary), var(--gold));\r\n border-radius: 2px;\r\n margin: 0 auto 60px;\r\n opacity: 0;\r\n transition: opacity .6s ease .5s, transform .6s ease .5s;\r\n transform: scaleX(0);\r\n transform-origin: left;\r\n }\r\n .portalis-wrap.in-view .section-divider { opacity: 1; transform: scaleX(1); }\r\n\r\n \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\r\n SECTION 2 \u2013 NOS SERVICES\r\n \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\r\n .services-section {\r\n padding: 0 24px;\r\n position: relative;\r\n }\r\n\r\n .services-header {\r\n text-align: center;\r\n margin-bottom: 56px;\r\n }\r\n .services-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: clamp(2rem, 4.5vw, 3rem);\r\n font-weight: 700;\r\n color:#ffffff !important;\r\n opacity: 0;\r\n transform: translateY(24px);\r\n transition: opacity .7s ease .1s, transform .7s ease .1s;\r\n }\r\n .portalis-wrap.in-view .services-title { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Grid *\/\r\n .services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(2, 1fr);\r\n gap: 24px;\r\n max-width: 900px;\r\n margin: 0 auto;\r\n }\r\n\r\n \/* \u2500\u2500 SERVICE CARD \u2500\u2500 *\/\r\n .service-card {\r\n position: relative;\r\n background: var(--gray-600);\r\n border-radius: var(--radius);\r\n overflow: hidden;\r\n box-shadow: var(--shadow-sm);\r\n cursor: pointer;\r\n opacity: 0;\r\n transform: translateY(40px);\r\n transition:\r\n opacity .6s ease,\r\n transform .6s ease,\r\n box-shadow var(--transition);\r\n \/* stagger applied via JS *\/\r\n }\r\n .portalis-wrap.in-view .service-card { opacity: 1; transform: translateY(0); }\r\n\r\n \/* Blue accent fente (left bar on hover) *\/\r\n .service-card::before {\r\n content: '';\r\n position: absolute;\r\n left: 0; top: 0; bottom: 0;\r\n width: 0;\r\n background: linear-gradient(180deg, var(--accent-blue), var(--primary-light));\r\n border-radius: var(--radius) 0 0 var(--radius);\r\n transition: width var(--transition);\r\n z-index: 2;\r\n }\r\n .service-card:hover::before { width: 5px; }\r\n\r\n .service-card:hover {\r\n box-shadow: var(--shadow-lg);\r\n transform: translateY(-6px) scale(1.015) !important;\r\n }\r\n\r\n \/* Image container *\/\r\n .card-img {\r\n width: 100%;\r\n height: 200px;\r\n overflow: hidden;\r\n position: relative;\r\n }\r\n .card-img img {\r\n width: 100%;\r\n height: 100%;\r\n object-fit: cover;\r\n transition: transform var(--transition), filter var(--transition);\r\n display: block;\r\n }\r\n .service-card:hover .card-img img {\r\n transform: scale(1.07);\r\n filter: brightness(1.06) saturate(1.1);\r\n }\r\n\r\n \/* Gold overlay on image hover *\/\r\n .card-img::after {\r\n content: '';\r\n position: absolute;\r\n inset: 0;\r\n background: linear-gradient(\r\n 135deg,\r\n rgba(238,182,70,.0) 0%,\r\n rgba(0,76,76,.35) 100%\r\n );\r\n opacity: 0;\r\n transition: opacity var(--transition);\r\n }\r\n .service-card:hover .card-img::after { opacity: 1; }\r\n\r\n \/* Icon badge *\/\r\n .card-badge {\r\n position: absolute;\r\n bottom: -18px;\r\n right: 20px;\r\n width: 42px; height: 42px;\r\n background: var(--gold);\r\n border-radius: 50%;\r\n display: flex; align-items: center; justify-content: center;\r\n box-shadow: 0 4px 16px rgba(238,182,70,.4);\r\n z-index: 3;\r\n transition: transform var(--transition), box-shadow var(--transition);\r\n }\r\n .service-card:hover .card-badge {\r\n transform: rotate(15deg) scale(1.15);\r\n box-shadow: 0 8px 24px rgba(238,182,70,.55);\r\n }\r\n .card-badge svg { width: 18px; height: 18px; fill: var(--primary); }\r\n\r\n \/* Body *\/\r\n .card-body {\r\n padding: 28px 22px 22px;\r\n position: relative;\r\n z-index: 1;\r\n }\r\n\r\n .card-title {\r\n font-family: 'Cormorant Garamond', serif;\r\n font-size: 1.15rem;\r\n font-weight: 700;\r\n color: var(--gold);\r\n margin-bottom: 7px;\r\n transition: color var(--transition), letter-spacing var(--transition);\r\n }\r\n .service-card:hover .card-title {\r\n color: var(--primary-light);\r\n letter-spacing: .01em;\r\n }\r\n\r\n .card-desc {\r\n font-size: .82rem;\r\n color: var(--white);\r\n line-height: 1.6;\r\n font-weight: 300;\r\n }\r\n\r\n \/* Arrow link *\/\r\n .card-arrow {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: 6px;\r\n margin-top: 14px;\r\n font-size: .78rem;\r\n font-weight: 500;\r\n letter-spacing: .06em;\r\n text-transform: uppercase;\r\n color: var(--primary);\r\n opacity: 0;\r\n transform: translateX(-8px);\r\n transition: opacity var(--transition), transform var(--transition), color var(--transition);\r\n text-decoration: none;\r\n }\r\n .card-arrow svg { width: 14px; height: 14px; stroke: currentColor; fill: none; transition: transform var(--transition); }\r\n .service-card:hover .card-arrow { opacity: 1; transform: translateX(0); }\r\n .service-card:hover .card-arrow:hover { color: var(--gold); }\r\n .service-card:hover .card-arrow:hover svg { transform: translateX(4px); }\r\n\r\n \/* \u2500\u2500 RESPONSIVE \u2500\u2500 *\/\r\n @media (max-width: 700px) {\r\n .geo-section { padding: 60px 20px 50px; }\r\n .services-section { padding: 0 16px; }\r\n .services-grid { grid-template-columns: 1fr; gap: 18px; }\r\n .card-img { height: 170px; }\r\n }\r\n\r\n @media (max-width: 480px) {\r\n .geo-title { font-size: 1.8rem; }\r\n .services-title { font-size: 1.7rem; }\r\n }\r\n\r\n \/* Scroll reveal already handled via .in-view class + transition-delay *\/\r\n\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<div class=\"portalis-wrap\" id=\"portalisRoot\">\r\n\r\n \r\n <section class=\"geo-section\">\r\n <div class=\"geo-eyebrow\">R\u00e9seau Mondial<\/div>\r\n <h2 class=\"geo-title\">Couverture G\u00e9ographique<\/h2>\r\n <p class=\"geo-subtitle\" style=\"text-align:center !important; width:100%; display:block; margin-left:auto; margin-right:auto;\">R\u00e9seau portuaire couvrant les principaux hubs d'Afrique, d'Europe, des Am\u00e9riques et d'Asie<\/p>\r\n <div class=\"geo-pills\">\r\n <span class=\"geo-pill\">Dakar<\/span>\r\n <span class=\"geo-pill\">Abidjan<\/span>\r\n <span class=\"geo-pill\">Lagos<\/span>\r\n <span class=\"geo-pill\">Douala<\/span>\r\n <span class=\"geo-pill\">Rotterdam<\/span>\r\n <span class=\"geo-pill\">Marseille<\/span>\r\n <span class=\"geo-pill\">Shanghai<\/span>\r\n <span class=\"geo-pill\">Duba\u00ef<\/span>\r\n <span class=\"geo-pill\">Houston<\/span>\r\n <\/div>\r\n <\/section>\r\n\r\n <div class=\"section-divider\"><\/div>\r\n\r\n \r\n <section class=\"services-section\">\r\n <div class=\"services-header\">\r\n <h2 class=\"services-title\">Nos Services<\/h2>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/images.unsplash.com\/photo-1494412574643-ff11b0a5c1c3?w=700&q=80\"\r\n alt=\"FCL \/ LCL\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <rect x=\"2\" y=\"7\" width=\"20\" height=\"13\" rx=\"2\"\/>\r\n <path d=\"M16 7V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v2\"\/>\r\n <line x1=\"12\" y1=\"12\" x2=\"12\" y2=\"16\"\/><line x1=\"10\" y1=\"14\" x2=\"14\" y2=\"14\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">FCL \/ LCL<\/div>\r\n <p class=\"card-desc\">Conteneurs complets et groupage maritime sur tous les corridors<\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/Fret-en-vrac-1.png\"\r\n alt=\"Fret Vrac\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\"\/>\r\n <polyline points=\"9 22 9 12 15 12 15 22\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Fret Vrac<\/div>\r\n <p class=\"card-desc\">Transport de marchandises en vrac sec et liquide<\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-13-2026-04_16_30-PM-1.png\"\r\n alt=\"Fret R\u00e9frig\u00e9r\u00e9\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\"\/>\r\n <path d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Fret R\u00e9frig\u00e9r\u00e9<\/div>\r\n <p class=\"card-desc\">Conteneurs refrig\u00e9r\u00e9 pour produits sensibles \u00e0 la temp\u00e9rature<\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <div class=\"service-card\">\r\n <div class=\"card-img\">\r\n <img decoding=\"async\"\r\n src=\"https:\/\/portalisholding.com\/wp-content\/uploads\/2026\/08\/ChatGPT-Image-Aug-18-2026-07_18_46-PM.png\"\r\n alt=\"Groupage Maritime\"\r\n loading=\"lazy\"\r\n >\r\n <div class=\"card-badge\">\r\n <svg viewbox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" stroke=\"#004C4C\" stroke-width=\"2.2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\"\/>\r\n <path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\"\/>\r\n <\/svg>\r\n <\/div>\r\n <\/div>\r\n <div class=\"card-body\">\r\n <div class=\"card-title\">Groupage Maritime<\/div>\r\n <p class=\"card-desc\">Optimisation des co\u00fbts par groupage\r\n <\/p>\r\n <a class=\"card-arrow\" href=\"#\">\r\n En savoir plus\r\n <svg viewbox=\"0 0 24 24\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\r\n <line x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\/><polyline points=\"12 5 19 12 12 19\"\/>\r\n <\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n<\/div>\r\n\r\n<script>\r\n(function () {\r\n 'use strict';\r\n\r\n const root = document.getElementById('portalisRoot');\r\n const cards = root.querySelectorAll('.service-card');\r\n\r\n \/* \u2500\u2500 Stagger delays for cards \u2500\u2500 *\/\r\n cards.forEach(function (card, i) {\r\n card.style.transitionDelay = (0.15 + i * 0.1) + 's';\r\n });\r\n\r\n \/* \u2500\u2500 IntersectionObserver \u2013 scroll reveal \u2500\u2500 *\/\r\n var io = new IntersectionObserver(function (entries) {\r\n entries.forEach(function (entry) {\r\n if (entry.isIntersecting) {\r\n root.classList.add('in-view');\r\n io.disconnect();\r\n }\r\n });\r\n }, { threshold: 0.08 });\r\n\r\n io.observe(root);\r\n\r\n \/* Fallback: if already visible on load *\/\r\n var rect = root.getBoundingClientRect();\r\n if (rect.top < window.innerHeight) {\r\n root.classList.add('in-view');\r\n }\r\n\r\n \/* \u2500\u2500 Subtle parallax on card images (desktop only) \u2500\u2500 *\/\r\n if (window.matchMedia('(hover: hover)').matches) {\r\n cards.forEach(function (card) {\r\n var img = card.querySelector('.card-img img');\r\n card.addEventListener('mousemove', function (e) {\r\n var r = card.getBoundingClientRect();\r\n var xPct = (e.clientX - r.left) \/ r.width - 0.5;\r\n var yPct = (e.clientY - r.top) \/ r.height - 0.5;\r\n img.style.transform = 'scale(1.07) translate(' + (xPct * 6) + 'px,' + (yPct * 4) + 'px)';\r\n });\r\n card.addEventListener('mouseleave', function () {\r\n img.style.transform = '';\r\n });\r\n });\r\n }\r\n\r\n})();\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-50e77e11 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent\" data-id=\"50e77e11\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-175af92 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"175af92\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t<div class=\"elementor-element elementor-element-3d88c38d e-grid e-con-full cut-corner-no sticky-container-off e-con e-child\" data-id=\"3d88c38d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-725e6d49 elementor-widget elementor-widget-counter\" data-id=\"725e6d49\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Conteneurs\/mois<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"200\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">+<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-4bb64b0 elementor-widget elementor-widget-counter\" data-id=\"4bb64b0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Ports couverts<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"15\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-209c766b elementor-widget elementor-widget-counter\" data-id=\"209c766b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Continents<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"4\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\"><\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-3a87cac0 elementor-widget elementor-widget-counter\" data-id=\"3a87cac0\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"counter.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-counter\">\n\t\t\t<div class=\"elementor-counter-title\">Ponctualit\u00e9<\/div>\t\t\t<div class=\"elementor-counter-number-wrapper\">\n\t\t\t\t<span class=\"elementor-counter-number-prefix\"><\/span>\n\t\t\t\t<span class=\"elementor-counter-number\" data-duration=\"2000\" data-to-value=\"98\" data-from-value=\"0\" data-delimiter=\",\">0<\/span>\n\t\t\t\t<span class=\"elementor-counter-number-suffix\">%<\/span>\n\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-45d47a25 e-con-full e-flex cut-corner-no sticky-container-off e-con e-parent\" data-id=\"45d47a25\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-6d805daa e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"6d805daa\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c609ed0 elementor-widget elementor-widget-logico_heading\" data-id=\"3c609ed0\" 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-1bbd81c5 e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"1bbd81c5\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3d7473d8 elementor-widget elementor-widget-logico_button\" data-id=\"3d7473d8\" 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\/en\/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-24ab7751 elementor-widget elementor-widget-logico_button\" data-id=\"24ab7751\" 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\/en\/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<\/div>\n\t\t<div class=\"elementor-element elementor-element-6d4d9026 e-flex e-con-boxed cut-corner-no sticky-container-off e-con e-parent\" data-id=\"6d4d9026\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7950f6ac e-con-full e-flex cut-corner-no sticky-container-off e-con e-child\" data-id=\"7950f6ac\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t<div class=\"elementor-element elementor-element-70c16343 elementor-widget elementor-widget-html\" data-id=\"70c16343\" 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+ Payments<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">Airplane emoji<\/span> Air Freight<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udea2<\/span> Maritime fret<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\ude9b<\/span> Road Transport<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\ud83d\udd12<\/span> Secure Payment<\/div>\n <div class=\"badge-item\"><span class=\"badge-icon\">\u2b50<\/span> 98% Satisfied Customers<\/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<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>","protected":false},"excerpt":{"rendered":"<p>Portalis \u2013 Section R\u00e9seau Mondial Couverture G\u00e9ographique R\u00e9seau portuaire couvrant les principaux hubs d’Afrique, d’Europe, des Am\u00e9riques et d’Asie Dakar Abidjan Lagos Douala Rotterdam Marseille Shanghai Duba\u00ef Houston Nos Services FCL \/ LCL Conteneurs complets et groupage maritime sur tous les…<\/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-84","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/84","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=84"}],"version-history":[{"count":131,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/84\/revisions"}],"predecessor-version":[{"id":15390,"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/pages\/84\/revisions\/15390"}],"wp:attachment":[{"href":"https:\/\/portalisholding.com\/en\/wp-json\/wp\/v2\/media?parent=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}