/********************************************************************************
 * GLOBAL — HEADER
 ********************************************************************************/
#header-outer[data-transparent-header="true"].transparent>header #logo img.dark-version {
    opacity: 1 !important;
}

#header-outer #top .slide-out-widget-area-toggle a .lines-button:after,
#header-outer #top .slide-out-widget-area-toggle a .lines:before,
#header-outer #top .slide-out-widget-area-toggle a .lines:after {
    background-color: #333333;
}

#top #logo img.starting-logo {
    display: none;
}

.image_with_animation_padding_wrap {
    box-sizing: border-box;
    display: inline-block;
}

/********************************************************************************
 * SHC — SCROLL HOME (horizontal scroller + overlay)
 ********************************************************************************/

/* Sticky wrapper & spacer (JS-driven) */
.scroll_home_sticky {
    position: relative;
}

.scroll_home_spacer {
    width: 1px;
    height: 1px;
    /* JS sets the real height */
}

/* Sticky container */
.scroll_home_container {
    position: sticky;
    top: 0;
    height: 100vh;
    width: 100%;
    /* safer than 100vw re: overlay scrollbars */
    overflow: hidden;
    /* no native scroll inside the container */
}

/* Horizontal track (translated via JS) */
.scroll_home_container .scroll_home_track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100%;
    will-change: transform;
}

/* Slides */
.scroll_home_container .scroll_home {
    position: relative;
    /* contain WPBakery absolute backgrounds */
    display: block;
    flex: 0 0 auto;
    min-width: 100vw;
    /* each slide at least viewport width */
    width: auto;
    max-width: none;
    height: 100%;
    overflow: visible;
    z-index: 0;
}

/* WPBakery/Salient: full-width reset inside scroller */
.scroll_home_container .vc_row.full-width-content {
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: auto !important;
    transform: none !important;
    width: auto !important;
    max-width: none !important;
}

/* Keep backgrounds inside slide */
.scroll_home_container .scroll_home>.row-bg-wrap,
.scroll_home_container .scroll_home .row-bg-wrap .row-bg {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    left: 0 !important;
    right: auto !important;
}

.scroll_home_container .scroll_home>.row-bg-wrap {
    z-index: -1;
    pointer-events: none;
}

/* Neutralize high z-indexes inside the carousel
   (track-only version kept for safety, see below) */
.scroll_home_container .vc_row,
.scroll_home_container .vc_row *[style*="z-index"] {
    z-index: auto !important;
}

/* Overlay layer above the entire horizontal scroller */
.scroll_home_container .scroll_home_overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    /* above slides */
    pointer-events: none;
    /* don't block interactions with slides */
}

/* Hoisted VC row fills overlay */
.scroll_home_container .scroll_home_overlay>.vc_row {
    height: 100%;
    width: 100%;
    margin: 0 !important;
}

/* Opt-in interactivity for overlay children */
.scroll_home_container .scroll_home_overlay [data-overlay-interactive] {
    pointer-events: auto;
}

/* Safer variant: only neutralize z-index in the track */
.scroll_home_container .scroll_home_track .vc_row,
.scroll_home_container .scroll_home_track .vc_row *[style*="z-index"] {
    z-index: auto !important;
}

/* Full-bleed (desktop only) : escape centered/max-width ancestors */
@media (min-width: 1024px) {
    .scroll_home_sticky {
        width: 100vw;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }
}

/* Tablet fallback (768px–1023px): revert to normal vertical flow */
@media (min-width: 768px) and (max-width: 1023px) {
    .scroll_home_container {
        position: static;
        height: auto;
        overflow: visible;
    }

    .scroll_home_container .scroll_home_track {
        display: block;
        transform: none !important;
    }

    .scroll_home_container .scroll_home {
        min-width: auto;
        height: auto;
    }

    .scroll_home_container .scroll_home_overlay {
        position: absolute;
        inset: auto;
        z-index: auto;
        pointer-events: auto;
        top: 0;
    }
}

