/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/
:root {
    --acsend-screen-h: clamp(720px, 100svh, 1080px);
    --acsend-vh: calc(var(--acsend-screen-h) / 100);
}
#header{
    position: fixed;
    top:0;
    right: 0;
    z-index: 999;
    transform: translateY(0);
    transition: transform 600ms ease, box-shadow 600ms ease;
    will-change: transform;
}

/* caché = on le remonte */
#header.hidden-header{
  transform: translateY(-110%);
}

/* visible + ombre quand sticky */
#header.active-header{
  box-shadow: 0px 5px 10px rgba(0,0,0,.2);
}
/* riviere sticky */
#riviere-pinned {
    position: relative;
    display: grid;
    min-height: var(--acsend-screen-h)!important;
}

.riviere-pinned--background,
.riviere-pinned--content {
    grid-area: 1 / 1;
}

.riviere-pinned--background {
    position: sticky;
    top: 0;
    width: 100%;
    height: var(--acsend-screen-h);
    align-self: start;

    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.riviere-pinned--left-bg,
.riviere-pinned--right-bg {
    position: absolute;
    top: 0;
    height: 100%;
    width: 60%;
}
@media screen and (min-width: 2000px){
    .riviere-pinned--left-bg,
    .riviere-pinned--right-bg{
        width: 40%;
    }
}

.riviere-pinned--left-bg {
    left: 0;
}

.riviere-pinned--right-bg {
    right: 0;
}

.riviere-pinned--content {
    position: relative;
    z-index: 1;
}

/* liste service page single service*/
.service-card-list-single{
    grid-column: 1;
    grid-row: 1;

    /*width: 100%;*/

    max-width: 420px;

    aspect-ratio: 420 / 560;

    position: relative;

    transform-origin: center center;
    box-shadow:
        0 3px 3px rgba(0, 0, 0, 0.05),
        0 10px 20px rgba(0, 0, 0, 0.09);
}
@media screen and (max-width: 767px){
    .service-card-list-single{
        max-height: 70vh;
    }
}
.services-list__item{
    font-family:var(--e-global-typography-accent-font-family);
    font-weight: 600;
    font-size:32px;
    line-height: 1.1em;
    color:var(--e-global-color-primary);
    transition: all 300ms ease;
}
.services-list__item:hover{
    color:var(--e-global-color-primary);
    text-decoration: underline;
}
/*encadré titre graphique*/
.graphic-title-frame {
    --frame-color: var(--e-global-color-primary);
    --frame-stroke: 1px;
    --frame-gap: 10px;
    --frame-notch: 5px;

    position: relative;
    padding: 20px 60px;
}

/* SVG injecté par le JS */
.graphic-title-frame__svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
    z-index: 0;
}

.graphic-title-frame__svg path,
.graphic-title-frame__svg rect {
    fill: none;
    stroke: var(--frame-color);
    stroke-width: var(--frame-stroke);
    vector-effect: non-scaling-stroke;
}

/* Contenu Elementor devant le cadre */
.graphic-title-frame > .elementor-widget-container {
    position: relative;
    z-index: 1;
}

.graphic-title-frame .elementor-heading-title {
    margin: 0;
    text-align: center;
}


/* MOBILE */
@media (max-width: 767px) {

    .graphic-title-frame {
        --frame-gap: 11px;
        padding: 24px 32px;
    }

}

/* IMPORTANT : éviter le "saut" de la page (le header fixed sort du flow) */
@media screen and (max-width: 767px){
    main{
      padding-top: var(--header-h, 153px);
    }
}
@media screen and (min-width: 768px) and (max-width: 1024px){
    main{
        padding-top: var(--header-h, 126px);
    }
}
main{
  padding-top: var(--header-h, 145px);
}

/* accordeon equipement */
.equipement-accordeon-content.elementor-widget-text-editor h3{
    font-size:1em;
    font-weight: 600;
    margin-bottom:15px;
}
.equipement-accordeon-content.elementor-widget-text-editor h3:not(:first-child){
    margin-top:40px;

}
/* cas-client-content*/
.cas-client-encart.elementor-widget-text-editor h3{
    font-family: var(--e-global-typography-text-font-family);
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom:30px;
}
.cas-client-content.elementor-widget-text-editor h4{
    font-family: var(--e-global-typography-accent-font-family);
    font-size: 1.2em;
    font-weight: 600;
}
.btn-blue a{
    padding:8px 20px;
    background:var(--e-global-color-accent);
    border-radius:999px;
    font-family:var(--e-global-typography-accent-font-family);
    font-size:14px;
    font-weight: bold;
    color:#ffffff;
}
.btn-blue a:hover{
    background:#246EB1;
    transform:translateY(-2px);
    transition: all 0.2s ease;
}

.graphic-title .elementor-heading-title{
    width: max-content;
    max-width: none;
    margin: auto;

    /* Taille maximale désirée */
    font-size: 130px;

    line-height: 0.9em;
}

/* =========================================================
   =========================================================
   Cadre service
   =========================================================
   ========================================================= */
.services-frame {
    --services-color: #155a53;
    --services-inner-gap: 7px;
    --services-corner-position: 6px;

    position: relative;
    isolation: isolate;

    max-width: min(1210px, calc(100% - 40px));
    margin-inline: auto;
    padding: 30px 20px;

    box-sizing: border-box;

    background: transparent;
    border: 1px solid var(--services-color);
}
.services-frame.besoins{
    width: fit-content;
}

/* =========================================================
   CADRE INTÉRIEUR SVG
   ========================================================= */

.services-inner-frame {
    position: absolute;
    z-index: 1;
    inset: 0;

    display: block;

    width: 100%;
    height: 100%;

    overflow: visible;
    pointer-events: none;
}

.services-inner-frame path {
    fill: none;
    stroke: var(--services-color);
    stroke-width: 1;

    stroke-linecap: square;
    stroke-linejoin: miter;

    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
}
.niveau-atteint__titre{
    min-height:70px;
}

/* =========================================================
   GRILLE
   ========================================================= */

