/* ==================================================
   ACCUEIL — RÉALISATIONS NEW
   VERSION PREMIUM / 3 CARTES EXACTES / RESPONSIVE
================================================== */

.home-realisations-new{
    position:relative;
    overflow:hidden;

    padding:92px 0 100px;

    background:
        radial-gradient(
            circle at 50% 0,
            rgba(37,99,235,.055),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7faff 100%
        );
}

.home-realisations-new,
.home-realisations-new *,
.home-realisations-new *::before,
.home-realisations-new *::after{
    box-sizing:border-box;
}

.home-realisations-new::before{
    content:"";

    position:absolute;
    top:-250px;
    left:50%;

    width:620px;
    height:620px;

    border:1px solid rgba(37,99,235,.045);
    border-radius:50%;

    transform:translateX(-50%);

    box-shadow:
        0 0 0 60px rgba(37,99,235,.012),
        0 0 0 120px rgba(37,99,235,.008);

    pointer-events:none;
}

.home-realisations-new .le-container{
    position:relative;
    z-index:2;

    width:min(1700px,94%);
    margin:0 auto;
}

/* ==================================================
   EN-TÊTE
================================================== */

.home-realisations-new-heading{
    max-width:820px;
    margin:0 auto 55px;

    text-align:center;
}

.home-realisations-new-label{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:30px;
    padding:0 13px;
    margin-bottom:16px;

    border:1px solid rgba(37,99,235,.12);
    border-radius:999px;

    background:#eef4ff;
    color:#2563eb;

    font-size:11px;
    font-weight:900;
    line-height:1;
    letter-spacing:.7px;
    text-transform:uppercase;
}

.home-realisations-new-heading h2{
    margin:0 0 18px;

    color:#000d20;

    font-size:48px;
    font-weight:950;
    line-height:1.08;
    letter-spacing:-1.35px;
}

.home-realisations-new-heading h2 span{
    color:#2563eb;
}

.home-realisations-new-heading p{
    max-width:700px;
    margin:0 auto;
    padding-bottom:0 !important;

    color:#64748b;

    font-size:16px;
    font-weight:500;
    line-height:1.72;
}

.home-realisations-new-heading-line{
    display:block;

    width:56px;
    height:3px;

    margin:23px auto 0;

    border-radius:999px;

    background:
        linear-gradient(
            90deg,
            #2563eb,
            #75a7ff
        );

    box-shadow:0 8px 20px rgba(37,99,235,.20);
}

/* ==================================================
   SLIDER
================================================== */

.home-realisations-new-slider-wrap{
    position:relative;

    padding:0 70px;
}

.home-realisations-new-swiper{
    width:100%;
    overflow:hidden;

    padding:10px 4px 30px;
}

/*
 * Desktop :
 * exactement trois cartes visibles.
 * Le !important neutralise une éventuelle largeur inline
 * calculée par une ancienne configuration Swiper en 3,5.
 */

.home-realisations-new .swiper-wrapper{
    align-items:flex-start;
}

.home-realisations-new .swiper-slide{
    width:calc((100% - 48px) / 3) !important;
    height:auto;

    flex:0 0 calc((100% - 48px) / 3) !important;

    display:block;
}

.home-realisations-new .swiper-slide > article{
    width:100%;
    height:auto;
}

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

.home-realisation-new-card{
    position:relative;
    overflow:hidden;

    width:100%;
    height:auto;
    min-height:0;

    border:1px solid rgba(0,13,32,.075);
    border-radius:23px;

    background:#ffffff;

    display:grid;
    grid-template-rows:315px auto;

    box-shadow:
        0 18px 44px rgba(0,13,32,.055),
        0 34px 80px rgba(0,13,32,.04);

    transition:
        transform .38s ease,
        border-color .38s ease,
        box-shadow .38s ease;
}

.home-realisation-new-card:hover{
    transform:translateY(-8px);

    border-color:rgba(37,99,235,.17);

    box-shadow:
        0 25px 58px rgba(0,13,32,.085),
        0 45px 100px rgba(37,99,235,.075);
}

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

.home-realisation-new-image{
    position:relative;
    overflow:hidden;

    min-width:0;
    height:315px;

    background:#000d20;
}

.home-realisation-new-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;
    object-position:center;

    transform:scale(1.025);

    transition:
        transform .85s cubic-bezier(.22,.61,.36,1),
        filter .5s ease;
}

