/* Specific styles for the Lucky Cart project page */

.lucky-page-wrapper {
    position: relative;
    width: 100%;
    height: 3470px;
    background-color: #294452;
    overflow: hidden; /* Must clip any absolute children beyond the 1728px boundary */
    margin: 0 auto;
}

.lucky-layout-container {
    position: relative;
    width: 1728px;
    height: 3470px;
    margin: 0 auto;
}

/* Header Adjustments for Dark Page */
.site-header {
    background-color: rgba(41, 68, 82, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
}

.site-header .menu-burger .burger-bar {
    background-color: #ffffff !important;
}

.site-header .main-nav a {
    color: #ffffff;
}

.site-header .main-nav a:hover {
    background-color: #ffffff;
    color: #294452;
}

.site-header .btn-contact {
    color: #ffffff;
}

body.lucky-cart-theme .site-header .btn-contact:hover,
body.lucky-cart-theme .site-header .btn-contact:hover span {
    background-color: #ffffff !important;
    color: #294452 !important;
}

/* SECTION 1: HERO (NEW FLEX Figma LAYOUT) */
.lc-hero-section-new {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 86px;
    width: 1648.48px;
    height: 523.65px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0px;
    gap: 38px;
    pointer-events: none;
    z-index: 10;
}

.lc-hero-content-new {
    width: 620px;
    height: 330px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding: 0px;
    gap: 21px;
    color: #FFFFFF;
    font-family: 'Source Code Pro', monospace;
    pointer-events: auto;
    flex: none;
    order: 0;
    flex-grow: 0;
}

.lc-hero-desc-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 21px;
    width: 100%;
}

.lc-hero-content-new h1 {
    font-size: 40px;
    line-height: 50px;
    font-weight: 700;
    margin: 0;
    color: #FFFFFF;
}

.lc-hero-content-new p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    opacity: 0.9;
}

.lc-hero-tags-new {
    font-size: 14px;
    font-weight: 500;
    color: #FFF26B;
}

/* Back button (BOUTON TOUT VOIR) */
.lc-back-button-new {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    width: 46px;  /* Figma width */
    height: 19px; /* Figma height */
    cursor: pointer;
    transition: transform 0.3s ease;
    pointer-events: auto;
    flex: none;
    order: 1;
    flex-grow: 0;
    margin-top: 21px; /* Space between tags and button */
}

.lc-back-button-new:hover {
    transform: translateY(4px);
}

.lc-back-button-new img {
    width: 24px;
    height: 40.62px;
    filter: brightness(0) invert(1); /* Render SVG as white */
    transform: rotate(0deg); /* Oriented downwards */
    object-fit: contain;
}

/* Phone Mockups (mea) Container */
.lc-mea-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 3px;
    width: 990.48px;
    height: 523.65px;
    flex: none;
    order: 2;
    flex-grow: 0;
    pointer-events: auto;
}

/* Outer wrapper for carousel + arrows */
.lc-mea-wrapper {
    display: contents; /* transparent on desktop — no layout impact */
}

/* Nav arrows: hidden on desktop */
.lc-mea-arrow {
    display: none;
}

/* Slider track for mobile carousel */
.lc-mea-slider-track {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    padding: 0px;
    gap: 3px;
    width: 100%;
    height: 100%;
    pointer-events: auto !important;
}

.lc-phone-1 {
    width: 345.44px;
    height: 523.65px;
    background: url('../09-Lucky%20cart/hero/mea-1.webp') no-repeat center/contain;
    flex: none;
    order: 0;
    flex-grow: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto !important;
}

.lc-phone-2 {
    width: 303.93px;
    height: 513.15px;
    background: url('../09-Lucky%20cart/hero/mea-2.webp') no-repeat center/contain;
    flex: none;
    order: 1;
    flex-grow: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto !important;
}

.lc-phone-3 {
    width: 335.11px;
    height: 521.96px;
    background: url('../09-Lucky%20cart/hero/mea-3.webp') no-repeat center/contain;
    flex: none;
    order: 2;
    flex-grow: 0;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
    cursor: pointer;
    pointer-events: auto !important;
}

