/* Agrandir le logo du header sur cette page */
.main-logo {
    height: 58px !important; /* Agrandit le logo (d'origine 48px) */
}

.roca-project-container {
    position: relative;
    z-index: 10;
    background-color: #ffffff;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 90px 20px 100px;
    display: flex;
    flex-direction: column;
    gap: 90px;
    box-shadow: 0px -15px 30px rgba(0, 0, 0, 0.03); /* Subtle shadow for depth */
}

/* SECTION 1: HERO (FIGMA PRECISE LAYOUT) */
.roca-hero-figma {
    position: sticky;
    top: 0;
    width: 100%;
    height: 902px;
    overflow: visible;
    background: #EDEDE4;
    z-index: 1;
}

.roca-hero-content {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 1525px;
    height: 902px;
    margin: 0 auto;
    transform-origin: top center;
}

.roca-fond {
    position: absolute;
    width: 1525px;
    height: 902px;
    left: 0;
    top: -8px;
    background-image: url('../02-Rocabruna/Fond-rocabruna.png');
    background-size: cover;
    background-position: center;
    transform: scale(1.1); /* Zoom de 10% sur l'image de fond */
    transform-origin: center center;
}

.roca-icones {
    position: absolute;
    width: 1480px;
    height: 859px;
    left: -25.41px;
    top: 35px;
    background-image: url('../02-Rocabruna/Icones-rocabruna.webp');
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 1;
}

