.main-header .container-fluid {    padding-bottom: 0px !important;
     }

     .main-header .container-fluid::before {

      /*   border-bottom: 1px solid var(--accent-color); */

     }

     .section-title h2 {
         font-size: 72px;}

.page-header-box h1 span {
    font-weight: 700;
    color: var(--accent-color);
    background-image: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
}

     body {
         font-family: var(--default-font);
         font-weight: 400;
         line-height: 1.6em;
         background: white;
     }
/* MacBook Pro, iMac Retina, iPhone, écrans Retina… */

@media (min-resolution: 2dppx) {
    body {
        font-size: 1.1rem;
    }
}
/* PC standards, vieux écrans, écrans Full HD basiques */
@media (max-resolution: 1.5dppx) {
    body {
        font-size: 1rem;
    }
}
     p {
         line-height: 1.5em;}

      h2 a {
         color: inherit;
         font-size: 24px; !important;
         font-weight: 500; !important;
     }


.company-growth-image img{

    aspect-ratio: 4/3;

}
.post-featured-image figure img{
    aspect-ratio: 4/3;
}

.slicknav_menutxt{ display:none}
.section-title h1 span, .section-title h2 span {
    font-weight: 700;
    color: var(--accent-color);
    background-image: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
}

    .title-cooper span {
        background-color: var(--accent-color); /* jaune */
        padding: 0 4px; /* optionnel : petite marge autour du texte */
        display: inline-block; /* s’adapte exactement au texte */
    }

     .h3-sub-title  {
         display: inline-block;
         font-size: 14px;
         font-weight: 600;
         line-height: 1.4em;
         letter-spacing: 0.1em;
         text-transform: uppercase;
         color: var(--primary-color);
        background: url('../images/icon-sub-heading.svg') no-repeat;
         background-position: left center;
         background-size: auto;
         padding-left: 24px;
         margin-bottom: 20px;
     }

      .h2-stroke{
         font-size: 70px;
         line-height: 1.1em;
         font-weight: 600;
         background: linear-gradient(to left, var(--dark-color) 100%, var(--dark-color) 100%);
         -webkit-background-clip: text;
         -webkit-text-stroke: 4px transparent;
         color: white;
     }

.slicknav_btn {
    background: linear-gradient(263deg, var(--accent-color) 0.16%, var(--accent-color) 99.84%);
}
.slicknav_menu {
    position: absolute;
    width: 100%;
    padding: 0;
    background: linear-gradient(263deg, var(--dark-color) 0.16%, var(--dark-color) 99.84%);
}
     .section-row {
         margin-bottom: 40px;
     }
     .our-brand  h2 a {font-size: 50px; !important;}
     /* Forcer une hauteur compacte du header */
     header.main-header .navbar {
         min-height: 60px !important;   /* au lieu de 72px */
         padding-top: 0 !important;
         padding-bottom: 0 !important;
     }

     /* Centrer verticalement les éléments du menu */
     header.main-header .navbar .nav-link {
         padding-top: 20px !important;
         padding-bottom: 20px !important;
     }

     header.main-header .navbar .nav-link:hover {
         color: var(--accent-color) !important;
     }
     /* --- Sticky/Fix header --- */
     header.main-header .header-sticky {
         position: fixed;      /* le header reste visible en permanence */
         top: 0;
         left: 0;
         right: 0;
         z-index: 1100;        /* au-dessus du contenu */
         box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* optionnel : ombre légère */
     }

     /* Transparent par défaut */
     header.main-header {
         background: transparent !important;
         box-shadow: none !important;
         transition: background-color 0.25s ease, box-shadow 0.25s ease;
     }

     /* Quand scrollé → fond blanc forcé */
     header.main-header.is-scrolled,
     header.main-header.is-scrolled .header-sticky {
         background-color: #ffffff !important;
         box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
     }

     /* Liens en blanc quand le header est transparent */
     header.main-header .navbar .nav-link,
     header.main-header .header-btn a,
     header.main-header .btn-phone,
     header.main-header .btn-default {
         color: #ffffff !important;
         border-color: rgba(255,255,255,0.7) !important;
     }
     header.main-header .dropdown-menu li a {
         color: var(--dark-color) !important;
         border-color: rgba(255,255,255,0.7) !important;
     }

     /* Header une fois qu'on a scrollé */
     header.main-header.is-scrolled {
         background: #ffffff !important;
         box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
     }

     /* Liens en bleu quand on a scrollé */
     header.main-header.is-scrolled .navbar .nav-link,
     header.main-header.is-scrolled .header-btn a,
     header.main-header.is-scrolled .dropdown-btn,
     header.main-header.is-scrolled .btn-default {
         color: var(--dark-color) !important;
         border-color: var(--dark-color) !important;
     }

     header.main-header.is-scrolled .navbar .nav-link:hover,
     header.main-header.is-scrolled .header-btn a:hover,
     header.main-header.is-scrolled .dropdown-btn:hover,
     header.main-header.is-scrolled .btn-default:hover {
         color: var(--accent-color) !important;
         border-color: var(--dark-color) !important;
     }

     /* Bouton highlighté quand scrollé */
     header.main-header.is-scrolled .btn-default.btn-highlighted {
         background: var(--dark-color) !important;
         color: var(--accent-color);
         border-color: var(--dark-color) !important;
     }
     /* Taille et transition du logo */
    header.main-header {
        --logo-height: 40px;
    }

    header.main-header .logo {
        height: var(--logo-height);
        max-height: var(--logo-height);
        width: calc(var(--logo-height) * 50 / 17);
        max-width: calc(var(--logo-height) * 50 / 17);
        display: inline-block;
        vertical-align: middle;
        transition: opacity .2s ease;
    }

     /* Par défaut (en haut, header transparent) : logo clair visible, logo foncé caché */
     header.main-header .logo-dark { display: none; }
     header.main-header .logo-light { display: inline-block; }

     /* Quand on scrolle (header blanc) : on inverse */
     header.main-header.is-scrolled .logo-light { display: none !important; }
     header.main-header.is-scrolled .logo-dark  { display: inline-block !important; }




.hero-content .section-title h1 span{
        color: var(--accent-color);
         background-image : unset;
         -webkit-text-fill-color: unset;

     }

     .btn-default {
         background-image: unset;
         background-color: var(--dark-color);
     }

     .btn-default.btn-highlighted:hover{
         background-image : unset;
         background-color: var(--dark-color);
         color: var(--white-color);
     }

     .btn-default.btn-highlighted::after {
         background: none;
     }
     .hero-btn .btn-default.btn-highlighted {
         margin-left: 0px;
     }

.footer-brand,
.footer-brand .footer-baseline,
.footer-brand .footer-baseline span,
.footer-brand .footer-description,
.footer-title,
.footer-link,
.footer-news p {
    color: #ffffff;
}
.footer-brand .footer-baseline{
    padding-left: 34px;
    font-size: 2rem;
    color: var(--accent-color);
    line-height: 1em;
    margin-top: 20px;
}
.footer-follow {
    padding-left: 34px;
}
.footer-follow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    font-size: 1.125rem;
    font-weight: 600;
}
.footer-follow-link:hover {
    color: var(--accent-color);
}
.footer-follow-label {
    font-size: 1.25rem;
}
.footer-follow-icon--linkedin {
    width: 28px;
    height: 28px;
}

.page-content {
    overflow-x: auto;
}
.page-content table {
    width: 100%;
    border-collapse: collapse;
    border: 2px solid var(--primary-color);
    font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
    margin-bottom: 2rem;
}
.page-content th,
.page-content td {
    border: 1px solid var(--primary-color);
    padding: clamp(0.5rem, 0.4rem + 0.8vw, 1rem);
    text-align: left;
}
.page-content th {
    background-color: rgba(0, 0, 0, 0.05);
    font-weight: 600;
}
.page-content tr:nth-child(even) td {
    background-color: rgba(0, 0, 0, 0.02);
}

@media (max-width: 576px) {
    .page-content table {
        font-size: 0.8rem;
    }
}