@media (hover: hover) {
    .lc-phone-1, .lc-phone-2, .lc-phone-3 {
        cursor: none;
    }
}

/* Custom brand cursor */
.lc-brand-cursor, .lc-brand-cursor * {
    pointer-events: none !important;
}

.lc-brand-cursor {
    position: fixed;
    top: 0;
    left: 0;
    width: 90px;
    height: 90px;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.15);
    border-radius: 50%;
    transition: transform 0.12s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.2s ease;
    opacity: 0;
    transform: scale(0);
    will-change: transform;
    backdrop-filter: blur(6px);
}

.lc-brand-cursor.active {
    opacity: 1;
}

.lc-brand-cursor img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Decorative White Dot */
.lc-ellipse-3 {
    position: absolute;
    left: 584.34px;
    top: 492.72px;
    width: 21.05px;
    height: 20.43px;
    background: #FFFEFF;
    border-radius: 50%;
}

/* BLOC 2: PARTNERS LOGO BAR CONTAINER */
.lc-bloc2-container {
    position: absolute;
    left: 0px;
    top: 726px;
    width: 1728px;
    height: 131.37px;
    background: transparent;
    z-index: 2;
    overflow: hidden; /* Hide the scrolling overflow */
}

.lc-logo-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    width: max-content;
    height: 113.37px;
    position: absolute;
    top: 18px; /* 874px - 726px - 130px shift => 18px relative to container */
    left: 48px; /* Left offset from Figma */
    pointer-events: auto;
}

.lc-logo-track {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 71px; /* Gap from Figma specification */
    padding-right: 71px; /* Guarantee identical distance between the two tracks */
    animation: lc-scroll-logos 30s linear infinite;
    flex-shrink: 0;
}

@keyframes lc-scroll-logos {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(-100%, 0, 0);
    }
}

.lc-logo-bar img {
    object-fit: contain;
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

/* Individual Logo Sizing based on Figma specifications (Intermarché and E.Leclerc scaled up) */
.lc-logo-bar img:nth-child(6n+1) { width: 140.98px; height: 112.98px; margin-right: 75px; } /* Carrefour */
.lc-logo-bar img:nth-child(6n+2) { width: 194px; height: 113.37px; }    /* General Mills */
.lc-logo-bar img:nth-child(6n+3) { width: 340px; height: 75px; }        /* Intermarché (scaled up from 280x62) */
.lc-logo-bar img:nth-child(6n+4) { width: 248px; height: 57px; margin-right: 35px; }        /* Mondelez */
.lc-logo-bar img:nth-child(6n+5) { width: 248px; height: 95px; }        /* Système U */
.lc-logo-bar img:nth-child(6n+6) { width: 390px; height: 103px; margin-left: -50px; margin-right: -30px; }        /* E.Leclerc (scaled up from 340x90) */

.lc-logo-bar img:hover {
    opacity: 1;
}

.lc-logo-bar-gradient-left {
    position: absolute;
    width: 250px;
    height: 131px;
    left: 0px;
    top: 0px;
    background: linear-gradient(90deg, #294452 0%, rgba(41, 68, 82, 0) 100%);
    z-index: 3;
    pointer-events: none;
}

.lc-logo-bar-gradient-right {
    position: absolute;
    width: 250px;
    height: 131px;
    right: 0px; /* Anchored to right */
    top: 0px;
    background: linear-gradient(270deg, #294452 0%, rgba(41, 68, 82, 0) 100%);
    z-index: 3;
    pointer-events: none;
}

/* BLOC 3: DOTS GRID & LAPTOP & WHEEL GAME CONTAINER */
.lc-bloc3-container {
    position: absolute;
    width: 1399px;
    height: 2530px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 945px;
    z-index: 4;
}

/* Dots Grid Background inside Bloc 3 Container */
.fond-lucky-cart-2 {
    position: absolute;
    width: 1137.28px;
    height: 1446.86px;
    left: 98.13px; /* 292.13px - 194px */
    top: 0px; /* 1075px - 1075px */
    pointer-events: none;
    z-index: 1;
}

.lc-flipped-grid {
    position: absolute;
    width: 100%;
    height: 713px;
    top: 600px;
    left: 0;
    transform: scaleY(-1);
    pointer-events: none;
}

/* Columns of Bloc 3 (absolute positions relative to fond-lucky-cart-2) */
.lc-frame-b3 {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 44.65px;
    width: 18.29px;
    pointer-events: none;
}

.lc-frame-b3-1  { left: 0px;      top: 64px; }
.lc-frame-b3-2  { left: 89.91px;  top: 128.09px; }
.lc-frame-b3-3  { left: 179.82px; top: 1px; }
.lc-frame-b3-4  { left: 269.73px; top: 128.09px; }
.lc-frame-b3-5  { left: 360.64px; top: 128.09px; }
.lc-frame-b3-6  { left: 459.54px; top: 63px; }
.lc-frame-b3-7  { left: 559.45px; top: 0px; }
.lc-frame-b3-8  { left: 659.36px; top: 128.09px; }
.lc-frame-b3-9  { left: 753.87px; top: 0px; }
.lc-frame-b3-10 { left: 846.27px; top: 128.09px; }
.lc-frame-b3-11 { left: 939.18px; top: 128.09px; }
.lc-frame-b3-12 { left: 1034.08px; top: 0px; }
.lc-frame-b3-13 { left: 1118.99px; top: 128.09px; }

.lc-dot {
    width: 18.29px;
    height: 18.29px;
    border-radius: 50%;
    flex: none;
    align-self: stretch;
    flex-grow: 0;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}


/* Individual dot floating animations to create a completely random and organic cloud effect */
@keyframes lc-float-y {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -30px, 0); }
}
@keyframes lc-float-diag {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(-20px, 25px, 0); }
}
@keyframes lc-float-x {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(25px, -15px, 0); }
}