.services-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));

    min-height: 190px;
}
.services-frame:has(.services-grid.grid-2) {
    max-width:767px!important;
}
.services-grid.niveau-atteint {
    display:flex;
    flex-direction: row;
}
@media screen and (max-width: 1024px){
    .services-grid{
        grid-template-columns: 1fr!important;
    }
    
}

/* =========================================================
   Scroll hzt
   ========================================================= */
   .scroll-hzt {
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .scroll-hzt::-webkit-scrollbar {
        display: none;
    }

    .scroll-hzt .services-frame {
        width: max-content;
        min-width: 100%;
    }

    .scroll-hzt .services-grid {
        width: max-content;
    }

    .scroll-hzt .service-card {
        min-width: 280px;
    }

/* =========================================================
   =========================================================
   CARTES
   =========================================================
   ========================================================= */

.service-card {
    position: relative;
    --after-y: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;

    min-width: 0;
    min-height: 190px;

    padding: 20px 28px 8px;

    text-align: center;
}
.section-services .service-card {
    justify-content: space-between;
}
.niveau-atteint .service-card {
    max-width: 320px;

}
.deck-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.deck-card-image {
    max-height: 50%;
    display: flex;
    justify-content: center;
}
.deck-card-image img {
    display: block;
    width: 90%;
    height: auto;
    object-fit: contain;
}
.deck-card-title{
    font-family:var(--e-global-typography-primary-font-family);
    color:var(--e-global-color-primary);
    font-size: 40px;
    line-height: 1em;
    font-weight: 400;
    text-align: center;
    padding:0 40px;
    margin-top:-15px;
    margin-bottom:15px;
}
.deck-card-title a, .deck-card-title a:hover{
    color:var(--e-global-color-primary);
}
.cards-deck h2 {
    text-align: center;
    font-family:var(--e-global-typography-text-font-family);
    font-size:35px;
    font-weight: 500;
    color:var(--e-global-color-secondary);
}
@media screen and (max-width: 1024px){
    .deck-card-title{
        font-size:28px;
        line-height: 1em;
    }
}
@media screen and (max-width: 768px){
    .deck-card-title{
        font-size:25px;
    }
}
/* =========================================================
   VARIABLES GÉNÉRALES
   ========================================================= */

.cards-deck {
    --deck-transition:
        650ms cubic-bezier(.22, 1, .36, 1);

    --deck-active-shadow:
        0 24px 45px rgba(0, 0, 0, .14);

    position: relative;
    isolation: isolate;
}


/* =========================================================
   SPRITE SVG
   ========================================================= */

.svg-sprite {
    position: absolute;

    width: 0;
    height: 0;

    overflow: hidden;
    pointer-events: none;
}


/* =========================================================
   STAGE DESKTOP
   ========================================================= */

.cards-stage {
    z-index:2;
    position: relative;
    /*padding:0 150px;*/
    display: grid;
    grid-template-columns: 1fr;
    place-items: end center;
    justify-content: center;
    align-items: center;
    width: min(1180px, 100%);
    margin-inline: auto;
    padding-block: 85px 50px;

    overflow: visible;

    perspective: 1400px;
}


/* =========================================================
   CARTES — BASE DESKTOP
   ========================================================= */

.deck-card {
    --desktop-x: 0%;
    --desktop-y: 0px;
    --desktop-rotation: 0deg;
    --desktop-scale: 1;

    --deal-delay: 0ms;

    position: relative;
    grid-area: 1 / 1;

    align-self: end;
    justify-self: center;

    width: min(31%, 360px);

    opacity: 1;

    transform:
        translateX(var(--desktop-x))
        translateY(var(--desktop-y))
        rotate(var(--desktop-rotation))
        scale(var(--desktop-scale));

    transform-origin: 50% 100%;

    transition:all 400ms ease;

    will-change: transform, opacity;
}


/* =========================================================
   POSITIONS DESKTOP DYNAMIQUES
   ========================================================= */

.deck-card.is-left {
    --desktop-x: -92%;
    --desktop-y: 20px;
    --desktop-rotation: -6deg;
    --desktop-scale: 1;

    --deal-delay: 0ms;

    z-index: 2;
}

.deck-card.is-center {
    --desktop-x: 0%;
    --desktop-y: -4px;
    --desktop-rotation: 0deg;
    --desktop-scale: 1;

    --deal-delay: 100ms;

    z-index: 3;
}

.deck-card.is-right {
    --desktop-x: 92%;
    --desktop-y: 20px;
    --desktop-rotation: 6deg;
    --desktop-scale: 1;

    --deal-delay: 200ms;

    z-index: 2;
}


/* =========================================================
   HOVER DESKTOP
   ========================================================= */

.cards-deck.has-dealt
.deck-card.is-hovered {
    z-index: 15;

    transform:
        translateX(var(--desktop-x))
        translateY(calc(var(--desktop-y) - 34px))
        rotate(0deg)
        scale(1.045);

    opacity: 1;
    filter: none;

    box-shadow: var(--deck-active-shadow);
}

.cards-deck.has-dealt.is-hovering
.deck-card:not(.is-hovered) {
    opacity: .72;

    filter:
        saturate(.75)
        brightness(.93);

    transform:
        translateX(var(--desktop-x))
        translateY(calc(var(--desktop-y) + 8px))
        rotate(var(--desktop-rotation))
        scale(.97);
}


/* =========================================================
   APPARITION INITIALE
   ========================================================= */

.cards-deck.is-js:not(.is-visible)
.deck-card {
    opacity: 0;
}

.cards-deck.is-visible:not(.has-dealt)
.deck-card {
    animation:
        deck-deal-desktop
        800ms
        cubic-bezier(.22, 1, .36, 1)
        var(--deal-delay)
        both;
}

@keyframes deck-deal-desktop {
    from {
        opacity: 0;

        transform:
            translateX(0%)
            translateY(85px)
            rotate(0deg)
            scale(.84);
    }

    to {
        opacity: 1;

        transform:
            translateX(var(--desktop-x))
            translateY(var(--desktop-y))
            rotate(var(--desktop-rotation))
            scale(var(--desktop-scale));
    }
}


/* =========================================================
   NAVIGATION
   ========================================================= */

.deck-navigation {
    position: absolute;
    align-self: center;
    width: 100%;
    z-index: 0;
    justify-self: center;
    display: flex;
    width:calc(min(1180px, 100%) + 100px);
    align-items: center;
    justify-content: space-between;
    top:50%;
    gap: 30px;
}
@media screen and (max-width:767px){
    .deck-navigation {
        position: relative;
        justify-content: center;
    }
}


/* =========================================================
   FLÈCHES
   ========================================================= */

.deck-navigation .deck-arrow,
.deck-navigation .deck-prev,
.deck-navigation .deck-next {
    position: relative;
    z-index: 30;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 108px;
    min-height: 44px;
    padding: 12px 14px;

    color: var(
        --e-global-color-primary,
        currentColor
    );

    background: transparent;
    border: 0;
    border-radius: 0;

    cursor: pointer;
    user-select: none;
    touch-action: manipulation;

    appearance: none;
    -webkit-appearance: none;

    transition:
        transform 250ms ease,
        opacity 250ms ease;
}

.deck-navigation .deck-arrow svg,
.deck-navigation .deck-prev svg,
.deck-navigation .deck-next svg {
    display: block;

    width: 77px;
    height: auto;

    overflow: visible;

    fill: currentColor;

    pointer-events: none;
}


/* Le SVG d'origine pointe vers la gauche */

.deck-navigation .deck-next svg {
    transform: rotate(180deg);
}

.deck-navigation .deck-arrow:hover,
.deck-navigation .deck-prev:hover,
.deck-navigation .deck-next:hover {
    transform: scaleX(1.08);
}

.deck-navigation .deck-arrow:active,
.deck-navigation .deck-prev:active,
.deck-navigation .deck-next:active {
    transform: scaleX(.96);
}

.deck-navigation .deck-arrow:focus-visible,
.deck-navigation .deck-prev:focus-visible,
.deck-navigation .deck-next:focus-visible,
.cards-stage:focus-visible {
    outline: 0px solid transparent;
    outline-offset: 0px;
}
.deck-navigation .deck-arrow:focus,
.deck-navigation .deck-prev:focus,
.deck-navigation .deck-next:focus {
    background: transparent;
}
.deck-navigation .deck-arrow:hover{
    background: transparent;
}

/* =========================================================
   BLOCAGE PENDANT LE ROULEMENT
   ========================================================= */

.cards-deck.is-switching
.deck-card {
    pointer-events: none;
}

.cards-deck.is-switching
.deck-navigation .deck-arrow,
.cards-deck.is-switching
.deck-navigation .deck-prev,
.cards-deck.is-switching
.deck-navigation .deck-next {
    pointer-events: none;
    opacity: .65;
}
@media screen and (max-width:1660px){
    .deck-navigation{
        position:relative;
        justify-content: center;
    }
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media screen and (min-width: 768px)
and (max-width: 1024px) {

    .cards-stage {
        width: min(940px, 100%);
        padding-block: 70px 45px;
    }

    .deck-card {
        width: min(32%, 325px);
    }

    .deck-card.is-left {
        --desktop-x: -88%;
        --desktop-y: 16px;
        --desktop-rotation: -5deg;
    }

    .deck-card.is-center {
        --desktop-y: -3px;
    }

    .deck-card.is-right {
        --desktop-x: 88%;
        --desktop-y: 16px;
        --desktop-rotation: 5deg;
    }

    .cards-deck.has-dealt
    .deck-card.is-hovered {
        transform:
            translateX(var(--desktop-x))
            translateY(calc(var(--desktop-y) - 27px))
            rotate(0deg)
            scale(1.035);
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 767px) {

    .cards-deck {
        --deck-transition:
            600ms cubic-bezier(.22, 1, .36, 1);
    }


    /* -----------------------------------------------------
       STAGE MOBILE
       ----------------------------------------------------- */

    .cards-stage {
        position: relative;

        display: block;

        width: 100%;
        height: var(--deck-height, 500px);

        margin-inline: auto;
        padding: 35px 0 60px;

        overflow: hidden;

        perspective: none;
        touch-action: pan-y;

        cursor: grab;
    }

    .cards-stage.is-dragging {
        cursor: grabbing;
    }


    /* -----------------------------------------------------
       BASE DES CARTES MOBILE
       ----------------------------------------------------- */

    .deck-card {
        --mobile-x: -50%;
        --mobile-y: 0px;
        --mobile-rotation: 0deg;
        --mobile-scale: 1;

        --mobile-opacity: 1;
        --mobile-filter: none;

        --drag-x: 0px;
        --drag-rotation: 0deg;

        position: absolute;
        top: 35px;
        left: 50%;

        display: flex;

        width: min(75vw, 390px);

        opacity: var(--mobile-opacity);
        filter: var(--mobile-filter);

        transform:
            translateX(
                calc(
                    var(--mobile-x) +
                    var(--drag-x)
                )
            )
            translateY(var(--mobile-y))
            rotate(
                calc(
                    var(--mobile-rotation) +
                    var(--drag-rotation)
                )
            )
            scale(var(--mobile-scale));

        transform-origin: 50% 85%;

        box-shadow: none;

        transition:
            transform var(--deck-transition),
            opacity 450ms ease,
            filter 450ms ease;

        will-change: transform, opacity;
    }


    /* -----------------------------------------------------
       CARTE ACTIVE
       ----------------------------------------------------- */

    .deck-card.is-current {
        --mobile-x: -50%;
        --mobile-y: 0px;
        --mobile-rotation: 0deg;
        --mobile-scale: 1;

        --mobile-opacity: 1;
        --mobile-filter: none;

        --deal-delay: 0ms;

        z-index: 3;

        pointer-events: auto;
    }


    /* -----------------------------------------------------
       CARTE VISIBLE DESSOUS
       ----------------------------------------------------- */

    .deck-card.is-under {
        --mobile-x: -47%;
        --mobile-y: 23px;
        --mobile-rotation: 3.5deg;
        --mobile-scale: .96;

        --mobile-opacity: 1;

        --mobile-filter:
            brightness(.92)
            saturate(.84);

        --deal-delay: 110ms;

        z-index: 2;

        pointer-events: none;
    }


    /* -----------------------------------------------------
       TROISIÈME CARTE VISIBLE AU FOND
       ----------------------------------------------------- */

    .deck-card.is-back {
        --mobile-x: -52%;
        --mobile-y: 42px;
        --mobile-rotation: -3deg;
        --mobile-scale: .92;

        --mobile-opacity: 1;

        --mobile-filter:
            brightness(.86)
            saturate(.78);

        --deal-delay: 170ms;

        z-index: 1;

        visibility: visible;
        pointer-events: none;
    }


    /* -----------------------------------------------------
       DRAG
       ----------------------------------------------------- */

    .cards-stage.is-dragging
    .deck-card.is-current {
        transition: none;
    }


    /* -----------------------------------------------------
       APPARITION INITIALE MOBILE
       ----------------------------------------------------- */

    .cards-deck.is-visible:not(.has-dealt)
    .deck-card {
        animation:
            deck-deal-mobile
            760ms
            cubic-bezier(.22, 1, .36, 1)
            var(--deal-delay)
            both;
    }

    @keyframes deck-deal-mobile {
        from {
            opacity: 0;

            transform:
                translateX(-50%)
                translateY(90px)
                rotate(0deg)
                scale(.84);
        }

        to {
            opacity: var(--mobile-opacity);

            transform:
                translateX(var(--mobile-x))
                translateY(var(--mobile-y))
                rotate(var(--mobile-rotation))
                scale(var(--mobile-scale));
        }
    }


    /* -----------------------------------------------------
       NAVIGATION MOBILE
       ----------------------------------------------------- */

    .deck-navigation {
        position: relative;

        top: auto;
        right: auto;
        bottom: auto;
        left: auto;

        width: 100%;
        max-height: 50px;
        align-self: auto;
        justify-self: auto;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 14px;

        margin-top: 20px;
    }

    .deck-navigation .deck-arrow,
    .deck-navigation .deck-prev,
    .deck-navigation .deck-next {
        width: 90px;
        min-height: 48px;

        padding-inline: 10px;
    }

    .deck-navigation .deck-arrow svg,
    .deck-navigation .deck-prev svg,
    .deck-navigation .deck-next svg {
        width: 68px;
    }

}


/* =========================================================
   PETITS MOBILES
   ========================================================= */

@media screen and (max-width: 390px) {

    .deck-card {
        width: min(86vw, 350px);
    }

    .deck-card.is-under {
        --mobile-x: -47.5%;
        --mobile-y: 20px;
        --mobile-rotation: 3deg;
        --mobile-scale: .965;
    }

    .deck-navigation {
        gap: 8px;
    }

    .deck-navigation .deck-arrow,
    .deck-navigation .deck-prev,
    .deck-navigation .deck-next {
        width: 82px;
    }

    .deck-navigation .deck-arrow svg,
    .deck-navigation .deck-prev svg,
    .deck-navigation .deck-next svg {
        width: 62px;
    }

}


/* =========================================================
   ACCESSIBILITÉ
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .deck-card {
        animation: none !important;

        transition-duration: 1ms !important;
        animation-duration: 1ms !important;
    }

    .deck-navigation .deck-arrow,
    .deck-navigation .deck-prev,
    .deck-navigation .deck-next {
        transition-duration: 1ms !important;
    }

}

/* =========================================================
   SÉPARATEURS
   ========================================================= */

.service-card:not(:last-child) {
    border-right: 1px solid var(--services-color);
}

.service-card:not(:last-child)::after {
    content: "";

    position: absolute;
    z-index: 3;

    top: var(--after-y);
    right: -8px;

    width: 15px;
    height: 10px;

    transform: translateY(var(--after-y));

    background:
        radial-gradient(
            ellipse at 100% 100%,
            transparent 0 3px,
            var(--services-color) 3.5px 7px,
            transparent 7.5px
        )
        left center / 50% 100% no-repeat,

        radial-gradient(
            ellipse at 0 100%,
            transparent 0 3px,
            var(--services-color) 3.5px 7px,
            transparent 7.5px
        )
        right center / 50% 100% no-repeat;
}


/* =========================================================
   TITRES
   ========================================================= */

.service-card h3 {
    margin: 26px 0 25px;

    color: var(--services-color);

    font-size: clamp(18px, 1.35vw, 22px);
    font-weight: 400;
    line-height: 1.4;
}
.niveau-atteint .service-card h3{
    font-family:var(--e-global-typography-accent-font-family);
    font-size: 24px;
    line-height: 1.5;
    min-height: 80px;
}
.niveau-atteint .service-card {
    justify-content: start;
}


/* =========================================================
   BOUTONS
   ========================================================= */

.service-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 100px;
    min-height: 33px;

    padding: 8px 20px;

    color: #fff;
    background-color: #80c9ff;

    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;

    transition:
        transform 0.25s ease,
        background-color 0.25s ease;
}

.service-button:hover {
    color: #fff;
    background-color: #60baf9;

    transform: translateY(-2px);
}
.niveau-atteint__texte{
    color:var(--e-global-color-text);
}

/* =========================================================
   ORNEMENTS DES COINS
   ========================================================= */

.services-corner {
    position: absolute;
    z-index: 4;

    width: 9px;
    height: 9px;

    background:
        url("/wp-content/uploads/2026/07/forme-a.svg")
        center / contain no-repeat;

    pointer-events: none;
    transform-origin: center;
}

.services-corner--tl {
    top: var(--services-corner-position);
    left: var(--services-corner-position);

    transform: rotate(315deg);
}

.services-corner--tr {
    top: var(--services-corner-position);
    right: var(--services-corner-position);

    transform: rotate(45deg);
}

.services-corner--br {
    right: var(--services-corner-position);
    bottom: var(--services-corner-position);

    transform: rotate(135deg);
}

.services-corner--bl {
    bottom: var(--services-corner-position);
    left: var(--services-corner-position);

    transform: rotate(225deg);
}


/* =========================================================
   TABLETTE : 3 ITEMS PUIS 2 ITEMS CENTRÉS
   ========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    .services-frame {
        width: calc(100% - 30px);
        padding: 28px 18px;
    }

    .services-grid.grid-5 {
        display: grid;

        /*
         * 6 colonnes techniques :
         * chaque carte en occupe 2.
         */
        grid-template-columns: repeat(6, minmax(0, 1fr))!important;

        width: 100%;
        min-height: 0;

        row-gap: 28px;
    }

    .service-card {
        /*
         * 2 colonnes sur 6 = un tiers de la largeur.
         */
        grid-column: span 2;

        min-height: 180px;
        padding: 20px 18px 8px;
    }

    /*
     * Deuxième ligne centrée :
     *
     * colonnes : 1 2 3 4 5 6
     * item 4      [---]
     * item 5          [---]
     */
    .service-card:nth-child(4) {
        grid-column: 2 / span 2;
    }

    .service-card:nth-child(5) {
        grid-column: 4 / span 2;
    }

    /*
     * Reset des séparateurs desktop.
     */
    .service-card {
        border-right: 0;
    }

    .service-card:not(:last-child)::after {
        display: none;
    }

    /*
     * Première ligne :
     * séparation après les items 1 et 2,
     * mais aucune après l'item 3.
     *
     * Deuxième ligne :
     * séparation uniquement après l'item 4.
     */
    .service-card:nth-child(1),
    .service-card:nth-child(2),
    .service-card:nth-child(4) {
        border-right: 1px solid var(--services-color);
    }
    .service-card:nth-child(3){
        border: none;
    }
    .service-card:nth-child(4), .service-card:nth-child(5){
        border-top: solid 1px var(--services-color);
    }
    .service-card:nth-child(1)::after,
    .service-card:nth-child(2)::after,
    .service-card:nth-child(4)::after {
        display: block;
    }

    .service-card h3 {
        font-size: 17px;
    }
}