.home-realisation-new-card:hover
.home-realisation-new-image img{
    transform:scale(1.08);
    filter:brightness(1.04);
}

.home-realisation-new-overlay{
    position:absolute;
    inset:0;
    z-index:1;

    background:
        linear-gradient(
            180deg,
            rgba(0,13,32,.15) 0%,
            rgba(0,13,32,.01) 42%,
            rgba(0,13,32,.76) 100%
        );

    pointer-events:none;
}

/* Ville */

.home-realisation-new-city{
    position:absolute;
    top:18px;
    left:18px;
    z-index:3;

    min-height:46px;
    max-width:calc(100% - 36px);
    padding:0 19px;

    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;

    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(255,255,255,.21),
            transparent 35%
        ),
        linear-gradient(
            145deg,
            rgba(7,87,249,.55),
            rgba(7,87,249,.17)
        );

    color:#ffffff;

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);

    font-size:15px;
    font-weight:900;
    line-height:1;

    box-shadow:
        0 12px 28px rgba(0,13,32,.22),
        inset 0 1px 0 rgba(255,255,255,.14);

    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.home-realisation-new-city svg{
    display:block;

    width:20px;
    height:20px;
    flex:0 0 20px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.1;
    stroke-linecap:round;
    stroke-linejoin:round;
}



/* Statut */

.home-realisation-new-status{
    position:absolute;
    top:17px;
    right:17px;
    z-index:3;

    min-height:34px;
    padding:0 12px;

    border:1px solid rgba(255,255,255,.13);
    border-radius:999px;

    background:rgba(37,99,235,.88);
    color:#ffffff;

    display:inline-flex;
    align-items:center;

    font-size:10px;
    font-weight:900;
    letter-spacing:.45px;
    text-transform:uppercase;
    white-space:nowrap;

    box-shadow:0 10px 24px rgba(37,99,235,.20);
}

/* Texte sur image */

.home-realisation-new-image-content{
    position:absolute;
    left:22px;
    right:22px;
    bottom:21px;
    z-index:3;

    min-height:64px;

    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

.home-realisation-new-image-content span{
    display:block;

    min-height:14px;
    margin-bottom:5px;

    color:#82b2ff;

    font-size:10px;
    font-weight:900;
    letter-spacing:.65px;
    text-transform:uppercase;
}

.home-realisation-new-image-content strong{
    display:flex;
    align-items:flex-end;

    max-width:390px;
    min-height:52px;

    color:#ffffff;

    font-size:19px;
    font-weight:950;
    line-height:1.35;
    letter-spacing:-.2px;
}

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

.home-realisation-new-content{
    width:100%;
    min-width:0;
    min-height:0;
    padding:18px 20px 20px;

    display:block;
}

/* Métadonnées */

.home-realisation-new-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;

    margin:0;
}

.home-realisation-new-meta-item{
    min-width:0;
    min-height:68px;
    padding:11px 12px;

    border:1px solid rgba(0,13,32,.065);
    border-radius:14px;

    background:#f8faff;

    display:grid;
    /* L'icone mesure 40px : une colonne de 37px la faisait
       deborder de sa cellule sur les cartes etroites. */
    grid-template-columns:40px minmax(0,1fr);
    gap:10px;
    align-items:center;
}

.home-realisation-new-meta-icon{
    width:40px;
    height:40px;
    flex:0 0 40px;

    border:1px solid rgba(37,99,235,.12);
    border-radius:12px;

    background:
        linear-gradient(
            145deg,
            #e8f1ff,
            #dbe9ff
        );

    color:#2563eb;

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

    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.9),
        0 8px 18px rgba(37,99,235,.08);
}

.home-realisation-new-meta-icon svg,
.home-realisation-new-meta-icon img{
    display:block;

    width:21px;
    height:21px;
    flex:0 0 21px;
}