/* Mobile (≤767px): fullscreen fixed background, first slide fills viewport */
@media (max-width: 767px) {
    .scroll_home_sticky {
        margin-left: 0;
        margin-right: 0;
        width: 100vw;
        left: 50%;
        transform: translateX(-50%);
    }

    .scroll_home_container {}

    .scroll_home_container .scroll_home_track {
        display: block;
        height: 100%;
        transform: none !important;
    }

    .scroll_home_container .scroll_home {
        width: 100% !important;
        min-width: 100% !important;
        height: 100% !important;
    }

    /* overlay_title_home_videos is shown above the first slide (which acts as background) */
    .scroll_home_container .scroll_home.overlay_title_home_videos {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 10 !important;
        mix-blend-mode: difference !important;
    }

    .scroll_home_spacer {
        display: none !important;
    }
}

/* Remove background from fancy boxes (inside scroller) */
.scroll_home .nectar-fancy-box .box-bg::after,
.scroll_home .nectar-fancy-box .box-bg::before {
    display: none;
}


/********************************************************************************
 * HOME — MIX BLEND
 ********************************************************************************/
body.home .custom-mix-blend>.row_col_wrap_12,
.scroll_home_overlay {
    mix-blend-mode: difference !important;
}


/********************************************************************************
 * CPT PROJETS — SINGLE
 ********************************************************************************/
body.single-projets .entry-title,
body.single-projets .page-title,
body.single-projets .nectar-page-header,
body.single-projets .section-title,
body.single-projets .page-header,
body.single-projets .heading-title,
body.single-projets #header-space {
    display: none !important;
}

body.single-projets div[role~="main"] {
    margin-top: 0 !important;
}

body.single-projets .container-wrap {
    padding: 0 !important;
}


/********************************************************************************
 * UNDERLINE ROLL OVER (animated dots + transparent ring variant)
 ********************************************************************************/

/* Animated underline (dots) on leaf spans only */
body [data-lhe="animated_underline"] span:not(:has(*)):not(a.menu-push-out * *) {
    --dot: 5px !important;
    --offset: 0.51em !important;
    --nudge: -0.15px !important;
    position: relative !important;
}

body [data-lhe="animated_underline"] span:not(:has(*)):not(a.menu-push-out * *)::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: calc(-1 * var(--offset)) !important;
    height: var(--dot) !important;
    transform-origin: left !important;
    z-index: 1 !important;

    margin-bottom: 0 !important;
    border: 0 !important;
    animation: none !important;

    background:
        radial-gradient(circle at 50% 50%,
            #fff calc((var(--dot) / 2) + var(--nudge)),
            transparent calc((var(--dot) / 2) + var(--nudge) + 0.04px)) left bottom / var(--dot) var(--dot) round no-repeat;
}

/* Underline style: transparent background + white ring dots (SVG) */
body [data-style="underline"] *:not(:has(*)) {
    --dots-size-transparent-dots: 10px;
    --offset-transparent-dots: 0.45em;
}

body [data-style="underline"] *:not(:has(*))::after {
    margin-bottom: 0 !important;
    border: 0 !important;
    animation: none !important;

    height: var(--dots-size-transparent-dots, 9px) !important;
    bottom: calc(-1 * var(--offset-transparent-dots, 0.45em)) !important;
    background-position: left bottom !important;
    background-size: auto var(--dots-size-transparent-dots, 9px) !important;
    background-repeat: round no-repeat !important;
    background-color: transparent !important;
    transform-origin: left;
    z-index: 1;

    background-image: url("../svg/dot-transparent-white-ring.svg") !important;
}

/* Deep hide utility (reserved for JS) */
/* .shc-hidden { display: none !important; } */

/********************************************************************************
 * UNDERLINE SVG
 ********************************************************************************/