/* =========================================================
   MOBILE : CARTES EN COLONNE
   ========================================================= */

@media (max-width: 767px) {

    .services-frame {
        width: calc(100% - 24px);
        padding: 24px 20px;

        /*
         * Plus de carrousel horizontal.
         */
        overflow: visible;
    }

    .services-grid {
        display: grid;
        grid-template-columns: 1fr;

        width: 100%;
        min-height: 0;

        overflow: visible;
    }

    .service-card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 180px;

        padding: 32px 20px;

        gap: 24px;
    }

    /*
     * On supprime les séparateurs verticaux.
     */
    .service-card:not(:last-child) {
        border-right: 0;
        border-bottom: 1px solid var(--services-color);
    }

    /*
     * Le motif central passe sur le séparateur horizontal.
     *
     * On reprend le même dessin et on le tourne de 90°.
     */
    .service-card:not(:last-child)::after {
        top: auto;
        right: auto;
        bottom: -7px;
        left: 50%;

        width: 15px;
        height: 10px;

        transform:
            translateX(-50%)
            rotate(90deg);
    }

    .service-card h3 {
        margin: 0;

        font-size: 20px;
        line-height: 1.4;
    }

    .service-button {
        margin: 0;
    }
}

/* Carte qui sommes-nous ? */
.who-card::before{
    overflow: hidden;
}
.who-card::before {
    inset: 0;
    animation: who-reveal 6.2s steps(1, end) infinite;
    transform-origin: center;
    will-change: transform, opacity, filter;
}