.home-realisation-new-meta-icon svg{
    overflow:visible;

    fill:none;
    stroke:currentColor;
    stroke-width:1.9;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.home-realisation-new-meta-icon img{
    object-fit:contain;

    filter:
        brightness(0)
        saturate(100%)
        invert(34%)
        sepia(98%)
        saturate(2891%)
        hue-rotate(215deg)
        brightness(96%)
        contrast(91%);
}

.home-realisation-new-meta-icon--surface{
    background:
        linear-gradient(
            145deg,
            #dfebff,
            #cfe0ff
        );
}

.home-realisation-new-meta-icon--opening{
    background:
        linear-gradient(
            145deg,
            #edf4ff,
            #dce9ff
        );
}

.home-realisation-new-meta-item > div{
    min-width:0;

    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
}

.home-realisation-new-meta-item small{
    display:block;

    min-height:0;
    margin:0;

    color:#94a3b8;

    font-size:9.5px;
    font-weight:850;
    line-height:1.2;
    letter-spacing:.45px;
    text-transform:uppercase;
}

.home-realisation-new-meta-item strong{
    display:block;

    min-height:0;
    margin:0;

    color:#000d20;

    font-size:13px;
    font-weight:900;
    line-height:1.35;
}

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

.home-realisations-new-arrow{
    position:absolute;
    top:50%;
    z-index:20;

    width:52px;
    height:52px;
    padding:0;

    border:1px solid rgba(0,13,32,.075);
    border-radius:50%;

    background:#ffffff;
    color:#000d20;

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

    cursor:pointer;

    box-shadow:
        0 14px 34px rgba(0,13,32,.09),
        0 28px 70px rgba(0,13,32,.07);

    transform:translateY(-50%);

    transition:
        transform .3s ease,
        background .3s ease,
        color .3s ease,
        opacity .3s ease,
        box-shadow .3s ease;
}

.home-realisations-new-arrow svg{
    width:22px;
    height:22px;

    fill:none;
    stroke:currentColor;
    stroke-width:2.5;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.home-realisations-new-prev{
    left:3px;
}

.home-realisations-new-next{
    right:3px;
}

.home-realisations-new-arrow:hover{
    transform:translateY(-50%) scale(1.08);

    background:#2563eb;
    color:#ffffff;

    box-shadow:0 18px 38px rgba(37,99,235,.25);
}

.home-realisations-new-arrow:focus-visible{
    outline:3px solid rgba(37,99,235,.22);
    outline-offset:4px;
}

.home-realisations-new-arrow.swiper-button-disabled{
    opacity:.35;
    cursor:not-allowed;
    pointer-events:none;
}

/* ==================================================
   MENTION DE DEFILEMENT (MOBILE UNIQUEMENT)
   Sous 769px les fleches sont masquees et la lecture
   se fait au doigt : rien n'indiquait qu'il restait
   des realisations a droite. Masquee par defaut, donc
   invisible a partir de 769px.
================================================== */

.home-realisations-new-swipe-hint{
    display:none;

    align-items:center;
    justify-content:center;
    gap:9px;

    max-width:100%;
    margin:-4px auto 0;

    color:#64748b;

    font-size:12.5px;
    font-weight:700;
    line-height:1.3;
    text-align:center;

    pointer-events:none;

    transition:opacity .3s ease;
}

.home-realisations-new-swipe-hint svg{
    width:15px;
    height:15px;
    flex:0 0 15px;

    fill:none;
    stroke:#2563eb;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;

    opacity:.75;
}

.home-realisations-new-swipe-hint svg:first-child{
    animation:homeRealisationsHintLeft 1.9s ease-in-out infinite;
}

.home-realisations-new-swipe-hint svg:last-child{
    animation:homeRealisationsHintRight 1.9s ease-in-out infinite;
}

@keyframes homeRealisationsHintLeft{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(-3px);}
}

@keyframes homeRealisationsHintRight{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(3px);}
}

/* ==================================================
   RESPONSIVE — TABLETTE LARGE : 2 CARTES
================================================== */

@media(max-width:1100px){

    .home-realisations-new-slider-wrap{
        padding:0 62px;
    }

    .home-realisations-new .swiper-slide{
        width:calc((100% - 24px) / 2) !important;
        flex-basis:calc((100% - 24px) / 2) !important;
    }

    .home-realisation-new-card{
        min-height:0;
        grid-template-rows:295px auto;
    }

    .home-realisation-new-image{
        height:295px;
    }

}

/* ==================================================
   RESPONSIVE — TABLETTE / MOBILE : 1 CARTE
================================================== */