.lc-frame-b3:nth-child(3n+1) .lc-dot:nth-child(3n+1) { animation: lc-float-y 5.5s ease-in-out infinite alternate; animation-delay: -1.2s; }
.lc-frame-b3:nth-child(3n+1) .lc-dot:nth-child(3n+2) { animation: lc-float-diag 7.5s ease-in-out infinite alternate; animation-delay: -2.8s; }
.lc-frame-b3:nth-child(3n+1) .lc-dot:nth-child(3n+3) { animation: lc-float-x 6.5s ease-in-out infinite alternate; animation-delay: -4.4s; }

.lc-frame-b3:nth-child(3n+2) .lc-dot:nth-child(3n+1) { animation: lc-float-x 7.2s ease-in-out infinite alternate; animation-delay: -1.9s; }
.lc-frame-b3:nth-child(3n+2) .lc-dot:nth-child(3n+2) { animation: lc-float-y 6.8s ease-in-out infinite alternate; animation-delay: -3.7s; }
.lc-frame-b3:nth-child(3n+2) .lc-dot:nth-child(3n+3) { animation: lc-float-diag 8.4s ease-in-out infinite alternate; animation-delay: -0.8s; }

.lc-frame-b3:nth-child(3n+3) .lc-dot:nth-child(3n+1) { animation: lc-float-diag 6.7s ease-in-out infinite alternate; animation-delay: -4.9s; }
.lc-frame-b3:nth-child(3n+3) .lc-dot:nth-child(3n+2) { animation: lc-float-x 8.2s ease-in-out infinite alternate; animation-delay: -1.5s; }
.lc-frame-b3:nth-child(3n+3) .lc-dot:nth-child(3n+3) { animation: lc-float-y 7.6s ease-in-out infinite alternate; animation-delay: -3.1s; }

/* Laptop Elements relative to Wrapper */
.lc-laptop-wrapper-new {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 245px;
    width: 1104px;
    height: 635px;
    z-index: 3;
    cursor: pointer;
}