@keyframes who-reveal {

    0%,
    1% {
        opacity: 0;
        filter: brightness(1) contrast(1);
        transform: translate(0, 0) scale(1);
    }

    /* premier aperçu */
    1.5% {
        opacity: 1;
        transform: translate(-3px, 1px) scale(1.04);
    }

    2.5% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }


    /* accélération */

    8% {
        opacity: 1;
        transform: translate(4px, -2px) scale(1.04);
    }

    9% {
        opacity: 0;
    }

    13% {
        opacity: 1;
        transform: translate(-5px, 3px) scale(1.04);
    }

    13.9% {
        opacity: 0;
    }

    17% {
        opacity: 1;
        transform: translate(6px, -3px) scale(1.04);
    }

    17.8% {
        opacity: 0;
    }

    20.2% {
        opacity: 1;
        transform: translate(-7px, 2px) scale(1.045);
    }

    20.9% {
        opacity: 0;
    }

    22.7% {
        opacity: 1;
        transform: translate(8px, 4px) scale(1.045);
    }

    23.3% {
        opacity: 0;
    }

    24.8% {
        opacity: 1;
        transform: translate(-9px, -4px) scale(1.05);
    }

    25.35% {
        opacity: 0;
    }

    26.55% {
        opacity: 1;
        transform: translate(10px, 3px) scale(1.05);
    }

    27% {
        opacity: 0;
    }


    /* emballement */

    28% {
        opacity: 1;
        transform: translate(-11px, 5px) scale(1.055);
    }

    28.4% {
        opacity: 0;
    }

    29.15% {
        opacity: 1;
        transform: translate(12px, -5px) scale(1.055);
    }

    29.5% {
        opacity: 0;
    }

    30.1% {
        opacity: 1;
        transform: translate(-13px, -3px) scale(1.06);
    }

    30.4% {
        opacity: 0;
    }


    /* unique flash disruptif */

    30.9% {
        opacity: 1;
        filter: brightness(2.2) contrast(1.35);
        transform: translate(13px, 3px) scale(1.06);
    }

    31.45% {
        opacity: 0;
        filter: brightness(1) contrast(1);
    }


    /* REVEAL :
       retour EXACT au cadrage original */

    32.1% {
        opacity: 1;
        filter: brightness(1) contrast(1);
        transform: translate(0, 0) scale(1);
    }

    32.1%,
    97.5% {
        opacity: 1;
        filter: brightness(1) contrast(1);
        transform: translate(0, 0) scale(1);
    }


    /* reset */

    98.5%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(1);
    }
}

