@font-face {
    font-family: 'Pragmatica';
    font-style: normal;
    font-weight: 400; /* Regular */
    src: url('../../fonts/pragmatica_book.woff2') format('woff2'),
         url('../../fonts/pragmatica_book.woff') format('woff'),
         url('../../fonts/pragmatica_book.ttf') format('truetype'),
         url('../../fonts/pragmatica_book.otf') format('opentype');
}

@font-face {
    font-family: 'Pragmatica';
    font-style: normal;
    font-weight: 500; /* Medium */
    src: url('../../fonts/pragmatica_extended-medium.woff2') format('woff2'),
         url('../../fonts/pragmatica_extended-medium.woff') format('woff'),
         url('../../fonts/pragmatica_extended-medium.ttf') format('truetype'),
         url('../../fonts/pragmatica_extended-medium.otf') format('opentype');
}

@font-face {
    font-family: 'Pragmatica';
    font-style: normal;
    font-weight: 700; /* Bold */
    src: url('../../fonts/pragmatica_bold.woff2') format('woff2'),
         url('../../fonts/pragmatica_bold.woff') format('woff'),
         url('../../fonts/pragmatica_bold.ttf') format('truetype'),
         url('../../fonts/pragmatica_bold.otf') format('opentype');
}

@font-face {
    font-family: 'Pragmatica';
    font-style: oblique;
    font-weight: 700; /* Bold Oblique */
    src: url('../../fonts/pragmatica_bold-oblique.woff2') format('woff2'),
         url('../../fonts/pragmatica_bold-oblique.woff') format('woff'),
         url('../../fonts/pragmatica_bold-oblique.ttf') format('truetype'),
         url('../../fonts/pragmatica_bold-oblique.otf') format('opentype');
}

/* GENERAL __________________________________________________________ */
/* __________________________________________________________________ */

body.home header > div[data-elementor-type="wp-post"] {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
} 

#masthead header {
    background-color: white;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

body.home #masthead header {
    background-color: transparent;
}

body.home #masthead header:hover {
    background-color: white;
    box-shadow: none;
}

body.home #masthead header.scrolled {
    background-color: white;
    box-shadow: rgba(136, 136, 170, 0.15) 0px 2px 0px 0px, 
    rgba(145, 145, 145, 0.2)  0px 1px 0px 0px;
}

#masthead header.scrolled {
    background-color: white;
    box-shadow: rgba(136, 136, 170, 0.15) 0px 2px 0px 0px, 
    rgba(145, 145, 145, 0.2) 0px 1px 0px 0px;
}

#masthead header:hover {
    background-color: white;
    box-shadow: none;
}

div#page {
    /* overflow: hidden; */
}

.elementor-widget-icon  {
    line-height: 0px;
}

.btn-custom-green .elementor-button-text {
    color: #333333!important;
}
.btn-custom .elementor-button-text{
    font-size: 16px ;
    color: #332D69;
}

.btn-custom svg {
    /* rotate: 45deg ; */
    transition: ease-in-out 0.3s;
}

.btn-custom .elementor-button {
    &:hover svg {
        rotate: 45deg ;
    }
}

.btn-custom-underline .elementor-button-content-wrapper {
    padding-bottom: 3px;
}

.btn-custom-underline .elementor-button-wrapper .elementor-button-link {
    position: relative;
    background-image: linear-gradient(transparent, transparent), linear-gradient(#332D69, #332D69);
    background-size: 100% .1rem, 0 .1rem;
    background-position: 0 100%, 100% 100%;
    background-repeat: no-repeat;
    transition: background-size .4s;

    &:hover {
        text-decoration: none;
        background-size: 0 .1rem, 100% .1rem;
        background-position: 100% 100%, 0 100%;
    }
}


#logo-background {
    opacity: 0.7;
}

#slider-logo-home-page img {
    width: 90%;
}

.green.banner {
    overflow: hidden;
}

#light-green-banner {
    background-position: left 46%;
    width: calc(100% + 20px);
    translate: -10px 0px;
}

#dark-green-banner::before{
    transform: translate(-50px, -2px);
}

#contactez-nous-btn .elementor-widget-container p {
    margin: 0;
}

 #section-QSN-page, #section-secteur-page, .green-banner {
    overflow-x: clip;
}

.cky-consent-container .cky-notice-btn-wrapper {
    gap: 15px;
}

/* NAVBAR ___________________________________________________________ */
/* __________________________________________________________________ */


#popup-mobile-menu .navbar-secondary-menu li  a::after,
#navbar-links .navbar-secondary-menu li  a::after {
    content: "";
    position: absolute;
    background-position: right center;
    opacity: 1;
}

#popup-mobile-menu .navbar-secondary-menu li:nth-child(1) a,
#navbar-links .navbar-secondary-menu li:nth-child(1) a {
    padding-left: 24px;
}

#popup-mobile-menu .navbar-secondary-menu li:nth-child(2) a,
#navbar-links .navbar-secondary-menu li:nth-child(2) a {
    padding: 15px 18px 4px 0;
    border-bottom: 1px solid #333333;
}