@media(max-width:768px){

    .home-realisations-new{
        padding:70px 0 78px;
    }

    .home-realisations-new-heading{
        margin-bottom:40px;
    }

    .home-realisations-new-heading h2{
        font-size:36px;
    }

    .home-realisations-new-heading p{
        font-size:14.5px;
    }

    .home-realisations-new-slider-wrap{
        padding:0;
    }

    .home-realisations-new-arrow{
        display:none;
    }

    /* La mention n'apparait que si le slider est bien
       initialise. "swiper-lock" est pose par Swiper
       (option watchOverflow) quand toutes les slides
       tiennent deja a l'ecran : inutile de proposer un
       geste qui ne sert a rien. */

    .home-realisations-new-swiper.swiper-initialized
    ~ .home-realisations-new-swipe-hint{
        display:flex;
    }

    .home-realisations-new-swiper.swiper-lock
    ~ .home-realisations-new-swipe-hint{
        display:none;
    }

    /* Des que l'utilisateur a fait glisser, le message a
       rempli son role : Swiper retire "swiper-button-disabled"
       du bouton precedent des qu'on quitte la premiere carte. */

    .home-realisations-new-prev:not(.swiper-button-disabled)
    ~ .home-realisations-new-swipe-hint{
        opacity:0;
    }

    .home-realisations-new-swiper{
        /* "visible" laissait les slides voisines deborder
           hors du conteneur sur toute la largeur. */
        overflow:hidden;

        padding-right:0;
        padding-left:0;
    }

    .home-realisations-new .swiper-slide{
        width:100% !important;
        flex-basis:100% !important;
    }

    .home-realisation-new-card{
        min-height:0;
        grid-template-rows:275px auto;
    }

    .home-realisation-new-image{
        height:275px;
    }

}

/* ==================================================
   RESPONSIVE — PETIT MOBILE
================================================== */

@media(max-width:520px){

    .home-realisations-new{
        padding:56px 0 66px;
    }

    .home-realisations-new .le-container{
        width:calc(100% - 24px);
    }

    .home-realisations-new-heading h2{
        font-size:32px;
    }

    .home-realisations-new-heading h2 br{
        display:none;
    }

    .home-realisation-new-card{
        min-height:0;
        border-radius:19px;
        grid-template-rows:245px auto;
    }

    .home-realisation-new-image{
        height:245px;
    }

    .home-realisation-new-city{
        top:13px;
        left:13px;

        max-width:calc(100% - 26px);
        min-height:42px;
        padding:0 16px;

        font-size:14px;
    }

    .home-realisation-new-city svg{
        width:19px;
        height:19px;
        flex-basis:19px;
    }

    .home-realisation-new-status{
        top:13px;
        right:13px;

        min-height:32px;
        padding:0 10px;

        font-size:9px;
    }

    .home-realisation-new-image-content{
        left:17px;
        right:17px;
        bottom:17px;
    }

    .home-realisation-new-image-content strong{
        min-height:auto;

        font-size:17px;
    }

    .home-realisation-new-content{
        padding:14px;
    }

    .home-realisation-new-meta{
        grid-template-columns:1fr;
        gap:9px;
    }

    .home-realisation-new-meta-item{
        min-height:62px;
    }

        .home-realisation-new-meta-item small,
    .home-realisation-new-meta-item strong{
        min-height:auto;
    }

}

/* ==================================================
   TRÈS PETITS ÉCRANS
================================================== */

@media(max-width:380px){

    .home-realisations-new-heading h2{
        font-size:29px;
    }

    .home-realisations-new-swipe-hint{
        gap:7px;

        font-size:11.5px;
    }

    .home-realisations-new-swipe-hint svg{
        width:14px;
        height:14px;
        flex-basis:14px;
    }

    .home-realisation-new-city{
        max-width:58%;
    }

    .home-realisation-new-status{
        max-width:38%;

        overflow:hidden;
        text-overflow:ellipsis;
    }

}

/* ==================================================
   ÉCRANS TACTILES
================================================== */

@media(hover:none){

    .home-realisation-new-card:hover{
        transform:none;

        border-color:rgba(0,13,32,.075);

        box-shadow:
            0 18px 44px rgba(0,13,32,.055),
            0 34px 80px rgba(0,13,32,.04);
    }

    .home-realisation-new-card:hover
    .home-realisation-new-image img{
        transform:scale(1.025);
        filter:none;
    }

}

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

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

    .home-realisation-new-card,
    .home-realisation-new-image img,
    .home-realisations-new-arrow,
    .home-realisations-new-swipe-hint{
        transition:none;
    }

    .home-realisations-new-swipe-hint svg{
        animation:none;
    }

}