/* =========================================================
   LISTING SERVICES V2
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

.services-stack-section {
    /*
     * Si --acsend-screen-h existe déjà globalement,
     * elle sera utilisée.
     *
     * Le min() garantit dans tous les cas que
     * Services n'est jamais plus haut que le viewport.
     */
    --services-stage-h:
        min(
            100svh,
            var(--acsend-screen-h, 1080px)
        );

    --services-gap:
        clamp(40px, 5vw, 100px);

    --card-width:
        min(100%, 430px);
}


/* =========================================================
   STRUCTURE GÉNÉRALE
   ========================================================= */

.services-stack-section {
    position: relative !important;

    width: 100%;

    min-height: 0;

    overflow: visible !important;
}


/*
 * Elementor met .services-freeze en flex.
 * On repasse explicitement en block pour maîtriser
 * stage + after.
 */
.services-freeze {
    display: block !important;

    position: relative;

    width: 100%;

    overflow: visible;
}


/* =========================================================
   STAGE SERVICES
   ========================================================= */

.services-stage {
    position: relative;

    width: 100%;

    box-sizing: border-box;
}


/*
 * Transmet la hauteur disponible jusqu'au shortcode.
 */
.services-stage > .elementor-widget-shortcode,
.services-stage .elementor-widget-container,
.services-stage .elementor-shortcode {
    width: 100%;
}