.lc-laptop-mockup {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url('../09-Lucky%20cart/Bloc-2/mockup-ordi-LC.webp') no-repeat center/contain;
    z-index: 3;
    pointer-events: none;
}

.lc-laptop-bg {
    position: absolute;
    width: 860px;
    height: 557px;
    left: 118px;
    top: 24px;
    background: #FFFFFF;
    z-index: 1;
}

.lc-laptop-video-container {
    position: absolute;
    width: 876.57px;
    height: 518px;
    left: 118px;
    top: 48.67px;
    z-index: 2;
    overflow: hidden;
    pointer-events: auto;
    cursor: pointer;
}

.lc-laptop-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lc-video-click-overlay {
    position: absolute;
    width: 876.57px;
    height: 518px;
    left: 118px;
    top: 48.67px;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    pointer-events: auto;
}

/* Interactive Wheel Game relative to Bloc 3 Container */
.lc-wheel-game {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0px;
    width: 355px;
    height: auto;
    gap: 24px;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 1090px;
    z-index: 6;
}

.lc-game-title {
    font-family: 'Source Code Pro', monospace;
    font-size: 24px;
    font-weight: 600;
    color: #FFFFFF;
    text-align: center;
    margin: 0;
}

.lc-wheel-video {
    width: 355px;
    height: 354px;
    object-fit: cover;
    border: 12px solid #FFFFFF;
    border-radius: 16px;
    box-shadow: 0px 24px 48px rgba(0, 0, 0, 0.15);
    background-color: #FFFFFF;
    box-sizing: border-box;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
}

.lc-wheel-cta-container {
    width: 122px;
    height: 60px;
    position: relative;
    flex: none;
    order: 1;
    flex-grow: 0;
}