.footer-title {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.footer-links ul,
.footer-news ul {
    margin: 0;
    padding: 0;
}

.footer-list-item {
    margin-bottom: 0px;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    text-decoration: none;
}

.footer-link::before {
    content: "\203A";
    display: inline-block;
    font-size: 24px;
    transform: translateY(-1px);
}

.footer-link:hover {
    color: var(--accent-color);
}

@media (max-width: 767.98px) {
    .main-footer .row > [class*="col"] + [class*="col"] {
        margin-top: 32px;
    }
    .main-footer .footer-links {
        padding-left: 34px;
    }
}

     .about-us-content .section-title h2, .our-brand .service-content .section-title h2   {
         font-weight: 700;
         background-clip: text;
         color: var(--dark-color);
         margin-bottom: 20px;

     }

.default-section{padding: 50px 0;}

.btn-default {
    text-transform: unset;
}
.h3-sub-title {
    display: inline-block;
    font-size: 18px;
    text-transform: none;
    border-left: solid 2px var(--accent-color);
    background: none;
    font-weight: 400;
    line-height: 1.4em;
    letter-spacing: 0px;
    padding-left: 10px;
margin-left: 5px;
}

    .section-title h2 {
        font-weight: 700;
        background-clip: text;
        color: var(--dark-color);
        font-size: clamp(2.5rem, 3.6vw, 3.8rem);
    }
     .hero::before {
     content: '';
     display: block;
     position: absolute;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
        /* background: linear-gradient(180deg,rgba(0, 0, 0, 0.5) 0%, rgba(255, 199, 0, 0) 100%);*/

         /* background: linear-gradient(180deg, rgba(4, 42, 45, 0) 65.37%, #041a2d 100.18%), linear-gradient(270deg, rgba(4, 42, 45, 0) 25%, #04172d 100%);*/
         background:   none;
     width: 100%;
     height: 100%;
     z-index: 1;
     }


.about-us-img-1 figure {
    display: block;
     mask-image: none;
     background-image:none;
    mask-size: cover;
    mask-position: center center;
    mask-repeat: no-repeat;
    border-radius: 30px;
    width: 100%;
    height: 100%;
}


     .blog-item .blog-featured-image a {

         border-radius: 0px;

     }
/* .blog-item .blog-featured-image a:hover {

     border-radius: 15%;

 }

 .blog-item .blog-featured-image img {
     width: 100%;
     aspect-ratio: 1 / 1;
 }*/

     .blog-item .blog-featured-image {
         width: 45%;}

     .invert-title{
         position: relative;
         display: inline-block;
         font-weight: 800;
         font-size: clamp(2rem, 6vw, 3rem);
         line-height: 1.05;
         letter-spacing: 0;
         color: var(--dark-color);          /* texte de base */
         background: transparent;     /* fond de base */
         padding: .05em .03em; /* petite marge pour éviter la coupe aux bords */
         /* variables d’animation */
         --reveal: 0%;
         --bleed: 0.8px;       /* minuscule débord pour éviter toute ligne à la jointure */
         will-change: clip-path, transform;
         isolation: isolate;
     }

     /* Overlay fond noir qui progresse */
     .invert-title::before{
         content: "";
         position: absolute;
         inset: 0;
         background: var(--dark-color);
         pointer-events: none;
         z-index: 0;
         color:white;
         /* Découpe rectangulaire qui s’élargit de gauche→droite
            (on “saigne” un peu avec --bleed pour éviter tout trait) */
         clip-path: inset(
                 calc(-1 * var(--bleed))
                 calc(100% - var(--reveal) - var(--bleed))
                 calc(-1 * var(--bleed))
                 calc(-1 * var(--bleed))
         );
     }

     /* Même texte en blanc, découpé pareil, au-dessus */
     .invert-title::after{
         content: attr(data-text);
         position: absolute;
         inset: 0;
        color: white;
         pointer-events: none;
         z-index: 1;
         /* On veut que ça rende comme du texte normal */
         display: inline-block;
         font: inherit;
         line-height: inherit;
         letter-spacing: inherit;

         clip-path: inset(
                 calc(-1 * var(--bleed))
                 calc(100% - var(--reveal) - var(--bleed))
                 calc(-1 * var(--bleed))
                 calc(-1 * var(--bleed))
         );
     }

     /* Variante verticale (optionnelle) : ajoute .dir-y au titre
        pour révéler du bas → haut (sinon supprime ce bloc) */
     .invert-title.dir-y::before,
     .invert-title.dir-y::after{
         clip-path: inset(
                 calc(100% - var(--reveal) - var(--bleed))
                 calc(-1 * var(--bleed))
                 calc(-1 * var(--bleed))
                 calc(-1 * var(--bleed))
         );
     }

     /* Respect des préférences d’accessibilité */
     @media (prefers-reduced-motion: reduce){
         .invert-title{ --reveal: 100%; }
     }

/* Header basique */


    .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    /* Dropdown */
    .dropdown {
        position: relative;
    }

    .dropdown-btn {
        color: #fff;
        padding: 8px 14px;
        cursor: pointer;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 12px;
        background-color: transparent;
        border: none;
    }

    .dropdown-btn i:hover {
        color: var(--accent-color) !important ;
    }

    /* Liste pays */
    @media (max-width: 991.98px) {
        header.main-header .container-fluid {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .dropdown-menu {
        list-style: none;
        margin: 0;
        padding: 10px 16px;
        position: absolute;
        top: calc(100% + 8px);
        right: 0;
        background: #fff;
        border: 1px solid #ddd;
        border-radius: 10px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        display: none;
        min-width: 90px;
        animation: fadeIn .2s ease;
    }

    .dropdown-menu li {
        padding: 0;
    }
    .dropdown-menu li.is-active a {
        font-weight: 600;
        color: #000;
    }
    .dropdown-menu::before {
        content: '';
        position: absolute;
        top: -12px;
        left: 0;
        right: 0;
        height: 12px;
    }
    /* Affichage au survol ou sur clic */
    .dropdown:hover .dropdown-menu,
    .dropdown.is-open .dropdown-menu,
    .dropdown:focus-within .dropdown-menu {
        display: block;
        padding-left: 10px;
    }
    .main-menu .dropdown-menu  li a  {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 5px !important;
        color: #333;
        text-decoration: none;
        font-size: 14px !important;
        font-weight: 300 !important;
    }

    .dropdown-menu a:hover {
        background: #f0f0f0;
        color: red !important;
    }

    /* Animation */
    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .flag-circle {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        background: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }

    .dropdown-btn .flag-circle {
        background: rgba(255,255,255,0.15);
        box-shadow: none;
    }

    header.main-header.is-scrolled .dropdown-btn .flag-circle {
        background: #fff;
    }

    .flag-circle .flag-icon {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    .menu-item-langues-mobile {
        width: 100%;
    }

    .menu-item-langues-mobile .menu-link-langues {
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 13px;
        letter-spacing: 0.05em;
        margin-bottom: 8px;
        opacity: 0.7;
        gap: 12px;
    }

    .menu-item-langues-mobile .menu-lang-title {
        flex: 1;
    }

    .menu-item-langues-mobile .flag-circle-current {
        width: 32px;
        height: 32px;
        background: rgba(255,255,255,0.15);
        box-shadow: none;
    }

    .mobile-lang-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mobile-lang-item a {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 0;
        font-size: 15px;
        color: inherit;
    }

    .mobile-lang-item.is-active a {
        font-weight: 600;
    }

    .mobile-lang-item .flag-circle {
        background: rgba(255,255,255,0.15);
        box-shadow: none;
    }

    .slicknav_nav .mobile-lang-list {
        gap: 8px;
    }

    /* Flèche */
    .arrow {
        font-size: 10px;
    }

/* Base */
    html, body { margin:0; padding:0; overflow-x:clip; }

    /* HERO = 100% hauteur d’écran, sans marge et sans bidouilles */
    .hero{
        position: relative;
        width: 100%;
        min-height: calc(100vh - var(--header-h, 0px));
        overflow: hidden;
        padding-top: var(--header-h, 0px);
        box-sizing: border-box;
    }
    @supports (height: 100dvh) {
        .hero { min-height: calc(100dvh - var(--header-h, 0px)); }
    }

    /* Vidéo plein cadre */
    .hero-bg-video{
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }
    .hero-bg-video video{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* Contenu au-dessus de la vidéo, centré, sans ajouter de hauteur */
.hero-section {
    position: relative;
    z-index: 2;
    min-height: calc(100vh - var(--header-h, 0px));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 200px;
}
    /* Nettoyage Bootstrap dans la hero */
    .hero .container-fluid,
    .hero .row,
    .hero .col-lg-6,
    .hero .col-md-9 {
        margin: 0;
        padding: 0;
        height: auto;
    }

    /* ✅ Le reste du site commence sous le header fixe (pas tout le body) */
    .hero + * {
        margin-top: 0;
    }

    /* (Optionnel) éviter l’effet “liseré” tant qu’on est en haut */
    header.main-header .header-sticky { box-shadow: none !important; }
    header.main-header.is-scrolled .header-sticky { box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;border-bottom: 1px solid var(--accent-color); }

    @media only screen and (max-width: 1500px) {
        header.main-header {
            margin-top: 0px;
        }
    }

    @media only screen and (min-width: 1500px) {
        .hero {
            padding-top: var(--header-h, 0px);
            min-height: calc(100vh - var(--header-h, 0px));
        }
    }

/* --- Scroll Down Indicator --- */
    .scroll-indicator {
        position: absolute;
        bottom: 24px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        animation: fadeInScroll 1.5s ease-in-out 0.5s forwards;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    /* Flèche animée */
    .scroll-arrow {
        width: 20px;
        height: 20px;
        border-left: 2px solid #fff;
        border-bottom: 2px solid #fff;
        transform: rotate(-45deg);
        animation: bounceArrow 1.5s infinite ease-in-out;
        opacity: 0.8;
    }

    /* Texte "scroll" au-dessus de la flèche */
    .scroll-indicator::before {
        content: "scroll";
        font-size: 12px;
        color: #fff;
        font-weight: 300;
        letter-spacing: 2px;
        text-transform: uppercase;
        margin-bottom: 8px;
        opacity: 0.7;
    }

    /* Animations */
    @keyframes fadeInScroll {
        to { opacity: 1; }
    }
    @keyframes bounceArrow {
        0%, 20%, 50%, 80%, 100% { transform: translateY(0) rotate(-45deg); }
        40% { transform: translateY(6px) rotate(-45deg); }
        60% { transform: translateY(3px) rotate(-45deg); }
    }

    /* Classe appliquée quand on scrolle */
    .scroll-indicator.hide {
        opacity: 0;
        pointer-events: none;
    }

.number{
        font-size: 100px;
        position: relative;
        -webkit-text-fill-color: transparent;
        color: transparent;
        -webkit-text-stroke-width: 2px;
        /* stroke-width: 2px; */
        -webkit-text-stroke-color: rgba(31, 31, 31, 0.6);
        stroke: rgba(31, 31, 31, 0.6);
        font-weight: 500;
        line-height: 0.8;
        font-family: var(--counter-font);
        padding-bottom: 10px;
        margin-bottom: 10px;
        border-bottom: 1px solid rgba(31, 31, 31, 0.16);
    }
    .number:after {

    }
    .company-growth-item {
        width: calc(25% - 22.5px);
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }

    .company-growth-box {
        margin-top: 40px;}

    .our-brand {
        padding: 100px 0;
        padding-bottom: 50px;
        background-color: white;
    }
    .service-content .section-title h3, .service-content .section-title h2, .service-content .section-title p {
        color: var(--primary-color);
    }

.keynumber {
    padding: 50px 0;
    padding-bottom: 20px;
    background-color: var(--dark-color);
    }
.keynumber .section-title {margin-bottom: 20px;}
.keynumber .section-title  h2 { color: var(--accent-color)}
    .keynumber .keynumber-number {
        font-weight: 700;
        font-size: clamp(2.5rem, 4vw, 3.5rem);
        padding:20px;
        color:white;
    }
    .keynumber .keynumber-number span {

        font-size: 0.7em;
        margin-left:-10px;

    }
    .keynumber .keynumber-title {
        font-weight: 100;
        font-size: 0.85em;
        color:white;
    }
    .keynumber .keynumber-cell { padding: 20px}
    .separator {
        border-bottom: 1px solid var(--accent-color);
       margin-bottom: 50px;
        margin-right: 150px;
        margin-left: 150px;
    }

.scrolling-content span {
        display: inline-flex;
        align-items: center;
        text-transform: capitalize;
        font-size: 70px;
        line-height: 1.1em;
        font-weight: 600;
        background: linear-gradient(to left, var(--dark-color) 100%, var(--dark-color) 100%);
        -webkit-background-clip: text;
        -webkit-text-stroke: 4px transparent;
        color: white;;
    }
    /* Laisse les colonnes s'étirer à la même hauteur */
    .our-brand .row { align-items: stretch; }
    .our-brand .col-lg-4 { position: relative; overflow: visible; }
    .our-brand .col-lg-4 > .service-content {
        position: sticky;
        top: 24px;             /* pas besoin de var(--header-h) car le body est déjà paddé */
        margin-top: 0;
        align-self: auto;      /* pas besoin de flex-start ici */
        z-index: 1;
    }
    @media (max-width: 992px){
        .our-brand .col-lg-4 > .service-content { position: static; }
    }
    .logo-grey { margin-top:75px}
    .logo-grey img { filter: grayscale(100%);}
    .logo-grey .col-md-2 {display:flex;align-items: center;
        justify-content: center;}

:root { --gap:64px; --img-h:90px; --header-h: 80px; }

        .moving-row { overflow:hidden; margin-bottom:0px; }
        .line-logo {margin-top :100px}
        .brand-track {
            display: inline-flex;
            align-items: center;
            gap: 40px; /* espace entre les logos */
            will-change: transform;
        }

        .brand-track img {
            display: block;
            /*height: 80px;  hauteur des logos
            width: auto; */
            object-fit: contain;
            filter: grayscale(100%) brightness(0.9);
            transition: filter 0.3s ease, transform 0.3s ease;
        }
        .brand-track img:hover { filter: grayscale(0%) brightness(1); }

.our-brand .col-lg-4 > .service-content {
    position: sticky;
    top: calc(var(--header-h, 80px) + 120px);
    margin-top: 0;
    align-self: auto;
    z-index: 1;
}
        /* Footer TRÈS haut pour allonger le scroll */

        @media (prefers-reduced-motion: reduce) {
            .brand-track { transform:none !important; transition:none !important; }
        }

.how-we-work {
    background-color: var(--secondary-color);
}

.blog-item {

    border-bottom: 1px solid var(--accent-color);

}

.how-work-content h3 {
         font-size: 22px;
         font-weight: 300;
         font-style: italic;     }

     .how-work-content {
         border-top: 1px solid var(--divider-color);
         padding-top: 15px;
         margin-top: 15px;
     }
     .section-row {
         margin-bottom: 40px;
     }
     /* CSS */
     .media-hover{
         position:relative;
         overflow:hidden;
         border-radius:12px;
         aspect-ratio:9/16;      /* ajustez au besoin */
         background:#000;
         cursor:pointer;
     }

     .media-img,
     .media-video{
         position:absolute;
         inset:0;
         width:100%;
         height:100%;
         object-fit:cover;
         display:block;
     }

     /* État par défaut */
     .media-img{
         transform:scale(1);
         transition:transform .5s ease, opacity .4s ease;
     }
     .media-video{
         opacity:0;
         transition:opacity .4s ease;
         pointer-events:none;
     }

     /* Survol : zoom image + vidéo visible */
     .media-hover:hover .media-img{
         transform:scale(1.05);
         opacity:0;
     }
     .media-hover:hover .media-video{
         opacity:1;
     }
.media-firstName{
    display: flex;
    justify-content: flex-end;
    font-size: 0.6em;
    font-weight: 100;
    align-items: flex-end;
    position: absolute;
    bottom: 10px;
    right: 10px;
    line-height: 14px;
    text-align: right;
    font-style: italic;
    border-right: solid 2px #ffffffd4;
    padding-right: 6px;
    color:#ffffffd4
}


     /* réduit les animations si demandé */
     @media (prefers-reduced-motion: reduce){
         .media-img, .media-video{
             transition:none;
         }
     }

:root{
         --divider-color:#e5e7eb;
         --header-h: 80px;

         /* Durées / amplitudes */
         --dur-move: 300ms;
         --dur-fade: 900ms;
         --stagger: 90ms;
         --depart-amp: 80vw;

         --panel-gap: 32px;
         --left-col-w: 360px;

         --panel-enter-x: 60px;
         --panel-enter-dur: 100ms;
     }

     /* Base */
     .how-we-work .how-work-content h3 { font-size:22px; font-weight:300; font-style:italic; }
     .how-we-work .how-work-content { border-top:1px solid var(--divider-color); padding-top:15px; margin-top:15px; }
     .how-we-work .section-row { margin-bottom:20px; }

     /* Média */
     .how-we-work .media-hover{ position:relative; overflow:hidden; border-radius:12px; aspect-ratio:9/16; background:#000; cursor:pointer; }
     .how-we-work .media-img,.how-we-work .media-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
     .how-we-work .media-img{ transform:scale(1); transition:transform .5s ease, opacity .4s ease; }
     .how-we-work .media-video{ opacity:0; transition:opacity .4s ease; pointer-events:none; }
     .how-we-work .media-hover:hover .media-img{ transform:scale(1.05); opacity:0; }
     .how-we-work .media-hover:hover .media-video{ opacity:1; }
     @media (prefers-reduced-motion: reduce){
         .how-we-work .media-img, .how-we-work .media-video{ transition:none !important; }
     }

     .our-purpose-video-wrapper{
         max-width: 860px;
         margin-left:auto;
         margin-right:auto;
     }
     .our-purpose-video{
         position:relative;
         border-radius:12px;
         overflow:hidden;
         background:#000;
     }
     .our-purpose-video__player,
     .our-purpose-video__trigger{
         position:absolute;
         inset:0;
         width:100%;
         height:100%;
     }
     .our-purpose-video__player{
         display:none;
         z-index:2;
     }
     .our-purpose-video__player.is-active{
         display:block;
     }
     .our-purpose-video__player video{
         width:100%;
         height:100%;
         object-fit:cover;
         display:block;
         border:0;
         border-radius:12px;
     }
     .our-purpose-video__trigger{
         border:0;
         padding:0;
         background:transparent;
         cursor:pointer;
         z-index:3;
         overflow:hidden;
         border-radius:12px;
     }
     .our-purpose-video__trigger.is-hidden{
         opacity:0;
         visibility:hidden;
         pointer-events:none;
     }
     .our-purpose-video__poster{
         width:100%;
         height:100%;
         object-fit:cover;
         display:block;
     }

     .our-purpose-video__trigger:hover::after{
         opacity:0.85;
     }
     .our-purpose-video__play-icon{
         position:absolute;
         top:50%;
         left:50%;
         transform:translate(-50%, -50%);
         width:72px;
         height:72px;
         border-radius:50%;
         background-color:rgba(255,255,255,0.2);
         border:2px solid #fff;
         display:flex;
         align-items:center;
         justify-content:center;
         transition:transform .3s ease, background-color .3s ease;
     }
     .our-purpose-video__play-icon::before{
         content:"";
         display:block;
         width:0;
         height:0;
         border-left:18px solid #fff;
         border-top:12px solid transparent;
         border-bottom:12px solid transparent;
         margin-left:4px;
     }
     .our-purpose-video__trigger:hover .our-purpose-video__play-icon{
         background-color:rgba(255,255,255,0.4);
         transform:translate(-50%, -50%) scale(1.06);
     }
     @media (prefers-reduced-motion: reduce){
         .our-purpose-video__trigger::after,
         .our-purpose-video__play-icon,
         .our-purpose-video__trigger:hover .our-purpose-video__play-icon{
             transition:none;
         }
     }

     .about-map-section{
         --about-map-land: rgba(243, 243, 243, 0.35);
         --about-map-borders: rgba(43, 62, 112, 0.41);
         --about-map-bg: #A8D0D9;
         --about-map-nav-bg: #2B3E70;
         --about-map-card-bg: #ffffff;
         --about-map-card-border: #e5e7eb;
         --about-map-text: #0f172a;
         --ring-blue: #00437C;
         --about-map-office: var(--accent-color);
         --about-map-manufacturing: var(--ring-blue, #00437C);
         --about-map-rd: #2563eb;
         color: var(--about-map-text);
         background-color: var( --about-map-bg);
         padding-top: 100px;
         padding-bottom:50px
     }
     .about-map-section__intro{
         font-size: 1.05rem;
         line-height: 1.6;
         max-width: 680px;
         margin-bottom: 1.5rem;
     }
     .about-map__stats{
         margin-bottom: 24px;
     }
     .about-map__stat{
         display: flex;
         align-items: center;
         gap: 18px;
         min-width: 200px;
         color: var(--dark-color);
     }
     .about-map__stat-bar{
         width: 3px;
         height: 60px;
         background: var(--accent-color);
         border-radius: 999px;
     }
     .about-map__stat-icon{
         width: 60px;
         height: 60px;

     }
     .about-map__stat-content{
         display: flex;
         align-items: center;
         gap: 12px;
     }
     .about-map__stat-number{
         font-size: 4em;
         font-weight: 600;
         line-height: 1;
         color: var(--dark-color);
     }
     .about-map__stat-label{
         display: inline-block;
         text-transform: uppercase;
         font-size: 1.2rem;
         letter-spacing: 0.1em;
         line-height: 1.2;
         color: var(--dark-color);
     }
.about-map__grid{
        background: var(--dark-color);
        border-radius: 30px;
        overflow: hidden;
    }
    .about-map__wrapper{
        position: relative;
        height: 700px;
        max-height: 700px;
        min-height: 700px;
        background: var(--about-map-bg);
        overflow: hidden;
    }
     .about-map__viewport{
         width: 100%;
         height: 100%;
         overflow: hidden;
     }
     .about-map__stage{
         position: relative;
         width: 100%;
         height: 100%;
     }
     .about-map__wrapper svg{
         display: block;
         width: 100%;
         height: 100%;
     }
     .about-map__wrapper .land{
         fill: var(--about-map-land);
         stroke: none;
     }
     .about-map__wrapper .country-highlight{
         fill: none;
         stroke: var(--about-map-borders);
         stroke-width: 1.1;
         vector-effect: non-scaling-stroke;
     }
     .about-map__wrapper .site-halo{
         fill: var(--accent-color);
         opacity: 0;
         pointer-events: none;
         transition: opacity .2s ease;
     }
     .about-map__wrapper .site-office{
         fill: var(--about-map-office);
         stroke: #ffffff;
         stroke-width: 1px;
         pointer-events: auto;
     }
     .about-map__wrapper .site-ring{
         fill: none;
         stroke: var(--about-map-manufacturing);
         pointer-events: auto;
     }
     .about-map__wrapper .site-rd{
         fill: var(--about-map-rd);
         stroke: #ffffff;
         stroke-width: 1px;
         pointer-events: auto;
     }
     @keyframes aboutMapHalo{
         0%{ opacity: .16; }
         50%{ opacity: .36; }
         100%{ opacity: .16; }
     }
     .about-map__wrapper .site-halo.active{
         animation: aboutMapHalo 1.8s ease-in-out infinite;
     }
     .about-map__wrapper .site-label{
         font-size: 10px;
         line-height: 1;
         fill: var(--about-map-text);
         opacity: .92;
         cursor: pointer;
         user-select: none;
         paint-order: stroke fill;
         stroke: #ffffff;
         stroke-width: 3px;
         stroke-opacity: .75;
     }
.about-map__legend{
        position: absolute;
        top: 12px;
        right: 70px;
        left: auto;
        z-index: 6;
        display: flex;
        gap: 14px;
        align-items: center;
        padding: 2px 10px;
        background: #fff;
        border: 1px solid var(--about-map-card-border);
        border-radius: 10px;
        box-shadow: 0 4px 16px rgba(0,0,0,.12);
        font-size: 12px;
        color: var(--about-map-text);
    }
     .about-map__legend-item{
         display: flex;
         align-items: center;
         gap: 8px;
         white-space: nowrap;
     }
     .about-map__legend-icon{
         width: 18px;
         height: 18px;
         display: grid;
         place-items: center;
     }
     .about-map__legend-dot{
         fill: var(--about-map-office);
     }
     .about-map__legend-dot--office{
         fill: var(--about-map-office);
     }
     .about-map__legend-dot--manufacturing{
         fill: none;
         stroke: var(--about-map-manufacturing);
         stroke-width: 2px;
     }
     .about-map__legend-dot--rd{
         fill: var(--about-map-rd);
     }
     .about-map__pan-controls{
         position: absolute;
         top: 12px;
         right: 68px;
         display: none;
         gap: 8px;
         z-index: 6;
     }
     .about-map__pan-btn{
         appearance: none;
         border: 1px solid var(--about-map-card-border);
         background: #fff;
         box-shadow: 0 4px 16px rgba(0,0,0,.12);
         border-radius: 999px;
         width: 42px;
         height: 42px;
         display: grid;
         place-items: center;
         font-size: 18px;
         cursor: pointer;
         transition: transform .2s ease;
     }
     .about-map__pan-btn:active{
         transform: translateY(1px);
     }
    .about-map__nav-col{
        background: transparent;
        color: inherit;
    }
     .about-map__nav-wrap{
         height: 100%;
         padding: 20px 16px;
         display: flex;
         flex-direction: column;
         gap: 16px;
     }
     .about-map__tabs{
         position: relative;
         display: grid;
         grid-template-columns: 1fr;
         align-items: center;
         font-size: 13px;
     }
     .about-map__tabs-hint{
         position: absolute;
         top: 0;
         bottom: 0;
         width: 34px;
         display: none;
         align-items: center;
         justify-content: center;
         pointer-events: none;
         color: #ffffff;
         font-size: 1em;
         line-height: 1;
         opacity: 0;
         transition: opacity .2s ease;
         background: linear-gradient(to right, rgba(43,62,112,.95), rgba(43,62,112,0));
         border: 0;
         padding: 0;
         margin: 0;
     }
     .about-map__tabs-hint svg{
         width: 1.6em;
         height: 1.6em;
         display: block;
     }
     .about-map__tabs-hint--left{
         left: -8px;
     }
     .about-map__tabs-hint--right{
         right: -8px;
         background: linear-gradient(to left, rgba(43,62,112,.95), rgba(43,62,112,0));
     }
     .about-map__nav{
         display: flex;
         flex-wrap: nowrap;
         white-space: nowrap;
         overflow-x: auto;
         gap: 0;
         scrollbar-width: thin;
         border-bottom: none;
         padding: 6px 8px;
         scrollbar-color: rgba(255, 255, 255, 0.19) #80808005;
     }
     .about-map__nav::-webkit-scrollbar{
         display: none;
     }
     .about-map__nav-item{
         flex: 0 0 auto;
     }
    .about-map__nav-link{
        font-size: 12px;
        letter-spacing: -0.6px;
        padding: 4px 8px;
        margin-right: 4px;
        color: var(--about-map-nav-link-color);
        background: transparent !important;
        border: 0 !important;
        border-radius: 0;
        position: relative;
        transition: none;
        font-weight: 900;
    }
    .about-map__nav-link::after{
        content: "";
        position: absolute;
        left: 8px;
        right: 8px;
        bottom: -2px;
        height: 2px;
        background: var(--about-map-nav-link-underline);
        transform: scaleX(0);
        transition: transform .2s ease, background-color .2s ease;
    }
    .about-map__nav-link.active{
        color: var(--about-map-nav-link-active-color);
        background: var(--about-map-nav-link-active-bg) !important;
        border-radius: 999px;
        padding-left: 12px;
        padding-right: 12px;
    }
     .about-map__nav-link.active::after{
         background: transparent;
         transform: scaleX(0);
     }
     .about-map__tab-content{
         flex: 1 1 auto;
         padding: 0 4px;
         overflow: auto;
     }
     .about-map__tab-pane{
         padding: 8px 4px;
     }
     .about-map__site-card{
         display: flex;
         justify-content: space-between;
         align-items: stretch;
         gap: 12px;
         padding: 12px 14px;
         margin-bottom: 12px;
         border-radius: 10px;
         background: var(--about-map-card-bg);
         border: 1px solid var(--about-map-card-border);
         box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
         color: var(--about-map-text);
     }
     .about-map__site-card:last-child{
         margin-bottom: 0;
     }
     .about-map__site-details{
         flex: 1 1 auto;
         display: flex;
         flex-direction: column;
         gap: 3px;
         margin-right: 8px;
     }
     .about-map__site-body{
         display: none;
         flex-direction: column;
         gap: 6px;
         margin-top: 6px;
     }
     .about-map__site-card.is-expanded .about-map__site-body{
         display: flex;
     }
     .about-map__site-heading{
         display: flex;
         align-items: center;
         justify-content: space-between;
         gap: 10px;
     }
     .about-map__site-heading-text{
         display: flex;
         align-items: center;
         gap: 6px;
         line-height: 1.1;
     }
     .about-map__site-country{
         font-weight: 600;
         font-size: 1.08rem;
         color: var(--about-map-text);
     }
     .about-map__site-city-sub{
         font-size: 0.75rem;
         color: #64748b;
     }
     .about-map__site-address{
         display: flex;
         align-items: flex-start;
         gap: 10px;
         font-size: 0.88rem;
         color: #475569;
         line-height: 1.25;
         margin-top: 10px;
     }
     .about-map__site-address-lines{
         display: flex;
         flex-direction: column;
         gap: 0;
     }
     .about-map__site-route{
         flex: 0 0 auto;
         width: 28px;
         height: 28px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border-radius: 999px;
         background: var(--dark-color);
         color: var(--accent-color);
         margin-top: 2px;
         text-decoration: none;
         transition: background-color .2s ease, color .2s ease;
     }
     .about-map__site-route svg{
         width: 16px;
         height: 16px;
         display: block;
     }
     .about-map__site-route:hover{
         background: var(--accent-color);
         color: var(--dark-color);
     }
     .about-map__site-route:focus-visible{
         outline: 2px solid var(--accent-color);
         outline-offset: 2px;
     }
     .about-map__site-address-lines span{
         display: block;
     }
     .about-map__site-picture{
         width: 100%;
         aspect-ratio: 16 / 9;
         border-radius: 8px;
         background-size: cover;
         background-position: center;
         background-repeat: no-repeat;
         box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
     }
     .about-map__badge{
         display: inline-flex;
         align-items: center;
         border-radius: 999px;
         font-size: 0.7rem;
         font-weight: 700;
         padding: 2px 8px;

     }
     .about-map__badge--office{
         background: rgba(255, 122, 0, 0.12);
         color: var(--about-map-office);
     }
     .about-map__badge--manufacturing{
         background: rgba(0, 67, 124, 0.12);
         color: var(--about-map-manufacturing);
     }
     .about-map__badge--rd{
         background: rgba(37, 99, 235, 0.12);
         color: var(--about-map-rd);
     }
     .about-map__site-tags-inline{
         display: inline-flex;
         gap: 4px;
         vertical-align: middle;
     }
     .about-map__site-contact{
         font-size: 0.78rem;
         color: #475569;
         line-height: 1.2;
         margin: 0;
         margin-left: 10px;
         display: flex;
         align-items: center;
         gap: 6px;
     }
     .about-map__site-phone{
         font-weight: 600;
         margin-top: 2px;
         display: flex;
         align-items: center;
         gap: 6px;
     }
     .about-map__site-contact svg{
         width: 16px;
         height: 16px;
         display: block;
         margin-right: 5px;
     }
     .about-map__site-email a{
         color: inherit;
         text-decoration: none;
     }
     .about-map__site-email{
         margin-top: 2px;
         display: flex;
         align-items: center;
         gap: 6px;
     }
     .about-map__site-email a:hover{
         text-decoration: underline;
     }
     .about-map__site-contact a{
         color: inherit;
         text-decoration: none;
     }
     .about-map__site-contact a:hover{
         text-decoration: underline;
     }
     .about-map__site-cta{
         flex: 0 0 auto;
         width: 36px;
         height: 36px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
         border: 1px solid rgba(43, 62, 112, 0.24);
         border-radius: 999px;
         background: transparent;
         color: var(--about-map-nav-bg);
         cursor: pointer;
         transition: background-color .2s ease, color .2s ease;
     }
     .about-map__site-cta:hover{
         background: var(--about-map-nav-bg);
         color: #fff;
     }
    .about-map__site-icon{
        width: 18px;
        height: 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
     .about-map__empty{
         color: rgba(255,255,255,0.7);
         font-size: 0.85rem;
         margin: 0;
     }
     @media (max-width: 991.98px){
         .about-map__tabs-hint{
             display: flex;
         }
         .about-map__tabs-hint{
             width: 38px;
         }
         .about-map__tabs-hint--left{
             left: -10px;
         }
         .about-map__tabs-hint--right{
             right: -10px;
         }
         .about-map__nav-link{
             font-size: 14px;
             letter-spacing: -0.4px;
             padding: 6px 10px;
         }
     }
     @media (max-width: 768px){
         .about-map__wrapper{
            height: 500px;
            max-height: 500px;
            min-height: 500px;
         }
         .about-map__pan-controls{
             display: flex;
         }
     }
     /*@media (prefers-reduced-motion: reduce){
         .about-map__pan-btn,
     }*/

     /* Grille */
     .how-we-work .how-work-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; align-items:start; }
     @media (max-width:1200px){ .how-we-work .how-work-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
     @media (max-width:992px){  .how-we-work .how-work-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
     @media (max-width:640px){  .how-we-work .how-work-grid{ grid-template-columns:1fr; } }

     .how-we-work .how-work-item{
         --i:1;
         position:relative; overflow:visible;
         will-change: transform, opacity, filter;
         backface-visibility:hidden;
         transform: translate3d(0,0,0);
         transition:
                 transform var(--dur-move) ease-in-out,
                 opacity  var(--dur-fade) ease-in-out,
                 filter   var(--dur-fade) ease-in-out;
         transition-delay: calc(var(--i, 0) * var(--stagger));
     }
     .how-we-work .how-work-card{
         will-change: transform;
         backface-visibility:hidden;
         transform: translate3d(0,0,0);
         transform-origin: center left;
         transition: transform var(--dur-move) ease-in-out;
     }

     /* État utilisé UNIQUEMENT pour mesurer la position finale (invisible pour l’utilisateur) */
     .how-we-work .how-work-grid.pre-open{
         grid-template-columns: var(--left-col-w) 1fr;
         column-gap: var(--panel-gap);
     }

     /* État ouvert (après anim) */
     .how-we-work .how-work-grid.has-open{
         grid-template-columns: var(--left-col-w) 1fr;
         column-gap: var(--panel-gap);
     }
     @media (max-width:640px){
         .how-we-work .how-work-grid.has-open{ grid-template-columns:1fr; column-gap:24px; }
     }

     /* Séquence des autres cartes : on déclenche les transforms UNIQUEMENT quand .go est présent */
     .how-we-work .how-work-grid.animating .how-work-item:not(.active){ transition-timing-function: ease-in; }
     .how-we-work .how-work-grid.animating.go .how-work-item:not(.active).slide-left{
         --depart-amp: 0;
         transform: translate3d(calc(-1 * var(--depart-amp)),0,0) !important;
         opacity: 0; filter: blur(2px) saturate(.95);
     }
     .how-we-work .how-work-grid.animating.go .how-work-item:not(.active).slide-right{
         transform: translate3d(var(--depart-amp),0,0) !important;
         opacity: 0; filter: blur(2px) saturate(.95);
     }

     /* Carte active : pas de transform forcé par le CSS (FLIP gère le déplacement) */
     .how-we-work .how-work-grid.animating .how-work-item.active .how-work-card{
         transform: translate3d(0,0,0);
     }
     .how-we-work .how-work-grid.has-open .how-work-item.active{
         display:block; grid-column:1 / 2; grid-row:1 / 2;
     }
     .how-we-work .how-work-grid.has-open .how-work-item.active .how-work-card{
         transform: translate3d(0,0,0);
     }

     /* On cache les autres cartes seulement après l’anim */
     .how-we-work .how-work-grid.has-open:not(.animating) .how-work-item:not(.active){ display:none; }

     /* Panneau (arrive après l’anim, en douceur) */
     .how-we-work .detail-area{
         display:none; opacity:0;
         transform: translate3d(var(--panel-enter-x),0,0);
         transition:
                 opacity  var(--panel-enter-dur) ease-in,
                 transform var(--panel-enter-dur) ease-in;
         will-change: opacity, transform; backface-visibility:hidden;
     }
     .how-we-work .how-work-grid.animating .detail-area{ display:block; } /* occupe déjà la place pour éviter les sauts */
     .how-we-work .how-work-grid.has-open:not(.animating) .detail-area{
         display:block;
         grid-column:2 / -1; grid-row:1 / 2;
         align-self:start;
         background:#fff; color:#111; border-radius:12px;
         box-shadow:0 10px 30px rgba(0,0,0,.12);
         border:1px solid var(--divider-color);
         padding:24px;
         opacity:1; transform: translate3d(0,0,0);
     }
     @media (max-width:640px){
         .how-we-work .how-work-grid.has-open:not(.animating) .detail-area{
             grid-column:1 / -1; grid-row:auto; margin-top:8px; align-self:stretch;
         }
     }

     .how-we-work .detail-area .da-close{
         position:sticky; top:0; float:right; border:0; background:transparent;
         font-size:26px; line-height:1; cursor:pointer; padding:4px 6px; margin:-4px -6px 6px 6px;
     }
     .how-we-work .detail-area {overflow: hidden;}
     .how-we-work .detail-area .detail-body {

         padding-right: 20px; padding-left: 20px;
     }
     .how-we-work .detail-area h4{ margin:0 0 .5rem; font-size:22px; }
     .how-we-work .detail-area p{ margin:0 0 1rem; font-size:16px; line-height:1.6; }
     .how-we-work .detail-area .da-actions{ display:flex; gap:10px; flex-wrap:wrap; }
     .how-we-work .detail-area .testimonial-content {
         width: 100%;
         min-height: 100px;
         background-size: 100px auto;
         display: flex;
         align-items: center;
         color: var(--dark-color);
         font-size: clamp(2rem, 3vw, 3rem);
         font-weight: 400;
         letter-spacing: 1px;
         margin-top: 10px;
         font-family: var(--hand-font);
         padding-left: 30px;
         line-height: 2.3rem;
     }
     .how-we-work .detail-area ul {
         margin: 0;
         padding: 0;
         list-style: none;
     }
.client-testimonial-content {
    margin-left: 25px;
}
     .how-we-work .detail-area ul li::before {
         content: '\f00c';
         font-family: 'FontAwesome';
         position: absolute;
         top: 0;
         left: 0;
         font-size: 20px;

         /* 50% / 50% split net */
         background-image: linear-gradient(
                 to right,
                 var(--dark-color) 70%,
                 var(--accent-color) 30%
         );
         -webkit-background-clip: text;
         background-clip: text;
         -webkit-text-fill-color: transparent;
     }

.how-we-work .detail-area ul{
    padding-left: 30px;
}
     .how-we-work .detail-area ul li {
         position: relative;
         font-size: clamp(0.5rem, 5vw, 1rem);
         font-weight: 400;
         padding-left: 30px;
         margin-bottom: 10px;
         color: var(--dark-color);
     }
     .how-we-work .detail-area .title-detail-template {
         font-size: clamp(2.5rem, 4vw, 3.5rem);
         font-weight: 600;
         color: var(--dark-color);
         padding-bottom: 25px;
         margin-top: 43px;
     }
     .how-we-work .detail-area .title-detail-template span {
         color: var(--accent-color);
     }

     .how-we-work .detail-area .sub-title-detail-template {
         font-size: clamp(1rem, 2vw, 1.3rem);
         font-weight: 200;
         font-style: italic;
         margin-bottom: 20px;
         line-height: 40px;
         color: var(--dark-color);
         line-height: 1.1em;
     }


     @media (prefers-reduced-motion: reduce){
         .how-we-work .how-work-item, .how-we-work .how-work-card, .how-we-work .detail-area{ transition:none !important; }
     }

     .how-we-work .how-work-item.active .media-img {
         transform: scale(1.05);
         opacity: 0;
     }

     .how-we-work .how-work-item.active .media-video {
         opacity: 1;
     }


     /* Panneau caché pendant l'animation */
     .how-we-work .how-work-grid.animating .detail-area {
         visibility: hidden;
         pointer-events: none;
     }

     /* Une fois ouvert, le panneau devient visible et fade in */
     .how-we-work .how-work-grid.has-open:not(.animating) .detail-area {
         visibility: visible;
         pointer-events: auto;
         opacity: 1;
         transform: translate3d(0,0,0);
         transition: opacity 700ms ease, transform 500ms ease-in;
     }

     /* Fade + slide up sans WOW */
     @keyframes fadeUp {
         from { opacity: 0; transform: translate3d(0,14px,0); }
         to   { opacity: 1; transform: translate3d(0,0,0); }
     }

     /* Les enfants du panneau s’animent individuellement avec un délai variable */
     .detail-body > .anim-fadeUp{
         --delay:0;
         opacity: 0;                  /* état initial */
         animation-name: fadeUp;
         animation-duration: 480ms;   /* ajuste si besoin */
         animation-timing-function: ease-out;
         animation-fill-mode: both;   /* conserve l’état final */
         animation-delay: var(--delay, 0s); /* défini en JS */
     }

     /* Accessibilité : désactive si l’utilisateur préfère moins d’animations */
     @media (prefers-reduced-motion: reduce){
         .detail-body > .anim-fadeUp{
             animation: none !important;
             opacity: 1 !important;
             transform: none !important;
         }
     }

     /* Overlay titre */
     .media-hover .media-title {
         position: absolute;
         bottom: 20px;               /* position en bas (tu peux mettre top:20px si tu veux en haut) */
         left: 10%;                  /* marge à gauche = 1/10 */
         width: 90%;                 /* prend tout l’espace restant */
         background-color: #B75074;
         color: #fff;
         padding: 10px 10px;
        font-size: clamp(0.1rem, 2.5vw, 1.3rem) !important;
         font-weight: 700;
         text-align: left;
         border-radius: 4px 0 0 4px; /* option : petit arrondi à gauche */
         z-index: 2;
     }
     .media-hover .media-title .media-sup-title {
         font-size: 0.90rem;      /* un peu plus petit */
         font-weight: 400;
         text-transform: none;    /* garde la casse normale */
         margin-top: 2px;         /* réduit l’espace au-dessus */
         line-height: 1.2;        /* interligne plus serré */
         opacity: 0.9;
     }

     .media-hover .media-title {
         min-height: 130px;   /* adapte la valeur */
         display: flex;
         flex-direction: column;

     }

.post-btn a {
        background-image: linear-gradient(to right, var(--dark-color) 0%, var(--dark-color) 50%, var(--dark-color) 100%);
    }
    .tp-blog-meta {
        border: 1px solid var(--accent-color);
        border-radius: 100px;
        display: inline-block;
        padding: 1px 12px;
    }
    .tp-blog-meta span {
        color: var(--dark-color);
    }
    .tp-blog-meta span.borders {
        width: 8px;
        height: 8px;
        background: var(--accent-color);
        display: inline-block;
        border-radius: 20px;
        margin: 0 10px;
        transform: translateY(-2px);
    }
    .

    .fluid-text-sm {
        font-size: clamp(10px, 1.5vw, 14px);
    }

    .fluid-text-md {
        font-size: clamp(12px, 1.5vw, 16px);
        color: var(--text-color);
        line-height: 1.4em;
    }

    .fluid-text-lg {
        font-size: clamp(20px, 3vw, 40px);
    }
    .post-item a {
        color: var(--text-color);
        line-height: normal;
    }

.page-hero {
    position: relative;
    margin-top: var(--header-h, 80px);
}
.page-hero-media figure {
    margin: 0;
}
.page-hero-media img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
}
.page-hero-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 2rem 1rem;
    pointer-events: none;
}
.page-hero-text {
    pointer-events: auto;
}
.page-hero-title {
    font-size: clamp(2rem, 4vw, 3.5rem);
    margin-bottom: 1rem;
}
.page-hero-description {
    font-size: clamp(1rem, 2vw, 1.25rem);
    margin: 0 auto;
    max-width: 45rem;
}

.page-hero.has-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(4, 42, 45, 0) 65.37%, #041a2d 100.18%), linear-gradient(270deg, rgba(4, 42, 45, 0) 25%, #04172d 100%);
    opacity: var(--hero-opacity, 1);
    z-index: 1;
}
.page-hero.has-overlay .page-hero-content {
    z-index: 2;
}


    @media only screen and (min-width: 1500px) {
        .container,
        .container-fluid {
            max-width: 1500px;
            margin-left: auto;
            margin-right: auto;
        }
    }

    @media only screen and (min-width: 992px) {
        header.main-header .navbar .nav-link {
            font-size: clamp(0.8rem, 1.2vw, 1rem);
        }
    }

    @media only screen and (max-width: 991px) {
        .main-header .container-fluid::before {
            bottom: 0;
        }
    }

    @media only screen and (max-width: 991px) {
        .main-header .container-fluid {
            position: relative;
        }
        .main-header .container-fluid::before {
            bottom: 0;
            top: auto;
        }
    }

    @media only screen and (max-width: 991px) {
        .main-header .container-fluid::before {
            border-bottom: none;
        }
        .main-header .navbar.navbar-expand-lg {
            border-bottom: 1px solid var(--accent-color);
        }
    }

    @media only screen and (min-width: 1500px) {
        .section-title h2 {
            font-size: 3.5rem;
        }
    }

.keynumber .keynumber-number span {
    display: inline-block;
    margin-left: 0.1rem;
}


.keynumber-icon {
    margin-bottom: 0.8rem;
}
.keynumber-icon img {
    max-width: 80px;
    height: auto;
}
.blink2 {
    display: inline-block;
    font-size: 5em;
    color: inherit;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    animation: blink-color 0.2s infinite;
    animation-duration: 0.4s;
    animation-iteration-count: 2; /* 4 × 0.5s = 2 secondes */
    animation-play-state: paused;
    animation-fill-mode: both;
}

.blink.blink--visible {
    visibility: visible;
    opacity: 1;
}

.blink.blink--active {
    animation-play-state: running;
}

@keyframes blink-color {
    0%, 49% { color: white; }
    50%, 100% { color: var(--accent-color); }
}
.keynumber-icon {
    margin-bottom: 0.75rem;
}
.keynumber-icon img {
    max-width: 80px;
    height: auto;
}


.home-news  {
    padding: 50px 0;
}


.team-image img {

    aspect-ratio: 1 / 1.2;
    height: auto;
    object-position: top;

}


.team-content .h3 {
    font-size: clamp(15px, 1.4vw, 22px);
    text-transform: capitalize;
    margin-bottom: 0px;
    font-weight: 600;
}

.team-content p {
    text-transform: capitalize;
    margin: 0;
    font-size: clamp(12px, 1.1vw, 18px);
}

.timeline-section {
    padding: 20px 0;
    background-color: white;
}

.timeline-carousel__item-inner p {
    font-size: clamp(15px, 1.1vw, 18px);
    line-height: 1.6;
    margin-top: 10px;
    margin-bottom: 15px;
    color: var(--dark-color);
    width: 90%;
    margin-left: 2px;
}


timeline-carousel__item-inner p {
    font-size: clamp(12px, 1.1vw, 14px);
    font-weight: 100;
}

.timeline-entry-title {
    font-weight: 100;
}

.timeline-carousel__item-inner .year {
    font-size: 42px;}
     .about-map__zoom-controls{
         position: absolute;
         top: 12px;
         right: 12px;
         display: flex;
         flex-direction: column;
         gap: 6px;
         z-index: 6;
     }
     .about-map__zoom-btn{
         width: 38px;
         height: 38px;
         border: 1px solid var(--about-map-card-border);
         border-radius: 999px;
         background: rgba(255,255,255,0.95);
         color: var(--about-map-nav-bg);
         font-size: 20px;
         line-height: 1;
         display: flex;
         align-items: center;
         justify-content: center;
         cursor: pointer;
         transition: background-color .2s ease, color .2s ease, transform .2s ease;
     }
     .about-map__zoom-btn--reset svg{
         width: 18px;
         height: 18px;
         display: block;
     }
     .about-map__zoom-btn:hover{
         background: var(--about-map-nav-bg);
         color: #fff;
     }
     .about-map__zoom-btn:active{
         transform: translateY(1px);
     }
  .careers-tabs{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.careers-tabs__nav{
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
 .careers-tabs__nav-btn{

    padding: 8px 16px;
    border-radius: 999px;
    background: transparent;
    color: var(--dark-color);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.careers-tabs__nav-btn.is-active,
.careers-tabs__nav-btn:hover{
    background: var(--dark-color);
    color: #fff;
}
. .careers-tabs__panels{
    position: relative;
}
.careers-tabs__panel{
    display: none;
}
.careers-tabs__panel.is-active{
    display: block;
}
.careers-tabs__media .careers-video__placeholder,
.careers-tabs__media .ratio{
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.careers-video__placeholder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.careers-video__player{
    display: none;
}
.careers-video__player.is-active{
    display: block;
}
.careers-tabs__subtitle{
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 12px;
}
.careers-tabs__description p{
    margin-bottom: 1rem;
}
.careers-video__play-icon{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.8rem;
    line-height: 1;
}

.careers-video__play-icon::before{
    content: "▶";
}

.careers-video__poster{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
@media (max-width: 768px){
     .careers-tabs__nav{
        gap: 8px;
    }
     .careers-tabs__nav-btn{
        flex: 1 1 auto;
        text-align: center;
    }
}
 .careers-tabs__content{
    display:flex;flex-direction:column;gap:12px;}
.careers-video__trigger{
    position: relative;
}
.careers-video__trigger .careers-video__play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


.careers-video__player{
    display: none;
}
.careers-video__player.is-active{
    display: block;
}

.careers-video__trigger.is-hidden{
    display: none;
}
.careers-tabs{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.careers-tabs__nav{
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.careers-tabs__nav-btn{
    padding: 0.1em 1.25rem;
    margin-bottom: 0.4em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.85rem;
    font-weight: 900;
}
.careers-tabs__nav-btn.active,
.careers-tabs__nav-btn.is-active,
.careers-tabs__nav-btn:hover{
    background: var(--dark-color);
    color: #fff;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: var(--accent-color);
    background-color: transparent;
    border-bottom: solid 2px ;
    border-bottom-color:var(--accent-color) !important; ;
    border-radius:0px;
}
.careers-scrollspy{
    position: relative;
}
.careers-entry{
    scroll-margin-top: 140px;
}
.careers-tabs__content{
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.careers-tabs__subtitle{
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent-color);
    font-weight: 600;
    margin-bottom: 0.5rem;
}
.careers-tabs__description p{
    margin-bottom: 1rem;
}
.careers-video__fallback{
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.our-purpose-video__trigger{
    position: relative;
}
.our-purpose-video__play-icon{
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
}
.our-purpose-video__play-icon::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 3px;
}
.our-purpose-video__play-icon.is-hidden{
    display: none;
}
.our-purpose-video__player{
    display: none;
}
.our-purpose-video__player.is-active{
    display: block;
}
.our-purpose-video__trigger.is-hidden{
    display: none;
}
@media (max-width: 768px){
    .careers-tabs__nav-btn{
        flex: 1 1 auto;
        text-align: center;
    }
}
.careers-tabs__nav-wrapper{
    position: sticky;
    top: calc(var(--header-h, 80px) + 0px);
    z-index: 1020;
    background: transparent;
    padding: 0.75rem 0;
    display: flex;
    justify-content: center;
    transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.careers-tabs__nav-wrapper.is-sticky{
    background: var(--dark-color);
    box-shadow: 0 12px 30px rgba(0,0,0,0.18);
}
.careers-tabs__nav-wrapper.is-sticky .careers-tabs__nav-btn{
    border-color: rgba(255,255,255,0.7);
    color: #fff;
}
.careers-tabs__nav-wrapper.is-sticky .careers-tabs__nav-btn.active,
.careers-tabs__nav-wrapper.is-sticky .careers-tabs__nav-btn.is-active,
.careers-tabs__nav-wrapper.is-sticky .careers-tabs__nav-btn:hover{

    color: var(--accent-color);
}
.careers-entry{
    scroll-margin-top: calc(var(--header-h, 80px) + 120px);
}
.our-purpose-video{
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.our-purpose-video__trigger{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    width: 100%;
    height: 100%;
    cursor: pointer;
}
.our-purpose-video__poster{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.our-purpose-video__play-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    line-height: 1;
    z-index: 2;
}
.our-purpose-video__play-icon::before{
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-left: 16px solid #fff;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    margin-left: 3px;
}
.our-purpose-video__play-icon.is-hidden{
    display: none;
}
.our-purpose-video__player{
    display: none;
}
.our-purpose-video__player.is-active{
    display: block;
}
.our-purpose-video__trigger.is-hidden{
    display: none;
}
@media (max-width: 768px){
    .careers-tabs__nav-wrapper{
        top: calc(var(--header-h, 72px) + 0px);
    }
    .careers-tabs__nav-btn{
        flex: 1 1 auto;
        text-align: center;
    }
}


.careers-intro {
    overflow: visible;
    padding-top: 200px;
    padding-bottom: 20px;
}

.intro-video {
    position: relative;
    padding: 300px 0 50px;
    background: url(../images/meet.jpeg);
    background-position: center center;
    background-size: cover;
    overflow: hidden;
}


.careers-tabs__nav-wrapper--floating {
    margin-top: -135px;
    margin-bottom: 40px;
    background: transparent;
    box-shadow: none;
    border-radius: 20px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;

    padding: 0.5rem 1rem;
}

.linkedin-play-button {
    display: flex
;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
}
.linkedin-play-button a {
    background-color: var(--accent-color);
    background-size: 200% auto;
    border-radius: 50%;
    height: 60px;
    width: 60px;
    display: flex;
    color: white;
    font-size: 2em;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    cursor: none;
    transition: all 0.3s
    ease-in-out;
}


.small-brand-large-card {
    flex-direction: column;
    padding: 1.5em;
    border-radius: 30px;
}


.small-brand-large-card__image {
    width:100% !important;
}
.small-brand-large-card__title {
    margin-top: 20px;
    margin-bottom: 10px;
}


.blog-item {
    display: flex;
    align-items: normal;
    border-bottom: 1px solid var(--divider-color);
    padding-bottom: 40px;
    margin-bottom: 40px;
}

.about-us-img-1 img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.about-us-images {
    position: relative;
    padding: 0 10px 0px 0px;
}




.featured-brand.blog-item:hover .blog-featured-image img{
    transform: unset !important;
}


.career-card {
    flex: 1 1 300px;
    margin: 60px 20px 20px;
    background: #fff;
    border-radius: 25px;
    max-width: 320px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 100px 0 20px;
    box-shadow: 0px 10px 15px -3px rgba(0, 0, 0, 0.1), inset 0px 11px 0px -3px var(--dark-color);
    transition: transform 300ms ease;
}

.career-card:hover {
    transform: scale(1.05);
}

.career-card__colorband {
    height: 1px;
    background-image: linear-gradient(to right, var(--accent-color) 0%,var(--accent-color) 100%);
}

.career-card__avatar {
    padding:30px;
    position: absolute;
    top: -60px;
    left: 50%;
    width: 150px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.career-card__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.career-card__header {
    padding: 1rem;
    text-align: center;
}

.career-card__header {
    font-size: clamp(0.5rem, 5vw, 1.2rem);
    font-weight: 900;
    min-height: 85px;
}


.career-card__body {
    flex: 1;
    font-size: 0.9rem;
    padding:20px;
}