.submenu {pointer-events:none; visibility:hidden; opacity:0; transform: translateY(0px);transition: opacity 0.3s ease-out,transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),visibility 0.3s ease-out;}
.submenu {background:#FFF; position:absolute; z-index:10; width:100%; padding:10px; box-shadow:0px 0px 40px #22222230}
.submenu .overbox, .submenu .box {width:30%; max-width:350px; vertical-align:top; display:inline-block; height:270px; border-left:1px solid #eee; background:#FFF; margin:min(1%,10px); padding:min(5vw,15px); transition:0.2s}
.submenu .overbox:hover {background:#f4f4f4}
.submenu .overbox .btn .smallArrow {transform:scale(0.8) translate(5px, 1px)}
.submenu .overbox:hover .btn .smallArrow {transform:scale(0.8) translate(15px, 1px)}
.submenu .box .btn {margin-left:10px; line-height:28px}
.submenu .box .btn .smallArrow {transform:scale(0.8) translate(5px, 4px)}
.submenu .btn:hover .smallArrow {transform:scale(0.8) translate(15px, 4px)}
.submenu .tabwrapper {display:inline-block; vertical-align:top}
.submenu .tabwrapper .tab {width:30%; max-width:350px; vertical-align:top; display:inline-block; border-left:1px solid #eee; background:#FFF; margin:0 min(1%,10px); padding:min(5vw,15px); transition:0.2s}
.submenu .tabwrapper .tab, .submenu .box {float:left}
.submenu .tabmobile {display:inline-block; vertical-align:top}
.submenu .tabmobile .tab {width:100%; max-width:350px; vertical-align:top; display:inline-block; border-bottom:1px solid #eee; background:#FFF; margin:0 min(1%,10px); padding:min(5vw,10px); transition:0.2s}

.submenu[aria-expanded="true"] {pointer-events: auto; visibility: visible; opacity: 1; transform: translateY(0);}
section, header {border-left:2vw solid var(--black); border-right:2vw solid var(--black)}
.merge-black {padding-top:0px}
.pi-swiper {z-index:2}
.hero-top-left-shape {transform:rotate(35deg); position:absolute; top:2.2vw; left:-1vw; z-index:10000}
.hero-top-left-shape div {width:7vw; height:4vw; transform:skew(35deg)}
.split-section {max-width:50%; display:inline-block!important}
.split-section .cell-content {padding-top:0!important; padding-bottom:0!important}
/*.split-section .cell-content .padding{padding-top:0!important; padding-bottom:0!important}*/

.alt-corners .fz39 {padding-top:min(10vw,70px)!important; padding-bottom:0px!important}
.alt-corners .fz20 {padding-top:0!important}

.three-section {max-width:33.33333%; display:inline-block!important}
.three-section .cell-content {padding-top:0!important; padding-bottom:0!important; min-width:100%!important; max-width:100%!important}
.three-section .cell-content .padding{padding-top:0!important; padding-bottom:0!important}
.three-section img {clip-path:polygon(250px 0%, 100% 0%, 100% 100%, 50px 100%)}
#nav-mobile {display:none; position:fixed; top:80px; bottom:0; height:100%; overflow:scroll}

@media(max-width:1024px) {
.submenu .overbox, .submenu .box, .submenu .tab {width:48%}
.three-section {max-width:100%; padding:0!important}
.three-section .cell-content {padding-top:5vw!important}
.three-section .bg-img {padding-top:5vw!important}
.three-section img {clip-path:polygon(15% 0%, 100% 0%, 100% 100%, -30% 100%)}
#nav-general,#nav-secteurs,#nav-services,#footer {display:none}
#nav-mobile {display:block}
}

#hero-page {background:white}
.heroPageShape {transform:translateY(-100%); opacity:0}
.heroPage .bgBlack {background-color:#22222290}
.heroPage .cell-content {margin-left:40%; clip-path:polygon(100px 0%, 100% 0%, 100% 100%, 0% 100%); padding:50px 40px 50px 150px}
.bgTopLeft .bg-img img {object-position:top left}
.bgTopRight .bg-img img {object-position:top right}
.bgCenterLeft .bg-img img {object-position:center left}
.bgCenterRight .bg-img img {object-position:center right}
.bgBottomLeft .bg-img img {object-position:bottom left}
.bgBottomRight .bg-img img {object-position:bottom right}
.bgCenter .bg-img img {object-position:center center}
.bgTopCenter .bg-img img {object-position:top center}
.bgbottomCenter .bg-img img {object-position:bottom center}

.heroPage .heroPageShape {transform:translateY(0px); animation-delay:0.8s;}
.heroPageShape .firstShape {position:absolute; width:500px; height:145px; margin-left:15px; clip-path:polygon(100px 0px, 200px 0px, 100px 145px, 0px 145px)}
.heroPageShape .secShape {position:absolute; opacity:0.2; width:500px; height:80px; margin-left:155px; clip-path:polygon(0px 0px, 60px 0px, 160px 145px, 100px 145px);}

.ecopakShape {animation-delay:0.8s; opacity:0; width:30vw; height:20vw; position:absolute; margin-left:-8vw; margin-top:-2vw}
.ecopakShape .firstShape {width:35%; height:100%; transform:skew(-35deg); position:absolute}
.ecopakShape .secShape {width:20%; margin-left:50%; height:50%; transform:skew(35deg); opacity:0.2; position:absolute}

@media(max-width:1024px) {
  .heroPage .heroPageShape {display:none}
  .heroPage .cell-content {margin-left:20%; clip-path:polygon(100px 0%, 100% 0%, 100% 100%, 0% 100%); padding:50px 30vw 50px 30vw}
}

@media(max-width:1024px) { .split-section {max-width:100%}}

.alt-corners .alt-corners:nth-child(even) {-webkit-mask: linear-gradient(125deg, transparent 2vw, black 0 ); mask: linear-gradient( 125deg, transparent 2vw, black 0 )}
.alt-corners .alt-corners:nth-child(odd) {-webkit-mask: linear-gradient(305deg, transparent 2vw, black 0 ); mask: linear-gradient( 305deg, transparent 2vw, black 0 )}
.top-left-corner {-webkit-mask: linear-gradient(125deg, transparent 2vw, black 0 ); mask: linear-gradient( 125deg, transparent 2vw, black 0 )}
.bottom-right-corner {-webkit-mask: linear-gradient(305deg, transparent 2vw, black 0 ); mask: linear-gradient( 305deg, transparent 2vw, black 0 )}

@media(max-width:600px) {
  .alt-corners .alt-corners:nth-child(even) {-webkit-mask: linear-gradient(125deg, transparent 5vw, black 0 ); mask: linear-gradient( 125deg, transparent 5vw, black 0 )}
  .alt-corners .alt-corners:nth-child(odd) {-webkit-mask: linear-gradient(305deg, transparent 5vw, black 0 ); mask: linear-gradient( 305deg, transparent 5vw, black 0 )}

  .top-left-corner {-webkit-mask: linear-gradient(125deg, transparent 5vw, black 0 ); mask: linear-gradient( 125deg, transparent 5vw, black 0 )}
  .bottom-right-corner {-webkit-mask: linear-gradient(305deg, transparent 5vw, black 0 ); mask: linear-gradient( 305deg, transparent 5vw, black 0 )}
}


.statTitle {font-size:min(12vw, 80px); line-height:min(12vw, 82px)}
.statSubTitle {font-size:min(2.5vw, 22px); line-height:min(3vw, 26px)}
.cta-arrow {display:inline-block; transition:0.2s; vertical-align:2px}
a:hover .cta-arrow {transform:translateX(10px)}
.btn {padding:0!important; border:none!important; background:transparent!important; background-color:transparent!important}
#hero .pi-swiper {padding-top:0!important}
.home-hero .slide .bg-img {width:70%; margin-left:30%}
.home-hero .home-hero-bg {position:absolute; top:-1100px; right:50%; width:1500px; height:2000px; transform:rotate(35deg); z-index:-1}
.home-hero .home-hero-max-width {width:50%; max-width:400px; margin-left:5%}
.home-hero .title {font-size:4.2em}
@media (hover: hover) {.home-hero a.slide:hover img {transform:scale(1)!important}}
@media (hover: hover) {.home-hero a.slide:hover .slide-text .cta-arrow {transform:translateX(10px)}}
@media (max-width:500px) {.home-hero .home-hero-bg {right:60%}}


.seamlessSlider {width: 100%; overflow: hidden}
.seamlessSlider .container {display: flex; width: max-content}
.parallelogram {width:600px; height: 500px; flex-shrink: 0; overflow: hidden; margin-left:-200px; position:relative; clip-path: polygon(35% 0%, 100% 0%, 65% 100%, 0% 100%)}
/*.parallelogram .tag {transition:0.2s; width:100%; background:#000000; text-align:center; padding:15px 0px; margin-left:15%; transform:translateY(-100px); position:absolute}
.parallelogram:hover .tag{transform:translateY(0px)}*/
.parallelogram .tag {transition:0.2s; width:100%; background:#000000; text-align:center; padding:15px 0px; margin-left:15%; position:absolute}
.parallelogram:hover .tag {color:black; background:var(--firstColor)}
.parallelogram img {width: 100%; height: 100%; object-fit: cover; display: block; object-position:center center}

@media(max-width:800px) {
  .parallelogram .tag {transform:translateY(0px)}
  .parallelogram {width:300px; height: 250px; margin-left:-100px;}
}

#blogue {text-align:center; border-left:0px!important; border-right:0px!important; background:url(/wp-content/uploads/2026/01/logistics.jpg) center center no-repeat; background-size:cover}
#all-blogue .card, #blogue .card {display:inline-block; position:relative; width:90%; height:450px; vertical-align:top; max-width:400px; margin:2% 1%; padding:15px; box-sizing:border-box}
.blogImgWrap {width:100%; height:250px}
.blogImgWrap .blogImg {width:100%; height:100%; object-fit:cover; object-position:center center}

.pi-all-services a .bg-img {opacity:1}
.pi-all-services a:hover .bg-img {opacity:1}
.pi-all-services .slide-text {transition:1s; background: linear-gradient(to bottom, transparent 0%,rgba(0, 0, 0, 0.8) 50%);}
.pi-all-services a:hover .slide-text {opacity:0.4; background:transparent; transform:translateY(10px)}


.notice-confidence {bottom:0.5vw; left:0.5vw; right:0.5vw; border-radius:min(2vw,15px)}
.two-fiche-big div:nth-child(2){font-size:15px!important}
.two-fiche-big div:nth-child(2){font-size:12px!important; line-height:15px}
.cta-notice {border-radius:50px}
.pi-notice {font-size:12px!important; line-height:15px}