.roca-logo-centre {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 40px;
    z-index: 1;
    width: 480px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.roca-logo-centre img {
    width: 100%;
    height: auto;
    display: block;
}

.bouton-tout-voir {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 113px;
    width: 22px;
    height: 13px;
    margin-top: -5px;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.bouton-tout-voir img {
    width: 22px;
    height: 13px;
    display: block;
}

.roca-descriptif-figma:hover .bouton-tout-voir {
    transform: translateY(8px);
    filter: invert(53%) sepia(0%) saturate(0%) brightness(90%) contrast(85%);
}

.roca-bouteilles {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0px;
    gap: 486px;
    position: absolute;
    width: 1056px;
    height: 713px;
    left: 234.09px;
    top: 86px;
    z-index: 2;
}

@keyframes wiggle-bottle {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    85% { transform: rotate(1deg); }
}

@keyframes wiggle-bottle-hover {
    0%, 100% { transform: rotate(0deg); }
    15% { transform: rotate(-3deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-2deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    85% { transform: rotate(1deg); }
}

.roca-bouteille-1 {
    width: 287px;
    height: 713px;
    background-image: url('../02-Rocabruna/bouteille-péché_mignon.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    animation: wiggle-bottle 1.2s ease-in-out 0.3s both;
}

.roca-bouteille-2 {
    width: 283px;
    height: 713px;
    background-image: url('../02-Rocabruna/bouteille-cuisinier_en_herbe.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease;
    cursor: pointer;
    animation: wiggle-bottle 1.2s ease-in-out 0.5s both;
}

.roca-bouteille-1.wiggle-active, .roca-bouteille-2.wiggle-active {
    animation: wiggle-bottle 1.2s ease-in-out both !important;
}

.roca-bouteille-1.wiggle-active:hover, .roca-bouteille-2.wiggle-active:hover {
    animation: wiggle-bottle 1.2s ease-in-out both !important;
}

.roca-bouteille-1:hover, .roca-bouteille-2:hover {
    animation: wiggle-bottle-hover 1s ease-in-out forwards;
}

.roca-intro-figma {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 0px;
    gap: 10px;
    position: absolute;
    width: 27%;
    min-width: 280px;
    height: auto;
    left: 36.5%;
    top: 32%;
    z-index: 100;
}

.roca-descriptif-figma {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 25px 20px;
    box-sizing: border-box;
    gap: 10px;
    width: 100%;
    height: auto;
    background: #FFFFFF;
    border: 1px solid #000000;
    border-radius: 0;
    cursor: pointer;
}

.roca-text-content {
    width: 100%;
}

.roca-descriptif-figma p {
    font-family: 'Source Code Pro', monospace;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.4em;
    color: #000000;
    width: 100%;
    margin: 0;
    text-align: left;
}

.roca-descriptif-figma strong {
    font-weight: 600;
    font-size: 14px;
}

.bouton-tout-voir img {
    width: 22px;
    height: 13px;
    transform: rotate(0deg);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.bouton-tout-voir:hover img {
    transform: translateY(8px);
    opacity: 0.6;
}

/* Descriptif mobile masqué par défaut sur grand écran */
.roca-descriptif-mobile {
    display: none;
}

/* Main Visuals in Hero */
.roca-visuals {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    height: 100%;
    z-index: 5;
}

.roca-hero-image {
    width: 100%;
    max-width: 900px;
    object-fit: contain;
    /* Optional hovering effect */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.roca-visuals:hover .roca-hero-image {
    transform: scale(1.02);
}

/* SECTION 2: GRID */
.roca-grid-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 1431px;
    margin: 0 auto;
}

.roca-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px; /* Figma shows gap around 14px between 710px cards in 1434px container */
    width: 100%;
}

.roca-card {
    position: relative;
    width: 100%;
    aspect-ratio: 710 / 532.5;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

.roca-card-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.roca-card:hover .roca-card-bg {
    transform: scale(1.02);
}

/* Desktop seulement : scaling par paliers fixes (ne s'appliquent PAS sur tablette ≤ 1024px) */
@media (min-width: 1025px) and (max-width: 1600px) {
    .roca-hero-content {
        transform: translateX(-50%) scale(0.9);
    }
    .roca-hero-figma {
        height: 1020px;
    }
    .roca-fond {
        transform: scale(1.15) !important;
    }
    .roca-intro-figma {
        width: 29% !important;
        left: 35.5% !important;
        top: 26% !important;
    }
    .roca-logo-centre {
        width: 440px !important;
    }
    .roca-bouteilles {
        width: 1140px !important;
        left: 192.5px !important;
        gap: 580px !important;
    }
    .roca-bouteille-1 {
        width: 258px !important;
        height: 642px !important;
    }
    .roca-bouteille-2 {
        width: 255px !important;
        height: 642px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1400px) {
    .roca-hero-content {
        transform: translateX(-50%) scale(0.88);
    }
    .roca-hero-figma {
        height: 1080px;
    }
    .roca-fond {
        transform: scale(1.35) !important;
    }
    .roca-intro-figma {
        width: 31% !important;
        left: 34.5% !important;
        top: 22% !important;
    }
    .roca-logo-centre {
        width: 400px !important;
    }
    .roca-bouteilles {
        width: 1200px !important;
        left: 162.5px !important;
        gap: 680px !important;
    }
    .roca-bouteille-1 {
        width: 244px !important;
        height: 606px !important;
    }
    .roca-bouteille-2 {
        width: 240px !important;
        height: 606px !important;
    }
}

@media (min-width: 1025px) and (max-width: 1200px) {
    .roca-hero-content {
        transform: translateX(-50%) scale(0.75);
    }
    .roca-hero-figma {
        height: 1020px;
    }
    .roca-fond {
        transform: scale(1.45) !important;
    }
    .roca-intro-figma {
        width: 33% !important;
        left: 33.5% !important;
        top: 18% !important;
    }
    .roca-logo-centre {
        width: 360px !important;
    }
    .roca-bouteilles {
        width: 1240px !important;
        left: 142.5px !important;
        gap: 740px !important;
    }
    .roca-bouteille-1 {
        width: 230px !important;
        height: 570px !important;
    }
    .roca-bouteille-2 {
        width: 226px !important;
        height: 570px !important;
    }
}

@media (max-width: 1024px) {
    /* Conteneur principal vertical sur mobile */
    .roca-project-container {
        padding: 40px 20px !important;
        gap: 20px !important;
        width: 100% !important;
        margin-top: 10px;
        margin-bottom: 60px;
        box-shadow: none !important;
        box-sizing: border-box !important;
    }

    /* Grille redevenue une liste verticale simple et centrée */
    .roca-grid {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    /* Cartes individuelles empilées verticalement sans rognage, centrées */
    .roca-card {
        width: 100% !important;
        max-width: 500px !important;
        aspect-ratio: 710 / 532.5 !important; /* Garantit 0% de rognage car les images font 2130x1598 */
        flex-shrink: 0 !important;
        margin: 0 auto !important;
    }

    .roca-card:hover {
        transform: scale(1.02) !important;
    }

    /* Grille en 2 colonnes sur tablette */
    .roca-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        padding: 0 !important;
        overflow: visible !important;
        flex-direction: unset !important;
        align-items: unset !important;
    }

    .roca-card {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 710 / 532.5 !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* Hero tablette : scaling proportionnel identique à unbottled (sans crop) */
    .roca-hero-figma {
        position: relative !important;
        width: 100% !important;
        overflow: visible !important;
        background-color: #EDEDE4 !important;
        /* Grande tablette (900-1024px) : hauteur augmentée pour éviter la coupe du descriptif */
        height: calc((100vw * 902 / 1525) + 180px) !important;
        min-height: 520px !important;
    }

    .roca-hero-content {
        position: absolute !important;
        width: 1525px !important;
        height: 902px !important;
        left: 50% !important;
        top: 0 !important;
        transform: translateX(-50%) scale(calc(100vw / 1525)) !important;
        transform-origin: top center !important;
        margin: 0 !important;
    }

    /* Fond visible car le conteneur est mis à l'échelle */
    .roca-fond {
        display: block !important;
    }

    /* Icônes à leur taille d'origine, dans le conteneur scalé */
    .roca-icones {
        position: absolute !important;
        width: 1480px !important;
        height: 859px !important;
        left: -25.41px !important;
        top: 35px !important;
        background-image: url('../02-Rocabruna/Icones-rocabruna.webp') !important;
        background-size: contain !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        z-index: 1 !important;
        transform: none !important;
    }

    .roca-logo-centre {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: 40px !important;
        width: 480px !important;
        max-width: 480px !important;
        height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding-top: 0 !important;
        z-index: 5 !important;
    }

    .roca-logo-centre img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }

    /* Bouteilles visibles à leur taille originale dans le conteneur scalé */
    .roca-bouteilles {
        display: flex !important;
    }

    .main-logo {
        height: 64px !important;
    }

    /* Le descriptif absolu reste visible sur tablette */
    .roca-intro-figma {
        display: block !important;
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 65% !important;
        max-width: 550px !important;
        min-width: 280px !important;
        /* Grande tablette : décalé vers le bas pour ne pas masquer "CÔTE D'AZUR" */
        top: calc((100vw * 530 / 1525)) !important;
        z-index: 100 !important;
    }

    /* Masquer le descriptif mobile sur tablette (le descriptif desktop reste visible) */
    .roca-descriptif-mobile {
        display: none !important;
    }

    /* Ajustements pour les écrans de faible hauteur pour éviter tout contact entre le logo et le descriptif */
    @media (max-height: 720px) {
        .roca-logo-centre {
            max-width: 260px !important;
            padding-top: 25px !important;
        }
        .roca-descriptif-mobile {
            bottom: 15px !important;
            padding: 16px 16px !important;
        }
    }

    @media (max-height: 620px) {
        .roca-logo-centre {
            max-width: 200px !important;
            padding-top: 15px !important;
        }
        .roca-descriptif-mobile {
            bottom: 10px !important;
            padding: 12px 12px !important;
        }
    }

    /* Petite tablette (768-900px) : hauteur augmentée et descriptif descendu */
    @media (max-width: 900px) {
        .roca-hero-figma {
            height: calc((100vw * 902 / 1525) + 260px) !important;
        }
        .roca-intro-figma {
            top: calc((100vw * 510 / 1525)) !important;
            width: 80% !important;
            max-width: 480px !important;
        }
    }

    @media (max-width: 767px) {
        /* Sur mobile, revenir au layout hero original (hauteur fixe, pas de scale) */
        .roca-hero-figma {
            height: 85vh !important;
            min-height: 590px !important;
            overflow: visible !important;
        }
        .roca-hero-content {
            width: 100% !important;
            height: 100% !important;
            left: 0 !important;
            top: 0 !important;
            transform: none !important;
        }
        .roca-fond {
            display: none !important;
        }
        .roca-icones {
            width: 100% !important;
            height: calc(100% - 360px) !important;
            left: 0 !important;
            top: -80px !important;
            background-size: contain !important;
            background-position: center !important;
            background-repeat: no-repeat !important;
        }
        .roca-logo-centre {
            top: 15px !important;
            width: 90% !important;
            max-width: 180px !important;
            height: calc(100% - 380px) !important;
            align-items: flex-start !important;
            padding-top: 0 !important;
        }
        .roca-logo-centre img {
            width: auto !important;
            max-width: 100% !important;
            max-height: 100% !important;
            object-fit: contain !important;
        }
        /* Bouteilles mobiles */
        .roca-bouteilles {
            display: flex !important;
            flex-direction: row !important;
            justify-content: space-between !important;
            align-items: center !important;
            position: absolute !important;
            width: 100% !important;
            height: 220px !important;
            left: 0 !important;
            top: 40px !important;
            z-index: 2 !important;
            padding: 0 12px !important;
            box-sizing: border-box !important;
            gap: 0 !important;
            pointer-events: none !important;
        }
        .roca-bouteille-1, .roca-bouteille-2 {
            width: 78px !important;
            height: 220px !important;
            pointer-events: auto !important;
        }
        /* Masquer le descriptif desktop et afficher le mobile */
        .roca-intro-figma {
            display: none !important;
        }
        .roca-descriptif-mobile {
            display: flex !important;
            flex-direction: column !important;
            justify-content: center !important;
            align-items: center !important;
            padding: 24px 20px !important;
            background: #FFFFFF !important;
            border: 1px solid #000000 !important;
            box-sizing: border-box !important;
            width: calc(100% - 40px) !important;
            max-width: 420px !important;
            position: absolute !important;
            bottom: 15px !important;
            left: 50% !important;
            transform: translateX(-50%) !important;
            z-index: 100 !important;
            margin: 0 !important;
            cursor: pointer;
        }
        .roca-descriptif-mobile p {
            font-family: 'Source Code Pro', monospace;
            font-size: clamp(9px, 3.05vw, 13px) !important;
            line-height: 1.45em !important;
            color: #000000 !important;
            text-align: left;
            margin: 0;
            width: 100%;
        }
        .roca-descriptif-mobile strong {
            font-weight: 600;
        }
        /* Grille 1 colonne sur mobile */
        .roca-grid {
            grid-template-columns: 1fr !important;
        }
        .roca-project-container {
            padding: 30px 0px !important;
        }
        .roca-card {
            max-width: 100% !important;
            border-radius: 0px !important;
        }
    }
}

/* =========================================
   LIGHTBOX GALERIE PLEIN ÉCRAN
   ========================================= */
.roca-lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.roca-lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.roca-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.roca-lightbox-img {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.roca-lightbox-close {
    position: absolute;
    top: -40px;
    right: -40px;
    color: #fff;
    font-size: 40px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 10px;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}

.roca-lightbox-close:hover {
    transform: scale(1.1);
    color: #BA5B2F; /* Touche Rocabruna */
}

.roca-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    font-size: 40px;
    padding: 20px 15px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
    border-radius: 4px;
}

.roca-lightbox-nav:hover {
    background: rgba(255, 255, 255, 0.3);
    transform: translateY(-50%) scale(1.1);
}

.roca-lightbox-prev {
    left: -70px;
}

.roca-lightbox-next {
    right: -70px;
}

@media (max-width: 1024px) {
    .roca-lightbox-prev {
        left: 10px;
    }
    .roca-lightbox-next {
        right: 10px;
    }
    .roca-lightbox-close {
        top: -40px;
        right: 0px;
    }
    .roca-lightbox-img {
        max-width: 85vw;
        max-height: 85vh;
    }
}

/* Fix sticky hero showing through transparent footer */
.site-footer {
    position: relative;
    z-index: 10;
    background-color: #ffffff;
    width: 100vw !important;
    max-width: none !important;
    left: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    box-sizing: border-box;
}