.lc-wheel-cta {
    position: absolute;
    width: 102px;
    height: 32px;
    left: 10.5px;
    top: 23px;
    background: #F94969;
    border-radius: 17px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    text-decoration: none;
    font-family: 'Source Code Pro', monospace;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.lc-wheel-cta:hover {
    transform: scale(1.05);
    background-color: #e23d5b;
}

/* SECTION 4: BOTTOM GALLERY SECTION (ABSOLUTELY POSITIONED FIGMA SPEC) */
.lc-bottom-gallery-new {
    position: absolute;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 1680px;
    width: 1728px;
    height: 800px;
    z-index: 5;
    pointer-events: auto;
}

.lc-gallery-card {
    position: absolute;
    width: 472px;
    height: 328px;
    background-color: #D9D9D9;
    border-radius: 19px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.lc-gallery-bg {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.6s ease;
}

/* Miniature "Illustration en interne" : dézoomée pour voir l'image entière */
.lc-gallery-bg-zoom-out {
    background-size: 65% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.lc-gallery-card:hover .lc-gallery-bg-zoom-out {
    transform: none !important; /* Pas de zoom au hover sur cette card */
}

@media (hover: hover) {
    .lc-gallery-card:hover {
        transform: translateY(-8px);
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    }

    .lc-gallery-card:hover .lc-gallery-bg {
        transform: scale(1.05);
    }
}

.lc-gallery-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    top: 0; /* extend to full card height so dark scrim covers everything */
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background: linear-gradient(180deg, rgba(16, 26, 32, 0) 40%, rgba(16, 26, 32, 0.92) 100%);
    color: #ffffff;
    opacity: 1;
    transition: background 0.35s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .lc-gallery-card:hover .lc-gallery-overlay {
        background: linear-gradient(180deg, rgba(16, 26, 32, 0.45) 0%, rgba(16, 26, 32, 0.97) 100%);
    }
}

.lc-gallery-title {
    font-family: 'Source Code Pro', monospace;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.lc-gallery-desc {
    font-family: 'Source Code Pro', monospace;
    font-size: 12px;
    opacity: 0.8;
}

/* Absolute positions of the 6 Cards from Figma specs */
.lc-card-pos-1 { left: 110px;  top: 0px; }      /* Rectangle 50: left: 110, top: 2176 */
.lc-card-pos-2 { left: 630px;  top: 0px; }      /* Rectangle 51: left: 630, top: 2176 */
.lc-card-pos-3 { left: 1145px; top: 0px; }      /* Rectangle 52: left: 1145, top: 2176 */
.lc-card-pos-4 { left: 110px;  top: 368px; }    /* Row 2: 2176 + 328 + 40 (gap) = 2544 */
.lc-card-pos-5 { left: 630px;  top: 368px; }
.lc-card-pos-6 { left: 1145px; top: 368px; }

/* Responsive scaling for MacBook Pro 16" (1728px reference width) */
/* Desktop: scale the whole 1728px layout down proportionally, centered */
@media (min-width: 1025px) and (max-width: 1728px) {
    .app-wrapper {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        position: relative;
    }
    .lucky-page-wrapper {
        position: relative !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: calc(3470px * (100vw / 1728px)) !important;
        transform: none !important;
    }
    .lucky-layout-container {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) scale(calc(100vw / 1728px)) !important;
        transform-origin: top center !important;
        margin: 0 !important;
        height: 3470px !important;
    }
}

@media (max-width: 1024px), (pointer: coarse) {
    .app-wrapper {
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        overflow-x: clip !important;
        overflow-y: visible !important;
        position: relative !important;
    }
}

/* Dark Theme Adjustments for Page Body and Footer */
body.lucky-cart-theme {
    background-color: #294452 !important;
}

body.lucky-cart-theme .site-footer {
    color: #ffffff !important;
    max-width: 100% !important;
    padding: 70px 41px 70px !important;
}

body.lucky-cart-theme .site-footer a {
    color: #ffffff !important;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

body.lucky-cart-theme .site-footer a:hover {
    opacity: 1;
}

/* Apply light/white filters to dark footer assets */
body.lucky-cart-theme .site-footer .contact-icon,
body.lucky-cart-theme .site-footer .social-icon {
    filter: brightness(0) invert(1);
}

body.lucky-cart-theme .site-footer .footer-line-img {
    filter: brightness(0) invert(1);
    opacity: 0.2;
}



/* --- PREMIUM POPUP MODAL STYLES --- */
.lc-popup-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.lc-popup-modal.visible {
    opacity: 1;
    pointer-events: auto;
}

.lc-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(16, 26, 32, 0.7);
    backdrop-filter: blur(12px);
    z-index: 1;
}

.lc-popup-content {
    position: relative;
    width: 90%;
    max-width: 960px;
    height: 80vh;
    max-height: 600px;
    background: #203540;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    overflow: hidden;
    z-index: 2;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
}

.lc-popup-modal.visible .lc-popup-content {
    transform: scale(1) translateY(0);
}

.lc-popup-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #ffffff;
    font-size: 28px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: background-color 0.3s, transform 0.3s;
}

.lc-popup-close:hover {
    background-color: #F94969;
    transform: rotate(90deg);
}

.lc-popup-body {
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 100%;
    transition: opacity 0.15s ease-in-out;
}

.lc-popup-image-container {
    flex: 1.2;
    height: 100%;
    background-color: #1a2c35;
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid rgba(255, 255, 255, 0.05);
    /* Custom scrollbar */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.2) transparent;
}

.lc-popup-image-container.has-zoomed-img {
    overflow: hidden !important;
}

.lc-popup-image-container::-webkit-scrollbar {
    width: 4px;
}

.lc-popup-image-container::-webkit-scrollbar-track {
    background: transparent;
}

.lc-popup-image-container::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.lc-popup-image-container img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

.lc-popup-image-container img.zoomed,
.lc-popup-image-container .lc-popup-multi-img.zoomed {
    transform: scale(2);
    z-index: 5;
    touch-action: none;
}

.lc-popup-info {
    flex: 1;
    padding: 50px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    font-family: 'Source Code Pro', monospace;
    overflow-y: auto;
}

.lc-popup-info h2 {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 20px 0;
    color: #FFF26B;
}

.lc-popup-info p {
    font-size: 14px;
    line-height: 1.8;
    margin: 0;
    opacity: 0.9;
    color: #e5e5e5;
}