#popup-mobile-menu .navbar-secondary-menu li:nth-child(1) a::after,
#navbar-links .navbar-secondary-menu li:nth-child(1) a::after {
    background-image: url('/wp-content/uploads/2025/03/espace-client-picto.svg');
    background-repeat: no-repeat;
    background-size: contain; 
    left: 0;
    width: 18px;
    height: 18px;
}

#popup-mobile-menu  .navbar-secondary-menu li:nth-child(2) a::after,
#navbar-links .navbar-secondary-menu li:nth-child(2) a::after {
    background: url('/wp-content/uploads/2025/02/fleche_pictoramme.svg');
    background-repeat: no-repeat;
    background-size: contain; 
    right: 0;
    padding-right: 3px;
    width: 11px;
    height: 11px;
    transition: ease-in-out 0.3s;
}

#popup-mobile-menu .navbar-secondary-menu li:nth-child(2):hover a::after,
#navbar-links .navbar-secondary-menu li:nth-child(2):hover a::after {
    rotate: 45deg;
}

#navbar-links #navbar-primary-menu li a {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    line-height: 2rem;
}

#navbar-links #navbar-primary-menu .hfe-nav-menu > li {
    padding-bottom: 32px; 
    padding-top: 32px; 
}

#navbar-links #navbar-primary-menu a::after {
    height: 1px;
}

#navbar-links #navbar-primary-menu .current_page_item a::after {
    height: 2px;
}

#navbar-links .hfe-nav-menu .sub-menu {
    position: absolute;
    column-count: 2;
    gap : 64px;
    width: 450px!important;
    padding-top: 15px;
    padding-bottom: 56px;
}

#navbar-links .hfe-sub-menu-item {
    padding: 0;
}

#navbar-links .hfe-nav-menu .sub-menu {
    background-color: transparent;
}

#navbar-links .hfe-nav-menu .sub-menu::after {
    content: "";
    position: absolute;
    width: 200vw;
    height: 100%;
    top: 1px;
    left: 50%;
    translate: -50% 0;
    background-color:white !important;
    z-index: -10;
    box-shadow: rgba(136, 136, 170, 0.15) 0px 2px 0px 0px, 
    rgba(145, 145, 145, 0.2) 0px 1px 0px 0px;
}

#navbar-links .hfe-has-submenu-container .hfe-menu-toggle {
    display: none;
}

#navbar-links .hfe-has-submenu-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

#navbar-links .hfe-has-submenu-container::after {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    background: url('/wp-content/uploads/2025/03/fleche-bas-picto.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
}

#masthead .e-con-inner {
    border-bottom: 1px solid transparent;
}

.border-navbar {
    border-bottom: 1px solid #E1E0EA !important;
}

#popup-mobile-menu {
    height: 100vh;
}

#mobile-menu-btn {
    max-width: 24px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    position: relative;
    height: 24px;
    justify-content: center;
    align-items: center;

    div {
        height: 2px;
        width: 100%;
        margin: 0;
        padding: 0;
        position: absolute;
        transform-origin: center;
    }

    div:nth-child(1) {
        top: 4px;
    }

    div:nth-child(2) {
        bottom: 4px;
    }
    &.open div:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    &.open div:nth-child(2) {
        transform: translateY(-6px) rotate(-45deg);
    }
}

#popup-mobile-menu-primary {
    overflow-y: auto; 
    margin-top: 50px;
    height: 100vh;

    > div {
        display: table;
        align-items: center;
        width: 100%;

        > div {
            width: 100%;
            display: table-cell;
            vertical-align: middle;
        }
    }

    .parent {
        border-bottom: 1px solid #CCCCCC;
        > a {
            padding: 24px 0;
        }
    }
    .parent-has-child {
        border-bottom: 1px solid #CCCCCC;
        > div a {
            padding: 24px 0;
        }

        ul li:last-child {
            margin-bottom: 24px;
        }
    }
    
}

#popup-mobile-menu {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;

    &.active {
        display: flex;
        opacity: 1;
    }
}

#popup-mobile-menu-primary .hfe-nav-menu .menu-item span i {
    display: none;
}

#popup-mobile-menu-primary .hfe-nav-menu .hfe-menu-item span::before {
    content: "";
    width: 12px;
    height: 12px;
    background: url('/wp-content/uploads/2025/03/fleche-bas-picto.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: transform 0.3s ease-in-out;
}

#popup-mobile-menu-primary .hfe-nav-menu .hfe-menu-item[aria-expanded="true"] span::before {
    transform: rotate(180deg); 
}

/* SUIVI DE COLIS ___________________________________________________ */
/* __________________________________________________________________ */

#suivi-colis-container .label-name {
    position: absolute;
    translate: 15px 38px;
    z-index: 1;
    transition :  ease-in-out 0.3s;
    cursor: text;
}

input:focus {
    outline: 2px solid #403883;
}