.svg_underline {
    position: relative;
    display: inline-block;
    --u_height: 10px;
    /* ring diameter in px */
    --u_overlap: 1px;
    /* overlap amount */
    --u_color: #edeae3;
    /* ring color */
    --u_stroke: 1px;
    /* ring thickness */
    --u_offset: .7em;
    /* distance below baseline */
}

/* underline layer */
.svg_underline::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--u_height);
    bottom: calc(-1 * var(--u_offset));
    pointer-events: none;

    /* SVG is generated to exact width, so no repeat and no distortion */
    background-image: var(--u_svg);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 100% 100%;
}

/********************************************************************************
 * PAGE TEMPLATE — ARCHIVE PROJETS
 ********************************************************************************/

/* Theme overrides */
.page-template-page-projets div[role~="main"] {
    max-width: inherit !important;
}

.page-template-page-projets #header-outer[data-box-shadow="large"] {
    box-shadow: none;
}

.page-template-page-projets #header-outer,
.page-template-page-projets #header-outer *,
.page-template-page-projets #header-space,
.page-template-page-projets .projets_page_intro,
.page-template-page-projets #header-outer #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before {
    background-color: #edeae3 !important;
    color: var(--nectar-page-text-color, #333333) !important;
}

.page-template-page-projets #header-outer.side-widget-open,
.page-template-page-projets #header-outer.side-widget-open *,
.page-template-page-projets #header-outer.side-widget-open #top .slide-out-widget-area-toggle[data-custom-color="true"] a:before {
    background-color: inherit !important;
}

.page-template-page-projets #header-outer[data-has-menu][data-format][data-padding][data-using-logo]>#top .slide-out-widget-area-toggle[data-custom-color="true"] a .lines-button i:before,
.page-template-page-projets #header-outer[data-has-menu][data-format][data-padding][data-using-logo]>#top .slide-out-widget-area-toggle[data-custom-color="true"] a .lines-button i.lines:after,
.page-template-page-projets #header-outer[data-has-menu][data-format][data-padding][data-using-logo]>#top .slide-out-widget-area-toggle[data-custom-color="true"] .lines-button:after,
body.page-template-page-projets #header-outer .slide-out-widget-area-toggle[data-custom-color="true"] a .close-line {
    background-color: #333333 !important;
}

.page-template-page-projets #header-outer {
    mix-blend-mode: inherit !important;
}

/* Underline dots color adapts to page text color */
body.page-template-page-projets [data-lhe="animated_underline"] span:not(:has(*))::after {
    background:
        radial-gradient(circle at 50% 50%,
            var(--nectar-page-text-color, #333333) calc((var(--dot) / 2) + var(--nudge)),
            transparent calc((var(--dot) / 2) + var(--nudge) + 0.04px)) left bottom / var(--dot) var(--dot) round no-repeat !important;
}


/********************************************************************************
 * PROJETS — GRID VIEW
 ********************************************************************************/
.projets_grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 30px;
    margin: 0;
    padding: 0 30px;
    align-items: start;
}

.single-projets .projets_grid {
    padding: 0;
}

.projet_item {
    display: flex;
    flex-direction: column;
    height: auto;
    cursor: pointer;
}

.projet_item_thumbnail {
    display: block;
    overflow: hidden;
}

.projet_item img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;

    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.40s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