/* Responsive adjustment for popup details */
@media (max-width: 768px) {
    .lc-popup-body {
        flex-direction: column;
    }
    .lc-popup-image-container {
        flex: 1;
        height: 50%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }
    .lc-popup-info {
        flex: 1;
        padding: 30px 20px;
    }
    .fond-lucky-cart-2 {
        transform: translateX(-50%) scale(0.68) !important;
    }
}

/* --- FULLWIDTH POPUP MODE (image only, no text panel) --- */
.lc-popup-modal.lc-popup-fullwidth .lc-popup-info {
    display: none;
}

.lc-popup-modal.lc-popup-fullwidth .lc-popup-image-container {
    flex: 1;
    border-right: none;
}

.lc-popup-modal.lc-popup-fullwidth .lc-popup-content {
    max-width: 1100px;
}

/* Multi-image stacked scroll */
.lc-popup-multi-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: unset;
}

/* Glassmorphism Navigation Arrows inside Popup Modal */
.lc-popup-nav-arrow {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2500;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.05) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

.lc-popup-nav-arrow::before {
    content: '';
    position: absolute;
    top: -20px;
    bottom: -20px;
    left: -20px;
    right: -20px;
    border-radius: 50%;
}

.lc-popup-modal.visible .lc-popup-nav-arrow {
    opacity: 1;
    visibility: visible;
}

.lc-popup-prev {
    left: 40px;
}

.lc-popup-next {
    right: 40px;
}

.lc-popup-nav-arrow:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.45) 0%, rgba(255, 255, 255, 0.15) 100%);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.lc-popup-prev:hover {
    transform: translateY(-50%) scale(1.08) translateX(-2px);
}

.lc-popup-next:hover {
    transform: translateY(-50%) scale(1.08) translateX(2px);
}

.lc-popup-nav-arrow svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

/* Responsive adjustment for popup navigation */
@media (max-width: 1024px), (pointer: coarse) {
    .lc-popup-prev {
        left: 15px;
    }
    .lc-popup-next {
        right: 15px;
    }
    .lc-popup-nav-arrow {
        width: 48px;
        height: 48px;
    }
    .lc-popup-nav-arrow svg {
        width: 20px;
        height: 20px;
    }
}

/* Video display inside popup */
.lc-popup-video {
    width: 100%;
    height: auto;
    max-height: 100%;
    display: block;
    object-fit: contain;
    background: #000;
}

/* Custom video mode popup layout (vertical stacked on all screens) */
.lc-popup-modal.lc-popup-video-mode .lc-popup-body {
    flex-direction: column !important;
}

.lc-popup-modal.lc-popup-video-mode .lc-popup-image-container {
    flex: 1.8 !important;
    width: 100% !important;
    height: auto !important;
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: #000000 !important;
}

.lc-popup-modal.lc-popup-video-mode .lc-popup-info {
    flex: 1 !important;
    width: 100% !important;
    padding: 24px 30px !important;
    box-sizing: border-box !important;
    justify-content: flex-start !important;
    overflow-y: auto !important;
}

.lc-popup-modal.lc-popup-video-mode .lc-popup-info h2 {
    font-size: 20px !important;
    margin-bottom: 8px !important;
}

.lc-popup-modal.lc-popup-video-mode .lc-popup-info p {
    font-size: 13px !important;
    line-height: 1.6 !important;
}