/* =========================================================
   SERVICES AFTER
   ========================================================= */

.services-after {
    position: relative;

    width: 100%;

    overflow: visible;
}


/* =========================================================
   STACK PRINCIPAL
   ========================================================= */

.services-stack {
    display: grid;

    grid-template-columns:
        minmax(0, 45%)
        minmax(0, 55%);

    gap:
        var(--services-gap);

    align-items: center;

    position: relative;

    width: 100%;

    box-sizing: border-box;

    overflow: visible;
}


/* =========================================================
   COLONNE CARTES
   ========================================================= */

.services-stack__visual {
    position: relative;

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: end;

    padding:
        45px
        30px
        100px;

    box-sizing: border-box;

    /*
     * Les cartes qui attendent au-dessus
     * restent masquées.
     */
    overflow: hidden;
}


/* =========================================================
   PILE DE CARTES
   ========================================================= */

.services-stack__cards {
    display: grid;

    width:
        var(--card-width);

    padding-left:
        10%;

    position: relative;

    justify-content: center;
    align-items: center;

    box-sizing: border-box;
}


/* =========================================================
   CARTE
   ========================================================= */

.service-card-list {
    grid-column: 1;
    grid-row: 1;

    width: 100%;

    max-width: 420px;

    aspect-ratio:
        420 / 560;

    position: relative;

    transform-origin:
        center center;


    /*
     * Carte future :
     * au-dessus + invisible.
     */
    transform:
        translateY(-190%);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;


    transition:
        transform 0.65s cubic-bezier(.65, 0, .35, 1),
        opacity 0.18s ease,
        visibility 0s linear 0.65s;

    will-change:
        transform,
        opacity;
}


/* =========================================================
   CARTE ARRIVÉE
   ========================================================= */