.projet_item:hover img {
    transform: scale(1.05);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.projet_item_text {
    padding: 10px 8px 16px 0;
    min-height: 52px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.projet_item_title {
    margin: 0;
    font-size: 1.3em;
    font-weight: 600;
    line-height: 0.95em;
}

.projet_item_title a {
    text-decoration: none;
    color: inherit;
}

.projet_item_location {
    font-size: 18px;
    color: #333333;
}

.projets_filters_reset::after {
    --u_offset: 0.52em;
}

/* Responsive grid */
@media (max-width: 1024px) {
    .projets_grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .projets_grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .projets_grid {
        grid-template-columns: 1fr;
        padding: 0 20px;
    }
}

/********************************************************************************
 * PROJETS — MAP VIEW (Leaflet)
 ********************************************************************************/

/* Wrapper fixed between toolbar and viewport bottom */
.projets_map_wrapper {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: var(--projets_map_top, 0px);
    /* set by JS from .projets_toolbar */
    z-index: 20;
    /* must be < toolbar (30) */
}

.projets_views {
    margin: 0 0 40px;
    min-height: 50vh;
}

.projets_view {
    visibility: hidden;
}

.projets_view.is_active {
    visibility: visible;
}

/* Leaflet canvas */
.projets_map_canvas {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #cbcbcb;
    /* override Leaflet default #ddd – matches greyscale of OSM water (#aad3df) */
}

.projets_map_canvas.nectar-leaflet-map[data-greyscale="1"]>.leaflet-map-pane .leaflet-tile-container {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

/* Custom zoom control (bottom-left) */
.projets_map_zoom_control {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 18px 18px;
}

.projets_map_zoom_button {
    width: 34px;
    height: 34px;
    padding: 0;

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

    border: 1px solid rgba(0, 0, 0, 0.8);
    background-color: #ffffff;
    color: #000000;

    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

.projets_map_zoom_button:hover {
    background-color: #000000;
    color: #ffffff;
}

.projets_map_zoom_button:focus-visible {
    outline: 2px solid #000000;
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .projets_map_zoom_control {
        margin: 0 0 14px 14px;
    }

    .projets_map_zoom_button {
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
}

/* Clusters */
.projets_map_cluster {
    background-color: #000000;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffffff;
    text-align: center;

    line-height: 36px;
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
}

.projets_map_cluster span {
    display: block;
    width: 36px;
    height: 36px;
}

/* Markers */
.projets_map_marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: #333333;
    box-shadow: 0 0 0 3px #d4d4d48a, 0 0 6px rgba(0, 0, 0, 0.4);
}

.projets_map_marker_is_active {
    background-color: #eecdb9;
}

/* Bring hovered popup above overlapping siblings */
.leaflet-popup:hover {
    z-index: 9999 !important;
}

/* Popups — reset Leaflet defaults */
.projets_map_popup_wrapper .leaflet-popup-content-wrapper {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    border: 0;
}

.projets_map_popup_wrapper .leaflet-popup-content {
    margin: 0;
}

.projets_map_popup_wrapper .leaflet-popup-tip {
    background: transparent;
    box-shadow: none;
}

.projets_map_popup_wrapper {
    margin-bottom: 7px !important;
}

/* Popup card */
.projets_map_popup_link {
    display: block;
    width: 210px;
    max-width: 80vw;
    text-decoration: none;
    color: inherit;
}

.projets_map_popup_card {
    width: 210px;
    background-color: #f2eee8;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    overflow: hidden;
}

.projets_map_popup_thumb {
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    position: relative;
}

.projets_map_popup_thumb_inner {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;

    transform-origin: center center;
    transform: scale(1);
    transition: transform 0.40s cubic-bezier(0.19, 1, 0.22, 1);
    will-change: transform;
}

.projets_map_popup_link:hover .projets_map_popup_thumb_inner {
    transform: scale(1.05);
    transition-duration: 1s;
    transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
}

.projets_map_popup_meta {
    padding: 10px 14px 12px;
    background-color: #f2eee8;
    line-height: 1.4;
}

.projets_map_popup_meta_title {
    margin: 0 0 4px !important;
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
}

.projets_map_popup_meta_location {
    margin: 0 !important;
    padding: 0;
    font-size: 11px;
    color: #777777;
}

@media (max-width: 768px) {
    .projets_map_popup_link {
        width: 180px;
    }

    .projets_map_popup_thumb {
        /* height: 110px; */
    }
}

/* Force display of custom zoom control container */
.leaflet-bottom {
    display: flex !important;
}

/********************************************************************************
 * SINGLE PROJET
 ********************************************************************************/
.single-projets .projet_item_location {
    color: #edeae3;
}

/********************************************************************************
 * HSP — HORIZONTAL SCROLL PROJET (desktop + mobile fallback)
 ********************************************************************************/

@media (min-width: 1024px) {
    .hsp_sticky {
        position: relative;
        width: 100vw;
        max-width: 100vw !important;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    .hsp_spacer {
        width: 1px;
        height: 1px;
        /* JS sets the real height */
    }

    .hsp_container {
        position: sticky;
        top: 0;
        height: 100vh;
        width: 100%;
        overflow: hidden;
    }

    .hsp_track {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        height: 100%;
        min-height: 0;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;

        /* Perf: isolate the moving layer as much as possible */
        /* contain: layout paint; */
    }

    .hsp_slide {
        box-sizing: border-box;
        flex: 0 0 auto;
        height: 100%;
        min-width: 0;
        position: relative;
        z-index: 0;
        overflow: hidden;

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

    .hsp_slide .inner-wrap.img-loaded {
        max-width: 75% !important;
        max-height: 75% !important;
    }

    .hsp_slide.split_screen_horizontal_scroll_projets {
        flex: 0 0 100vw;
        min-width: 100vw;
    }

    .hsp_slide.split_screen_horizontal_scroll_projets .row_col_wrap_12_inner {
        height: 100%;
        width: 100vw;
    }

    /* WPBakery/Salient resets inside track */
    .hsp_container .vc_row.full-width-content {
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: none !important;
    }

    .hsp_container .row-bg-wrap,
    .hsp_container .row-bg-wrap .row-bg {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
        left: 0 !important;
        right: auto !important;
    }

    .hsp_container .row-bg-wrap {
        z-index: -1;
        pointer-events: none;
    }

    /* Default: images at full available height */
    /* .hsp_container img:not(.loaded) {
        height: 100vh !important;
        width: auto !important;
        max-height: 100vh !important;
        max-width: none !important;
        display: block;
        object-fit: contain;
    } */

    .hsp_container img {
        height: 100vh !important;
        width: auto !important;
        max-height: 100vh !important;
        max-width: none !important;
        display: block;
        object-fit: contain;
        cursor: pointer;
    }

    /* If slide is your padding wrapper, enforce content-box sizing for inner wrappers */
    .hsp_container .hsp_slide.image_with_animation_padding_wrap .img-with-aniamtion-wrap,
    .hsp_container .hsp_slide.image_with_animation_padding_wrap .img-with-animation,
    .hsp_container .hsp_slide.image_with_animation_padding_wrap .img-with-aniamtion-wrap .inner,
    .hsp_container .hsp_slide.image_with_animation_padding_wrap .hover-wrap,
    .hsp_container .hsp_slide.image_with_animation_padding_wrap .hover-wrap-inner {
        height: 100% !important;
        max-height: 100% !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .hsp_container .hsp_slide.image_with_animation_padding_wrap img {
        height: 100% !important;
        max-height: 100% !important;
        width: auto !important;
        max-width: none !important;
        display: block;
        object-fit: contain;
    }

    /* Nectar wrappers: prevent width:100% forcing */
    .hsp_container .img-with-aniamtion-wrap,
    .hsp_container .img-with-animation,
    .hsp_container .img-with-aniamtion-wrap .inner,
    .hsp_container .hover-wrap,
    .hsp_container .hover-wrap-inner {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        line-height: 0 !important;
    }

    /* WPBakery video: remove ratio wrapper constraints */
    .hsp_container .wpb_video_widget,
    .hsp_container .wpb_video_widget .wpb_wrapper,
    .hsp_container .wpb_video_wrapper {
        width: auto !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        position: static !important;
    }

    .hsp_container .wpb_video_wrapper iframe,
    .hsp_container .wpb_video_wrapper video {
        position: static !important;
    }

    .hsp_container video,
    .hsp_container iframe {
        display: block;
        width: auto;
        height: auto;
        max-width: none;
        max-height: none;
    }

    .hsp_container .wpb_video_wrapper {
        line-height: 0 !important;
    }
}

/* Mobile fallback */
@media (max-width: 1023px) {
    .hsp_container {
        position: static;
        height: auto;
        overflow: visible;
    }

    .hsp_track {
        display: block;
        transform: none !important;
    }

    .hsp_slide {
        height: auto;
        min-width: auto;
        display: block;
        padding: 0;
        align-items: initial;
        justify-content: initial;
    }

    .hsp_container img {
        height: auto !important;
        width: 100% !important;
        max-height: none !important;
        max-width: 100% !important;
        object-fit: contain;
    }
}

/* =========================
   HSP Lightbox
   ========================= */
html.hsp_lightbox_is_open,
body.hsp_lightbox_is_open {
    overflow: hidden !important;
}

#hsp_lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
}

#hsp_lightbox.hsp_lightbox_is_visible {
    display: block;
}

.hsp_lightbox_backdrop {
    position: absolute;
    inset: 0;
    background: rgb(0 0 0 / 95%);
}

.hsp_lightbox_ui {
    position: relative;
    width: 100%;
    height: 100%;
}

.hsp_lightbox_topbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    pointer-events: auto;
    z-index: 9;
}

.hsp_lightbox_counter {
    pointer-events: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    letter-spacing: 0.02em;
    user-select: none;
}

.hsp_lightbox_actions {
    display: flex;
    gap: 10px;
    pointer-events: auto;
}

.hsp_lightbox_btn {
    width: 38px;
    height: 38px;
    border: 0;
    background: rgba(0, 0, 0, 0.45);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.92);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hsp_lightbox_btn:hover {
    background: rgba(0, 0, 0, 0.62);
}

.hsp_lightbox_btn svg {
    width: 34px;
    height: 34px;
    display: block;
}

.hsp_lightbox_btn svg path {
    fill: currentColor;
}

.hsp_lightbox_stage {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    justify-items: center;
    padding: 72px 0 34px;
}

.hsp_lightbox_viewport {
    width: min(1400px, calc(100vw - 160px));
    height: min(820px, calc(100vh - 140px));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.hsp_lightbox_img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.hsp_lightbox_nav,
body[data-button-style*="slightly_rounded"] button.hsp_lightbox_nav {
    pointer-events: auto;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.92);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.hsp_lightbox_nav:hover {
    background: rgba(255, 255, 255, 0.26);
}

.hsp_lightbox_nav svg {
    width: 30px;
    height: 30px;
}

.hsp_lightbox_nav svg path {
    fill: currentColor;
}

.hsp_lightbox_nav[disabled] {
    opacity: 0.35;
    cursor: default;
}

/* Zoom x1: on passe l’image à sa taille naturelle et on permet le pan */
.hsp_lightbox_is_zoomed .hsp_lightbox_viewport {
    overflow: auto;
    cursor: grab;
}

.hsp_lightbox_is_zoomed .hsp_lightbox_viewport:active {
    cursor: grabbing;
}

.hsp_lightbox_is_zoomed .hsp_lightbox_img {
    width: auto;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: unset;
}

/* Responsive: réduit les paddings */
@media (max-width: 1023px) {
    .hsp_lightbox_stage {
        grid-template-columns: 56px 1fr 56px;
    }

    .hsp_lightbox_viewport {
        width: calc(100vw - 120px);
        height: calc(100vh - 140px);
    }
}

/* Topbar sous la WP Admin Bar (quand elle existe) */
body.admin-bar .hsp_lightbox_topbar {
    top: var(--wp-admin--admin-bar--height, 32px);
}

/* Fallbacks selon tailles classiques de la barre admin */
@media (max-width: 782px) {
    body.admin-bar .hsp_lightbox_topbar {
        top: var(--wp-admin--admin-bar--height, 46px);
    }
}