/* Tablet & Mobile Phone Responsive Overrides (Rocabruna style) */
@media (max-width: 1024px), (pointer: coarse) {
    /* Mobile Header Dropdown Text Colors Fix */
    .site-header .main-nav {
        background-color: #294452 !important;
        border-top: none !important;
        box-shadow: none !important;
    }
    .site-header .main-nav a {
        color: #ffffff !important;
    }
    .site-header .main-nav a:hover {
        background-color: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }
    .site-header .btn-contact {
        color: #ffffff !important;
    }
    .site-header .btn-contour path {
        fill: #ffffff !important;
    }

    @media (pointer: coarse) {
        .lc-brand-cursor {
            display: none !important;
        }
    }

    html, body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        position: relative !important;
    }

    .lucky-page-wrapper {
        transform: none !important;
        width: 100% !important;
        max-width: 100vw !important;
        height: auto !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        padding: 20px 5vw 60px !important;
        text-align: center !important;
        box-sizing: border-box !important;
        /* Only clip horizontal overflow to prevent side-scrolling.
           overflow-y must stay visible so the full column scrolls correctly on tablet. */
        overflow-x: clip !important;
        overflow-y: visible !important;
        position: relative !important;
        /* Isolate stacking context so absolute children can't bleed outside */
        isolation: isolate !important;
    }

    .lucky-layout-container {
        display: contents !important;
    }
}