.service-card-list.is-stacked,
.service-card-list.is-active {
    transform:
        translateY(0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;


    transition:
        transform 0.65s cubic-bezier(.65, 0, .35, 1),
        opacity 0.18s ease,
        visibility 0s linear 0s;
}


/*
 * Première carte visible avant initialisation JS.
 */
.service-card-list:first-child {
    transform:
        translateY(0);

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


/* =========================================================
   Z-INDEX DES CARTES
   ========================================================= */

.service-card-list:nth-child(1)  { z-index: 1; }
.service-card-list:nth-child(2)  { z-index: 2; }
.service-card-list:nth-child(3)  { z-index: 3; }
.service-card-list:nth-child(4)  { z-index: 4; }
.service-card-list:nth-child(5)  { z-index: 5; }
.service-card-list:nth-child(6)  { z-index: 6; }
.service-card-list:nth-child(7)  { z-index: 7; }
.service-card-list:nth-child(8)  { z-index: 8; }
.service-card-list:nth-child(9)  { z-index: 9; }
.service-card-list:nth-child(10) { z-index: 10; }


/* =========================================================
   LIEN CARTE

   Le JS applique ici le placement x / y / rotation
   propre à chaque carte.
   ========================================================= */

.service-card__link {
    display: block;

    width: 100%;
    height: 100%;

    color: inherit;

    text-decoration: none;

    transform-origin:
        center center;
}


/* =========================================================
   CARTE BLANCHE
   ========================================================= */

.service-card__inner {
    width: 100%;
    height: 100%;

    display: flex;

    justify-content: center;
    align-items: center;

    padding:
        clamp(
            25px,
            4vw,
            55px
        );

    box-sizing:
        border-box;

    background:
        #fff;

    border-radius:
        30px;

    overflow:
        hidden;

    box-shadow:
        0 3px 3px rgba(0, 0, 0, 0.05),
        0 10px 10px rgba(0, 0, 0, 0.09);
}


/* =========================================================
   IMAGE
   ========================================================= */

.service-card__image {
    width: 100%;
    height: 100%;

    display: flex;

    align-items: center;
    justify-content: center;
}


.service-card__img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit:
        contain;
}


/* =========================================================
   CONTENU
   ========================================================= */

.services-stack__contents {
    width: 100%;

    padding:
        0
        30px;

    position: relative;

    box-sizing: border-box;
}


.service-content {
    position: relative;

    width: 100%;

    font-family:
        var(--e-global-typography-accent-font-family),
        Sans-serif;

    color:
        var(--e-global-color-primary);

    font-size:
        24px;

    line-height:
        1.5em;
}


.service-content__inner {
    width: 100%;

    max-width:
        650px;
}


/* =========================================================
   TYPO
   ========================================================= */

.service-content__title {
    margin:
        0
        0
        40px;

    font-size:
        clamp(
            28px,
            2.2vw,
            32px
        );

    line-height: 1.1em;
    font-weight:600;
}


.service-content__description {
    margin-bottom:
        20px;
}


.service-content__description p,
.service-content__details p,
.service-content__benefit-text p {
    margin-top:
        0;
}


.service-content__description p:last-child,
.service-content__details p:last-child,
.service-content__benefit-text p:last-child {
    margin-bottom:
        0;
}


/* =========================================================
   DETAILS / CERTIFICATIONS
   ========================================================= */

.service-content__details {
    margin-top:
        18px;

    padding-bottom:
        18px;

    font-size:
        0.6em;
}


.service-content__details p {
    margin-bottom:
        0;

    border-bottom:
        1px solid currentColor;
}


/* =========================================================
   BÉNÉFICE
   ========================================================= */

.service-content__benefit {
    margin-top:
        20px;
}


.service-content__benefit-label {
    display: inline-flex;

    margin-bottom: 10px;

    font-weight: 600;

    color:
        var(--e-global-color-primary);
}


.service-content__benefit-text {
    font-weight:
        400;
}


/* =========================================================
   LIEN
   ========================================================= */

.service-content__link {
    display:
        inline-flex;

    padding:
        8px
        20px;

    margin-top:
        24px;

    line-height:
        1em;

    color:
        inherit;

    text-decoration:
        none;
}


/* =========================================================
   DESKTOP
   >= 1025px

   PIN JS :
   - section = piste
   - freeze relative avant
   - freeze fixed pendant
   - freeze absolute après

   Aucun contenu n'est coupé.
   Aucun faux espace après services-after.
   ========================================================= */

@media (min-width: 1025px) {

    /* =====================================================
       PISTE
       ===================================================== */

    .services-stack-section {

        /*
         * Ces valeurs seront calculées précisément
         * et injectées par le JS.
         */
        --services-track-height: auto;
        --services-pin-distance: 0px;
        --services-pin-left: 0px;
        --services-pin-width: 100%;

        position: relative !important;

        display: block !important;

        width: 100%;

        /*
         * Le JS donne :
         *
         * hauteur réelle de services-freeze
         * +
         * distance des 4 transitions.
         */
        height:
            var(--services-track-height) !important;

        min-height: 0 !important;

        /*
         * PLUS DE padding-bottom.
         * C'était lui qui créait le gros vide.
         */
        padding-bottom: 0 !important;

        overflow: visible !important;
    }


    /* =====================================================
       FREEZE — ÉTAT NORMAL

       Avant d'entrer dans la séquence.
       ===================================================== */

    .services-freeze {
        position: relative !important;

        top: auto !important;
        left: auto !important;

        display: block !important;

        width: 100% !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 !important;

        overflow: visible !important;

        transform: none !important;

        z-index: 10;
    }


    /* =====================================================
       FREEZE — PIN ACTIF

       Tout le contenu est immobilisé.

       Même si services-freeze est plus haut que l'écran,
       ce n'est pas un problème avec position:fixed.
       ===================================================== */

    .services-freeze.is-services-pinned {
        position: fixed !important;

        top: 0 !important;

        left:
            var(--services-pin-left) !important;

        width:
            var(--services-pin-width) !important;

        height: auto !important;

        overflow: visible !important;

        margin: 0 !important;

        z-index: 100;
    }


    /* =====================================================
       FREEZE — APRÈS LE PIN

       On le pose à sa position finale dans la piste.

       Au moment précis du passage fixed → absolute,
       il reste exactement au même endroit à l'écran :
       aucun saut.
       ===================================================== */

    .services-freeze.is-services-ended {
        position: absolute !important;

        top:
            var(--services-pin-distance) !important;

        left: 0 !important;

        width: 100% !important;

        height: auto !important;

        overflow: visible !important;

        margin: 0 !important;

        z-index: 10;
    }


    /* =====================================================
       STAGE SERVICES

       Seul le listing Services est plafonné.
       ===================================================== */

    .services-stage {
        position: relative !important;

        top: auto !important;

        display: block !important;

        width: 100%;

        height:
            var(--services-stage-h) !important;

        min-height:
            var(--services-stage-h) !important;

        max-height:
            1080px !important;

        box-sizing:
            border-box;

        overflow:
            hidden;

        z-index:
            auto;
    }


    .services-stage > .elementor-widget-shortcode,
    .services-stage .elementor-widget-container,
    .services-stage .elementor-shortcode {
        width: 100%;
        height: 100%;
    }


    /* =====================================================
       SERVICES AFTER

       Toujours sa vraie hauteur.
       Rien n'est coupé.
       ===================================================== */

    .services-after {
        position: relative !important;

        top: auto !important;

        display: block !important;

        width: 100%;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        transform: none !important;

        z-index: auto;
    }


    /* =====================================================
       STACK DESKTOP
       ===================================================== */

    .services-stack {
        height: 100%;

        align-items: center;
    }


    .services-stack__visual {
        height: 100%;
    }


    /* =====================================================
       TEXTES SUPERPOSÉS
       ===================================================== */

    .services-stack__contents {
        display: grid;

        align-items: center;
    }


    .service-content {
        grid-column: 1;
        grid-row: 1;

        min-height: 0;

        opacity: 0;

        visibility: hidden;

        pointer-events: none;

        transform:
            translateY(16px);

        transition:
            opacity 280ms ease,
            transform 350ms ease,
            visibility 0s linear 350ms;

        will-change:
            opacity,
            transform;
    }


    .service-content.is-active {
        opacity: 1;

        visibility: visible;

        pointer-events: auto;

        transform:
            translateY(0);

        transition:
            opacity 280ms ease,
            transform 350ms ease,
            visibility 0s linear 0s;
    }

}


/* =========================================================
   TABLETTE
   <= 1024px

   On garde la version scroll naturel :
   - pas de snapshot desktop
   - cartes sticky
   - tous les textes dans le flux
   ========================================================= */

@media (max-width: 1024px) {

    /* =====================================================
       SECTION
       ===================================================== */

    .services-stack-section {
        height:
            auto !important;

        min-height:
            0 !important;

        padding-bottom:
            0 !important;

        overflow:
            visible !important;
    }


    /* =====================================================
       FREEZE DÉSACTIVÉ
       ===================================================== */

    .services-freeze {
        position:
            relative !important;

        top:
            auto !important;

        display:
            block !important;

        width:
            100%;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        overflow:
            visible !important;

        transform:
            none !important;

        z-index:
            auto;
    }


    /* =====================================================
       STAGE NORMAL
       ===================================================== */

    .services-stage {
        position:
            relative !important;

        top:
            auto !important;

        display:
            block !important;

        width:
            100%;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        overflow:
            visible;

        z-index:
            auto;
    }


    .services-stage > .elementor-widget-shortcode,
    .services-stage .elementor-widget-container,
    .services-stage .elementor-shortcode {
        height:
            auto;
    }


    /* =====================================================
       AFTER NORMAL
       ===================================================== */

    .services-after {
        position:
            relative !important;

        top:
            auto !important;

        width:
            100%;

        height:
            auto !important;

        min-height:
            0 !important;

        max-height:
            none !important;

        transform:
            none !important;

        overflow:
            visible !important;
    }


    /* =====================================================
       STACK
       ===================================================== */

    .services-stack {
        display:
            block;

        width:
            100%;

        height:
            auto;

        overflow:
            visible;

        --card-width:
            min(72vw, 380px);
    }


    /* =====================================================
       CARTES STICKY
       ===================================================== */

    .services-stack__visual {
        position: sticky;

        top: 0;

        width: 100%;

        /*
         * Environ 40% pour l'illustration,
         * le reste de l'écran reste disponible
         * pour commencer à voir le texte.
         */
        height: 48svh;
        max-height: 48svh;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow: hidden;

        padding:
            5px
            25px
            7svh;

        box-sizing: border-box;

        z-index: 10;

        background:
            var(--e-global-color-secondary);
    }


    .services-stack__cards {
        width:
            var(--card-width);

        margin:
            0 auto;

        margin-top:
            10px;
    }


    .service-card-list {
        width:
            80%;

        max-width:
            380px;
    }


    /* =====================================================
       TEXTES DANS LE FLUX
       ===================================================== */

    .services-stack__contents {
        display:
            block;

        width:
            100%;

        padding:
            0
            30px;
    }


    .service-content {
        display:
            flex;

        align-items:
            center;

        position:
            relative;

        width:
            100%;

        min-height:
            52svh;

        padding:
            45px
            6vw;

        box-sizing:
            border-box;


        /*
         * Tous réellement visibles.
         */
        opacity:
            1;

        visibility:
            visible;

        pointer-events:
            auto;

        transform:
            none;

        transition:
            none;

        font-size:
            20px;
    }


    .service-content__inner {
        max-width:
            650px;

        margin:
            0 auto;
    }


    .service-content__title {
        margin-bottom:
            30px;

        font-size:
            28px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .services-stack {
        --card-width:
            min(76vw, 300px);

        display: block;

        width: 100%;
    }


    /* -----------------------------------------
       CARTES
    ----------------------------------------- */

    .services-stack__visual {
        position: sticky;

        top: 0;

        width: 100%;

        /*
         * Environ 40% pour l'illustration,
         * le reste de l'écran reste disponible
         * pour commencer à voir le texte.
         */
        height: 42svh;
        max-height: 42svh;

        display: flex;

        align-items: center;
        justify-content: center;

        overflow: hidden;

        padding:
            5px
            25px
            9svh;

        box-sizing: border-box;

        z-index: 10;

        background:
            var(--e-global-color-secondary);
    }


    .services-stack__cards {
        width:
            var(--card-width);

        padding-left:
            0;
    }


    .services-stack__cards .service-card-list {
        width:
            100%;

        max-width:
            300px;

        max-height:
            34svh;
    }


    .service-card__inner {
        padding:
            25px;

        border-radius:
            22px;
    }


    /* -----------------------------------------
       CONTENUS
    ----------------------------------------- */

    .services-stack__contents {
        width:
            100%;
    }


    .service-content {
        /*
         * Assez haut pour que chaque changement
         * de service ait une vraie respiration.
         */
        min-height:
            65svh;

        display:
            flex;

        align-items:
            center;

        padding:
            40px
            20px
            55px;

        font-size:
            18px;

        line-height:
            1.45em;

        box-sizing:
            border-box;
    }


    .service-content__inner {
        width:
            100%;

        max-width:
            none;
    }


    .service-content__title {
        margin-bottom:
            25px;

        font-size:
            26px;

        line-height:
            1.1em;
    }


    .service-content__details {
        margin-top:
            15px;

        font-size:
            0.7em;
    }


    .service-content__benefit {
        margin-top:
            18px;
    }


    .service-content__benefit-label {
        margin-bottom:
            12px;

        /*padding:
            8px
            11px;*/
    }


    .service-content__link {
        margin-top:
            20px;
    }


    /*
     * Important pour que la dernière carte
     * reste quelque temps visible avant
     * la fin de la section.
     */
    .service-content:last-child {
        padding-bottom:
            18svh;
    }

}


/* =========================================================
   OFFRES D'EMPLOI — 3 OFFRES VERTICALES PAR SLIDE
   ========================================================= */

.offers-slider .jet-listing-grid__item:not(:nth-child(3n)) > div{
    border-bottom: solid 1px var(--e-global-color-secondary);
}
.offers-slider .jet-listing-grid__item:first-child > div > div{
    padding-top:0!important;
}
.offers-slider .swiper-arrow{
    border-radius: 50%;
}

.offers-slider .jet-listing-grid__items.swiper-wrapper {
    display: grid !important;

    /* 3 offres l'une sous l'autre */
    grid-template-rows: repeat(3, auto);

    /* On remplit d'abord verticalement,
       puis on crée la colonne suivante */
    grid-auto-flow: column;

    /* Chaque groupe de 3 prend 100% de la largeur */
    grid-auto-columns: 100%;
}


/* Chaque offre prend toute la largeur du slider */
.offers-slider .jet-listing-grid__item.swiper-slide {
    width: 100% !important;
    max-width: none !important;
}


/* La slide vide générée par Swiper s'intègre au groupe */
.offers-slider .swiper-slide-invisible-blank {
    width: 100% !important;
}