#suivi-colis-container .elementor-widget-text-editor .elementor-widget-container a{
    color: #403883;
    text-decoration: underline!important;
}

#suivi-colis-container .elementor-button-text {
    color: #333333 ;
}
#form-suivi-colis, #form-suivi-colis form input, #form-suivi-colis form p label  {
    width: 100%;
}


#suivi-colis-container #send-form, #suivi-colis-container .wpcf7-spinner {
    display: none;
}

#suivi-colis-container label[for="send-form"] {
    background-color: #AECF7A;
    border-radius: 4px;
    height: 57px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 16px;
    cursor: pointer;
    transition: ease-in-out 0.3s;
    margin: 30px 0;

    &:hover {
        background-color: #99c256;
    }
}

#suivi-colis-container label[for="send-form"]:hover::after {
    rotate : 45deg;
}

#suivi-colis-container label[for="send-form"]::after {
    content: "";
    width: 10px;
    height: 10px;
    background: url('/wp-content/uploads/2025/02/fleche_pictoramme.svg');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    transition: ease-in-out 0.3s;
}


#form-suivi-colis form > p input {
    border: 1px solid #CCCCCC;
    border-radius:  4px;
}


#form-suivi-colis #codepostal-input, #form-suivi-colis #reference-input {
    padding: 17px 16px 3px 16px ;
    height: 57px;
    transition: ease-in-out 0s;
    margin-bottom: 5px;
}

#connexion-btn .elementor-button {
    border-radius: 0!important;
}

/* SLIDER ___________________________________________________________ */
/* __________________________________________________________________ */

#bloc-nos-solutions {
    overflow: hidden;
}
.my-solutions-slider {
    .swiper-slide {
        overflow: hidden;
        border-radius: 8px;
    }

    .img-container {
        border-radius: 8px;
        overflow: hidden;
    }

    img {
        border-radius: 8px;
        width: 100%;
        height: auto;
        object-fit: cover; 
        transition: ease-in-out 0.5s;
        overflow: hidden;
        display: block;

        &:hover {
            scale: 1.05;
        }
    }

    a {
        text-decoration: none;
    }
    h3 {
        font-size: 20px; 
        font-weight: bold;
        text-decoration: none;
        font-family: "Pragmatica", Sans-serif;
        margin-top: 32px ;
    }
}

#model-slider-container {
    overflow: hidden;
}

#slider-custom-container {
    position: relative;
}

#slider-custom-container .swiper-wrapper {
    width: fit-content;
}

.my-solutions-slider {
    overflow: inherit;
}

#slider-custom-container .slider-custom figcaption {
    margin-top: 32px;
}

#slider-custom-arrows svg {
    transition: ease-in-out 0.3s;
}

#left-arrow-custom-slider, #right-arrow-custom-slider {
    transition: ease-in-out 0.3s;
}

#left-arrow-custom-slider:not(.disabled), #right-arrow-custom-slider:not(.disabled) {
    cursor: pointer;
}

#left-arrow-custom-slider svg, #right-arrow-custom-slider svg {
    opacity: 0.5;
}

#left-arrow-custom-slider.disabled svg, #right-arrow-custom-slider.disabled svg {
    opacity: 0.5;
}

#left-arrow-custom-slider:not(.disabled) svg, #right-arrow-custom-slider:not(.disabled) svg {
    opacity: 1
}

#left-arrow-custom-slider:not(.disabled):hover .elementor-widget-container, 
#right-arrow-custom-slider:not(.disabled):hover .elementor-widget-container {
    background-color: #99C256;
}


#right-arrow-custom-slider:hover:not(.disabled) svg {
    transform: translate(2px, 0px);
    opacity: 1;
}
#left-arrow-custom-slider:hover:not(.disabled) svg {
    transform: translate(-2px, 0px) rotate(180deg);
    opacity: 1;
}

.swiper-button-prev, .swiper-button-next {
    display: none;
}


/* PAGE QUI SOMMES NOUS _____________________________________________ */
/* __________________________________________________________________ */

.btn-postuler-qsn .elementor-button-wrapper .elementor-button-link {
    text-decoration: none;
}

.btn-postuler-qsn .elementor-button-wrapper .elementor-button-text {
    padding-bottom: 2px;
}

.btn-custom .elementor-button-content-wrapper .elementor-button-icon svg{
    width: 11px;
}


@media (max-width: 767px) {
    #slider-custom-container .slider-custom figcaption {
        margin-top: 15px;
    }
}

@media screen and (min-width : 577px) and (max-width: 724px) {
    .cky-modal .cky-footer-wrapper .cky-prefrence-btn-wrapper {
        gap: 15px;
    }
}


@media screen and (max-width : 1024px) {
    #mobile-menu-btn {
        display: flex;
    }
}

@media screen and (max-width: 1200px) {
    #light-green-banner {
        background-size: 130% 100%;
    }
    #dark-green-banner::before {
        background-size: 130% 100%;
    }
    #dark-green-banner {
        width: calc(100% + 20px);
        translate: -10px 0px;
    }
}