/* 2. MOBILE & TABLET (up to 1024px) - Vertical Stack Layout */
@media (max-width: 1024px), (pointer: coarse) {
    .lc-hero-section-new {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        margin: 30px auto !important;
        overflow: visible !important;
        gap: 30px !important;
        left: auto !important;
        transform: none !important;
        top: auto !important;
    }

    .lc-hero-content-new {
        position: relative !important;
        width: 100% !important;
        max-width: 480px !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 15px !important;
        color: #FFFFFF !important;
        order: 0 !important;
    }

    .lc-hero-content-new h1 {
        font-size: clamp(30px, 8vw, 40px) !important;
        color: #FFFFFF !important;
        text-align: center !important;
        margin: 0 !important;
        font-family: 'Source Code Pro', monospace !important;
        width: 100% !important;
    }

    .lc-hero-desc-card {
        display: contents !important;
    }

    .lc-hero-desc-card p {
        width: 100% !important;
        font-size: clamp(12px, 3.2vw, 14px) !important;
        line-height: 1.6em !important;
        color: #FFFFFF !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .lc-hero-tags-new {
        display: block !important;
        width: 100% !important;
        color: #FFF26B !important;
        font-size: clamp(10px, 2.5vw, 12px) !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    .lc-back-button-new {
        display: none !important;
    }

    .lc-mea-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px !important;
        width: 100% !important;
        order: 1 !important;
        pointer-events: auto !important;
    }

    .lc-mea-container {
        position: relative !important;
        flex: 1 !important;
        width: 0 !important; /* let flex do the sizing */
        max-width: 290px !important;
        aspect-ratio: 310 / 483 !important;
        margin: 0 auto !important;
        overflow: hidden !important;
        order: unset !important;
        display: block !important;
    }

    /* Nav arrows — glassmorphism style, visible on mobile/tablet */
    .lc-mea-arrow {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        width: 38px !important;
        height: 38px !important;
        border-radius: 50% !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 100%) !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
        color: #ffffff !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        transition: background 0.2s ease, transform 0.2s ease !important;
        box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    }

    .lc-mea-arrow:active {
        transform: scale(0.92) !important;
        background: linear-gradient(135deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0.12) 100%) !important;
    }

    .lc-mea-slider-track {
        display: flex !important;
        flex-direction: row !important;
        width: 300% !important;
        height: 100% !important;
        transition: transform 0.6s cubic-bezier(0.25, 1, 0.3, 1) !important;
    }

    .lc-phone-1,
    .lc-phone-2,
    .lc-phone-3 {
        width: 33.3333% !important;
        height: 100% !important;
        flex-shrink: 0 !important;
        display: block !important;
        pointer-events: auto !important;
    }

    /* Partners logos bar */
    .lc-bloc2-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        height: 131.37px !important;
        margin: 40px 0 80px 0 !important;
    }

    .lc-logo-bar {
        left: 0 !important;
    }

    /* Laptop & Dots container */
    .lc-bloc3-container {
        position: relative !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        left: auto !important;
        top: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 40px !important;
        margin: 30px auto 40px auto !important;
        overflow: visible !important;
    }

    .fond-lucky-cart-2 {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) scale(0.9) !important;
        transform-origin: top center !important;
        top: 0 !important;
        width: 1137.28px !important;
        height: 1446.86px !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }

    .lc-dot {
        width: 12px !important;
        height: 12px !important;
    }

    .lc-flipped-grid {
        display: block !important;
        position: absolute !important;
        width: 100% !important;
        height: 713px !important;
        top: 600px !important;
        left: 0 !important;
        transform: scaleY(-1) !important;
        pointer-events: none !important;
    }

    /* Laptop Frame wrapper scaling */
    .lc-laptop-wrapper-new {
        position: relative !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        left: auto !important;
        transform: none !important;
        top: auto !important;
        width: 100% !important;
        max-width: 800px !important;
        aspect-ratio: 1104 / 635 !important;
        height: auto !important;
        margin: 0 auto !important;
        align-self: center !important;
        cursor: pointer !important;
        transition: transform 0.2s ease !important;
        z-index: 5 !important;
    }

    .lc-laptop-wrapper-new:active {
        transform: scale(0.98) !important;
    }

    .lc-laptop-mockup {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 3 !important;
        background-size: contain !important;
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 100% !important;
        pointer-events: none !important;
    }

    .lc-laptop-bg {
        display: none !important;
    }

    .lc-laptop-video-container {
        position: absolute !important;
        left: 10.69% !important;
        top: 7.66% !important;
        width: 79.4% !important;
        height: 81.57% !important;
        z-index: 2 !important;
        border-radius: 2px !important;
    }

    .lc-video-click-overlay {
        position: absolute !important;
        left: 10.69% !important;
        top: 7.66% !important;
        width: 79.4% !important;
        height: 81.57% !important;
        z-index: 10 !important;
        border-radius: 2px !important;
    }

    /* Wheel Game */
    .lc-wheel-game {
        position: relative !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 355px !important;
        margin: 0 auto !important;
    }

    /* Bottom Gallery Cards: Stacked and centered */
    .lc-bottom-gallery-new {
        position: relative !important;
        transform: none !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 980px !important;
        height: auto !important;
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        margin: 110px auto 40px auto !important;
        padding: 0 10px !important;
        box-sizing: border-box !important;
    }

    .lc-gallery-card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 472 / 328 !important;
        height: auto !important;
        margin: 0 !important;
        /* Ensure taps/clicks work on all mobile browsers */
        pointer-events: auto !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
        -webkit-tap-highlight-color: rgba(255, 242, 107, 0.15) !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }

    /* Overlay texte toujours visible sur mobile/tablette */
    .lc-gallery-overlay {
        opacity: 1 !important;
    }

    /* Images normales : cover */
    .lc-gallery-bg {
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
    }

    /* Exception : la card "Illustration en interne" reste dézoomée */
    .lc-gallery-bg-zoom-out {
        background-size: 65% !important;
    }

    /* Snappy transition and touch optimization */
    .lc-back-button-new,
    .lc-back-button-new img,
    .lc-gallery-card,
    .popup-nav-btn {
        transition-duration: 200ms !important;
        transition-delay: 0s !important;
        touch-action: manipulation !important;
    }

    .lc-back-button-new:active,
    .popup-nav-btn:active {
        opacity: 0.65 !important;
        transform: scale(0.95) !important;
        transition: none !important;
    }
} /* end @media (max-width: 1024px) */

/* Phone format: gallery switches to 1 column and stacks vertically */
@media (max-width: 767px) {
    .lucky-page-wrapper {
        padding: 20px 3vw 60px !important; /* Less side padding on small screens to make visual mockups larger */
    }

    .lc-bloc2-container {
        margin-bottom: 40px !important;
    }

    /* Laptop mockup: fill nearly full width on small phones */
    .lc-laptop-wrapper-new {
        max-width: 95vw !important;
        width: 95vw !important;
    }

    .lc-bottom-gallery-new {
        grid-template-columns: 1fr !important;
        max-width: 400px !important;
    }

    .fond-lucky-cart-2 {
        transform: translateX(-50%) scale(0.52) !important;
        top: -30px !important;
    }

    .lc-dot {
        width: 22px !important;
        height: 22px !important;
    }
}