/* ======================================================================================
                                    PAGE HOMEPAGE - DESKTOP
========================================================================================= */


@media (min-width: 769px) {
    /* ============================================
    HERO SECTION - DESKTOP
    ============================================ */

    .hero {
        width: 100%;
        height: auto;
        position:relative;
        padding: 100px 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: #FFF3E9;
        overflow: hidden;
    }

    .terrarium-scene {
        position: relative;
        width: fit-content;
        perspective: 1200px; /* indispensable pour l'effet 3D */

        animation: fadeInUp 0.9s ease forwards;
        opacity: 0;
    }

    .terrarium-body {
        display: block;
        width: 500px;
    }

    .terrarium-door {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        transform-origin: 55% center; /* charnière = bord droit */
        transform: rotateY(-180deg);    /* état initial : porte fermée */

        animation: openDoor 2.2s ease 0.9s forwards;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes openDoor {
        from { transform: rotateY(-180deg); }
        to   { transform: rotateY(0deg); }
    }


    /* === CONTAINER GRADIENTS === */
    .gradient-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        opacity: 0;
        animation: fadeInGradients 1.5s ease-out 3s forwards;
    }


    /* === ORBES INDIVIDUELS === */
    .gradient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.3; /* Opacité de base */
        mix-blend-mode: multiply;
        transition: opacity 0.5s ease;
        opacity: 0.3;
        animation: 
            float1 25s ease-in-out 3s infinite,
            pulse1 25s ease-in-out 3s infinite;
    }

    /* Orbe 1 - Vert foncé */
    .gradient-orb-1 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, #c28b4b 0%, transparent 70%);
        top: 10%;
        left: -10%;
        animation: 
            float1 25s ease-in-out 3.5s infinite,
            pulse1 25s ease-in-out 3.5s infinite;
    }

    /* Orbe 2 - Orange */
    .gradient-orb-2 {
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, #CD4E04 0%, transparent 70%);
        top: 20%;
        right: -5%;
        animation: 
            float2 20s ease-in-out 3.7s infinite,
            pulse2 20s ease-in-out 3.7s infinite;
    }

    /* Orbe 3 - Vert foncé */
    .gradient-orb-3 {
        width: 600px;
        height: 600px;
        background: radial-gradient(circle, #123524 0%, transparent 30%);
        top: 40%;
        left: 20%;
        animation: 
            float3 30s ease-in-out 3.9s infinite,
            pulse3 30s ease-in-out 3.9s infinite;
    }

    /* Orbe 4 - Orange */
    .gradient-orb-4 {
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, #CD4E04 0%, transparent 70%);
        bottom: 10%;
        right: 8%;
        animation: 
            float4 22s ease-in-out 5.1s infinite,
            pulse4 22s ease-in-out 5.1s infinite;
    }

    /* === ANIMATIONS MOUVEMENT === */
    @keyframes float1 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-40px, 30px) scale(0.9); }
    }

    @keyframes float2 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(-60px, 40px) scale(1.15); }
    }

    @keyframes float3 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        40% { transform: translate(50px, -30px) scale(1.2); }
        80% { transform: translate(-30px, 20px) scale(0.95); }
    }

    @keyframes float4 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        25% { transform: translate(-40px, -40px) scale(1.1); }
        75% { transform: translate(40px, 30px) scale(0.9); }
    }

    /* === ANIMATIONS OPACITÉ === */

    @keyframes fadeInGradients {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes pulse1 {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.5; } /* ← Plus visible au milieu */
    }

    @keyframes pulse2 {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.55; }
    }

    @keyframes pulse3 {
        0%, 100% { opacity: 0.3; }
        60% { opacity: 0.5; }
    }

    @keyframes pulse4 {
        0%, 100% { opacity: 0.3; }
        40% { opacity: 0.5; }
    }


    .hero-container {
        width: 100%;
        height: auto;
        display: flex;
        z-index: 1;
        gap: 90px;
        align-items: flex-start;
        margin: 0 auto;
        padding: 40px 70px 100px;
        justify-content: space-around;
    }

    @media (min-width: 1800px) {
        .hero-container {
            padding: 100px 140px 140px;
        }
    }

    .hero-text {
        flex: 1;          /* Prend l'espace disponible */
        max-width: 627px; /* Limite pour lisibilité */
        height: auto;     /* HUG */
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    .hero-image {
        width: 100%;
        max-width: 489px;
        height: auto;
        aspect-ratio: 489 / 581;
        border-radius: 16px;
        overflow: hidden;
    }

    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        transition: transform 0.5s ease;
    }

    .hero h1 {
        font-family: 'Aboreto', serif;
        font-size: 72px;
        margin: 70px 0px 50px;
        line-height: 90px;
        font-weight: 400;
        background: linear-gradient(90deg, #123524, #B84400);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        filter: drop-shadow(0px 1px 4px rgba(18, 53, 36, 0.25));
        animation: 
            fadeIn 0.8s ease-out 0.4s forwards,
            shimmerStart 1.5s ease-out 1.2s forwards;
    }

    /* Application finale du gradient animé */
    .hero h1 {
        background: linear-gradient(90deg, #123524 0%, #B84400 25%, #123524 50%, #B84400 75%, #123524 100%);
        background-size: 200% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        animation: 
            fadeIn 0.8s ease-out 0.4s forwards,
            shimmerMove 8s linear 1.2s infinite; /* Démarre à 1.2s, boucle infinie */
    }


    .hero .subtitle {
        font-family: 'El Messiri', serif;
        font-size: 24px;
        line-height: 32px;
        font-weight: 500;
        color: #123524;
        opacity: 0.9;
        margin-bottom: 0;
    }

    .hero .btn-primary {
        margin-top: 20px;
        align-self: flex-start;
    }



    /* Animation fadeIn au chargement */
    @keyframes heroFadeIn {
        from {
            opacity: 0;
            transform: translateY(30px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    /* Animation: Couleur unie → Gradient */
    @keyframes shimmerStart {
        0% {
            background: #123524;
        }
        100% {
            background: linear-gradient(90deg, #123524, #B84400);
            animation: shimmerMove 8s linear infinite;
        }
    }

    /* Animation: Dégradé qui bouge de gauche à droite */
    @keyframes shimmerMove {
        0% {
            background-position: 0% 50%;
            background-size: 200% 100%;
        }
        100% {
            background-position: 200% 50%;
            background-size: 200% 100%;
        }
    }

    .hero-text {
        animation: heroFadeIn 0.8s ease-out;
    }

    .hero-image {
        animation: heroFadeIn 1s ease-out 0.2s backwards;
    }


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

    .products-section {
        position: relative;
        width: 100%;
        min-height: 700px;
        padding: 50px;
        background: linear-gradient(0deg, #FFFFFF, #FFF3E9);
    }

    /* === CONTENU === */
    .products-content {
        position: relative;
        z-index: 1;
        width: 100%;
        max-width: 1440px;
        margin: 0 auto;
    }

    /* === TITRE === */
    .products-section h2 {
        font-family: 'El Messiri', serif;
        font-size: 48px;
        font-weight: 500;
        line-height: 52px;
        color: #123524;
        text-align: center;
        margin: 0 0 34px 0;
    }

    /* === GRILLE PRODUITS === */
    .product-cards {
        display: flex;
        gap: 64px;
        justify-content: center;
        padding: 32px;
    }

    /* ================================================
    CARTE PRODUIT - ÉTAT INITIAL + SCROLL ANIMATION
    ================================================ */

    .product-card-homepage {
        width: 100%;
        max-width: 450px;
        background: rgba(255, 255, 255, 0.2);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 12px;
        padding: 25px 70px;
        
        /* Glassmorphism */
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        box-shadow: 0 4px 32px rgba(0, 0, 0, 0.2);
        
        /* Layout */
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        
        /* ANIMATION SCROLL - ÉTAT INITIAL */
        opacity: 0;
        
        /* Transitions combinées (scroll + hover) */
        transition: 
            opacity 0.8s ease-out,
            transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
            box-shadow 0.3s ease;
        
        will-change: opacity, transform;
    }


    /* Carte gauche - Départ hors écran */
    .product-card-left {
        transform: translateX(-100px);
    }

    /* Carte droite - Départ hors écran */
    .product-card-right {
        transform: translateX(100px);
    }

    /* ÉTAT VISIBLE (ajouté par JS) */
    .product-card-homepage.visible {
        opacity: 1;
        transform: translateX(0) translateY(0); /* Position finale */
    }

    /* Délais séquentiels */
    .product-card-left.visible {
        transition-delay: 0.1s;
    }

    .product-card-right.visible {
        transition-delay: 0.2s;
    }

    .product-card-homepage.visible:hover {
        transform: translateY(-8px);
        box-shadow: 0 8px 40px rgba(0, 0, 0, 0.25);
    }


    /* === IMAGE PRODUIT === */
    .product-image {
        width: 100%;
        object-fit: contain;
    }

    /* === NOM PRODUIT === */
    .product-name {
        font-family: 'El Messiri', sans-serif;
        font-size: 32px;
        font-weight: 500;
        line-height: 70px;
        color: #123524;
        text-align: center;
        margin: 0 0 8px 0;
    }

    /* ============================================
    SECTION NOS 3 PILIERS - DESKTOP
    ============================================ */

    .piliers-section {
        align-self: stretch;
        padding: 50px 120px;
        background: w;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 50px;
    }

    /* === TITRE PRINCIPAL === */
    .piliers-title {
        text-align: center;
        color: #123524;
        font-size: 48px;
        font-family: 'El Messiri', serif;
        font-weight: 500;
        line-height: 52px;
        letter-spacing: 0.24px;
        word-wrap: break-word;
        margin: 0;
    }

    /* === CONTENEUR DES CARTES === */
    .piliers-cards {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
    }

    /* === CARTE PILIER === */
    .pilier-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
    }

    /* === CARTE INTÉRIEURE === */
    .pilier-card-inner {
        width: 340px;
        height: 340px;
        background: rgba(255, 243, 233, 0.22);
        box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.20);
        overflow: hidden;
        border-radius: 20px;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        gap: 50px;
        padding: 35px 49px;
        /* Tilt */
        position: relative;
        transform-style: preserve-3d;
        will-change: transform;
        transition: box-shadow 0.3s ease;
        cursor: default;
    }

    .pilier-card-inner:hover {
        box-shadow: 0px 16px 48px rgba(0, 0, 0, 0.28);
    }

    /* Calque shimmer chatoyant */
    .pilier-shimmer {
        position: absolute;
        inset: 0;
        border-radius: 20px;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s ease;
        background: radial-gradient(
            circle at 50% 50%,
            rgba(255, 255, 255, 0.22) 0%,
            rgba(255, 255, 255, 0.08) 35%,
            transparent 70%
        );
        background-size: 200% 200%;
        mix-blend-mode: overlay;
    }

    /* Padding spécifique Créativité */
    .pilier-card:nth-child(2) .pilier-card-inner {
        padding: 35px 95px;
    }

    /* Padding spécifique Design */
    .pilier-card:nth-child(3) .pilier-card-inner {
        padding: 35px 85px;
    }

    /* === ICÔNE SVG === */
    .pilier-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .pilier-icon img {
        width: 100%;
        height: auto;
        display: block;
    }

    /* Tailles spécifiques des icônes */
    .pilier-card:nth-child(1) .pilier-icon img {
        max-width: 242px;
        height: 150px;
    }

    .pilier-card:nth-child(2) .pilier-icon img {
        max-width: 154px;
        height: 154px;
    }

    .pilier-card:nth-child(3) .pilier-icon img {
        max-width: 150px;
        height: 151px;
    }

    /* === TITRE CARTE === */
    .pilier-card-title {
        text-align: center;
        color: #123524;
        font-size: 32px;
        font-family: 'El Messiri', serif;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: 0.16px;
        word-wrap: break-word;
        margin: 0;
    }

    /* === DESCRIPTION === */
    .pilier-description {
        width: 340px;
        text-align: center;
        color: #000000;
        font-size: 20px;
        font-family: 'Work Sans', sans-serif;
        font-weight: 400;
        line-height: 30px;
        word-wrap: break-word;
        margin: 0;
    }

    /* ============================================
    SECTION INTRO MARQUE - DESKTOP
    ============================================ */

    .intro-marque-section {
        align-self: stretch;
        padding: 50px 0;
        background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 50%, #FFFFFF 100%);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro-marque-container {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 0;
        justify-content: center;
        height: 450px;
    }

    /* === PHOTOS === */
    .intro-photo {
        flex-shrink: 0;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .intro-photo-left img {
        width: 254px;
        height: 352px;
        max-height: 350px;
        object-fit: cover;
        display: block;
        border-radius: 12px;
    }


    .intro-photo-right img {
        width: 100%;
        height: 100%;
        max-height: 350px;
        object-fit: cover;
        display: block;
        border-radius: 12px;
    }

    /* === CONTENU CENTRAL === */
    .intro-content {
        width: 716px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 46px;
    }

    .intro-text {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        gap: 40px;
        overflow: hidden;
    }

    /* === TITRE === */
    .intro-title {
        width: 732px;
        text-align: center;
        color: #123524;
        font-size: 48px;
        font-family: 'El Messiri', serif;
        font-weight: 500;
        line-height: 52px;
        letter-spacing: 0.24px;
        word-wrap: break-word;
        margin: 0;
    }

    /* === DESCRIPTION === */
    .intro-description {
        align-self: stretch;
        height: 119px;
        text-align: center;
        color: #000000;
        font-size: 18px;
        font-family: 'Work Sans', sans-serif;
        font-weight: 400;
        line-height: 30px;
        word-wrap: break-word;
        margin: 0;
    }

    /* === BOUTON === */
    .intro-content .btn-primary {
        padding: 12px 40px;
        background: #6B7345;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
        border-radius: 20px;
        color: #FFFFFF;
        font-size: 20px;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 400;
        line-height: 25px;
        text-decoration: none;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        transition: all 0.3s ease;
    }

    .intro-content .btn-primary:hover {
        background: #123524;
        transform: translateY(-2px);
        box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.3);
    }

    .intro-photo-left {
        opacity: 0.8;
        height: 450px;
        position: absolute;
        z-index: -1;

        -webkit-mask-image: radial-gradient(
            ellipse 69% 280% at 50% 0%,
            transparent 0%,
            transparent 35%,
            black 70%,
            black 100%
        );
        mask-image: radial-gradient(
            ellipse 69% 280% at 50% 0%,
            transparent 0%,
            transparent 35%,
            black 70%,
            black 100%
        );
    }


    /* ============================================
    SECTION L'EXPÉRIENCE LUSH SPHERE
    ============================================ */

    .experience-mobile {
        display: none;
    }

    .experience-section {
        width: 100%;
        padding: 50px 70px 80px;
        background: #FFFFFF;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
    }

    .experience-container {
        width: 100%;
        max-width: 1440px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    /* === TITRES === */
    .experience-title {
        font-family: 'El Messiri', serif;
        font-size: 48px;
        font-weight: 500;
        line-height: 52px;
        color: #123524;
        text-align: center;
        margin: 0;
    }

    .experience-subtitle {
        font-family: 'Josefin Sans', sans-serif;
        font-size: 18px;
        line-height: 28px;
        color: #000000;
        text-align: center;
    }

    /* === CONTENEUR VISUEL === */
    .experience-visual {
        position: relative;
        width: 100%;
        max-width: 1400px;
        aspect-ratio: 1400 / 900;
        margin: 0 auto;
    }

    /* === IMAGE PRINCIPALE === */
    .experience-image {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
        opacity: 0;
        animation: fadeInImage 0.8s ease-out forwards;
    }

    /* === SVG OVERLAY === */
    .experience-svg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
    }

}

/* ======================================================
   ANIMATIONS EXPÉRIENCE — globales (desktop + mobile)
   ====================================================== */

@keyframes fadeInImage {
    to { opacity: 1; }
}

@keyframes fadeInText {
    to { opacity: 1; }
}

@keyframes drawLine {
    to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes showPoint {
    to { opacity: 1; }
}

@keyframes pulseRadar {
    0%   { opacity: 0.8; transform: scale(1); }
    100% { opacity: 0;   transform: scale(2.5); }
}

.annotation-text {
    font-family: 'Work Sans', sans-serif;
    font-size: 18px;
    fill: #000000;
    opacity: 0;
}

.annotation-line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    opacity: 0;
}

.target-point {
    opacity: 0;
}

.target-pulse {
    fill: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
}

.experience-visual.animate .text-1 { animation: fadeInText 0.5s ease-out 2.3s forwards; }
.experience-visual.animate .text-2 { animation: fadeInText 0.5s ease-out 2.5s forwards; }
.experience-visual.animate .text-3 { animation: fadeInText 0.5s ease-out 2.7s forwards; }
.experience-visual.animate .text-4 { animation: fadeInText 0.5s ease-out 2.9s forwards; }

.experience-visual.animate .line-1 { animation: drawLine 1.5s ease-out 0.8s forwards; }
.experience-visual.animate .line-2 { animation: drawLine 1.5s ease-out 1.0s forwards; }
.experience-visual.animate .line-3 { animation: drawLine 1.5s ease-out 1.2s forwards; }
.experience-visual.animate .line-4 { animation: drawLine 1.5s ease-out 1.4s forwards; }

.experience-visual.animate .point-1 { animation: showPoint 0.3s ease-out 2.3s forwards; }
.experience-visual.animate .point-2 { animation: showPoint 0.3s ease-out 2.5s forwards; }
.experience-visual.animate .point-3 { animation: showPoint 0.3s ease-out 2.7s forwards; }
.experience-visual.animate .point-4 { animation: showPoint 0.3s ease-out 2.9s forwards; }

.experience-visual.animate .pulse-1 { animation: pulseRadar 2s ease-out 2.6s infinite; }
.experience-visual.animate .pulse-2 { animation: pulseRadar 2s ease-out 2.8s infinite; }
.experience-visual.animate .pulse-3 { animation: pulseRadar 2s ease-out 3.0s infinite; }
.experience-visual.animate .pulse-4 { animation: pulseRadar 2s ease-out 3.2s infinite; }

/* ======================================================
   RESPONSIVE (min-width: 769px) AND (max-width: 1300px)
   ====================================================== */
@media (min-width: 769px) AND (max-width: 1300px) { 
    .gradient-orb-3 {
        width: 400px;
        height: 400px;
    }

    .terrarium-body {
        width: 330px;
    }

    .terrarium-door {
        width: 330px;
    }

    .product-card-homepage {
        max-width: 350px;
    }

    .product-name {
        font-size: 28px;
    }
}


/* ===========================================================================================================================================================================================
   LUSH SPHERE - CSS MOBILE
   =========================================================================================================================================================================================== */

@media (max-width: 768px) {

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

    .hero {
        padding-top: 190px;
        gap: 0px;
        position: relative;
        display: flex;
        flex-direction: column;
        background: linear-gradient(0deg, #FFFFFF, #FFF3E9);
        overflow-x: hidden;
    }

    /* === ORBES INDIVIDUELS === */

    .gradient-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        opacity: 0;
        animation: fadeInGradients 1.5s ease-out 3s forwards;
    }

    .gradient-orb {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0.3; /* Opacité de base */
        mix-blend-mode: multiply;
        transition: opacity 0.5s ease;
        opacity: 0.3;
        animation: 
            float1 25s ease-in-out 3s infinite,
            pulse1 25s ease-in-out 3s infinite;
    }

    /* Orbe 1 - Vert foncé */
    .gradient-orb-1 {
        width: 500px;
        height: 500px;
        background: radial-gradient(circle, #c28b4b 0%, transparent 70%);
        top: 10%;
        left: -10%;
        animation: 
            float1 25s ease-in-out 3.5s infinite,
            pulse1 25s ease-in-out 3.5s infinite;
    }

    /* Orbe 2 - Orange */
    .gradient-orb-2 {
        width: 200px;
        height: 200px;
        background: radial-gradient(circle, #CD4E04 0%, transparent 70%);
        top: 30%;
        right: -25%;
        animation: float2 20s ease-in-out 3.7s infinite, pulse2 20s ease-in-out 3.7s infinite;
    }

    /* Orbe 3 - Vert foncé */
    .gradient-orb-3 {
        width: 400px;
        height: 400px;
        background: radial-gradient(circle, #123524 20% 0%, transparent 30%);
        top: 50%;
        left: 20%;
        animation: float3 30s ease-in-out 3.9s infinite, pulse3 30s ease-in-out 3.9s infinite;
    }

    /* Orbe 4 - Orange */
    .gradient-orb-4 {
        width: 450px;
        height: 450px;
        background: radial-gradient(circle, #CD4E04 0%, transparent 70%);
        bottom: 10%;
        right: 8%;
        animation: 
            float4 22s ease-in-out 5.1s infinite,
            pulse4 22s ease-in-out 5.1s infinite;
    }

    /* === ANIMATIONS MOUVEMENT === */
    @keyframes float1 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        33% { transform: translate(30px, -50px) scale(1.1); }
        66% { transform: translate(-40px, 30px) scale(0.9); }
    }

    @keyframes float2 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        50% { transform: translate(-60px, 40px) scale(1.15); }
    }

    @keyframes float3 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        40% { transform: translate(50px, -30px) scale(1.2); }
        80% { transform: translate(-30px, 20px) scale(0.95); }
    }

    @keyframes float4 {
        0%, 100% { transform: translate(0, 0) scale(1); }
        25% { transform: translate(-40px, -40px) scale(1.1); }
        75% { transform: translate(40px, 30px) scale(0.9); }
    }

    /* === ANIMATIONS OPACITÉ === */

    @keyframes fadeInGradients {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }

    @keyframes pulse1 {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.5; } /* ← Plus visible au milieu */
    }

    @keyframes pulse2 {
        0%, 100% { opacity: 0.3; }
        50% { opacity: 0.55; }
    }

    @keyframes pulse3 {
        0%, 100% { opacity: 0.3; }
        60% { opacity: 0.5; }
    }

    @keyframes pulse4 {
        0%, 100% { opacity: 0.3; }
        40% { opacity: 0.5; }
    }

    .terrarium-scene {
        position: relative;
        width: 100%;
        max-width: 500px;
        perspective: 1200px; /* indispensable pour l'effet 3D */

        animation: fadeInUp 0.9s ease forwards;
        opacity: 0;
    }

    .terrarium-body {
        display: block;
        width: 100%;
    }

    .terrarium-door {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        transform-origin: 55% center; /* charnière = bord droit */
        transform: rotateY(-180deg);    /* état initial : porte fermée */

        animation: openDoor 2.2s ease 0.9s forwards;
    }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(50px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    @keyframes openDoor {
        from { transform: rotateY(-180deg); }
        to   { transform: rotateY(0deg); }
    }

    .hero-container {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: 50px 24px;
        height: auto;
        z-index: 1;
    }

    .hero-text {
        gap: 20px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        animation: heroFadeIn 0.6s ease-out;
    }

    .hero h1 {
        font-family: 'Aboreto', serif;
        font-size: clamp(28px, 10vw, 40px);
        line-height: 1.25;
        font-weight: 500;
        margin-bottom: 0;
        text-align: left;
        background: linear-gradient(90deg, #123524 0%, #B84400 25%, #123524 50%, #B84400 75%, #123524 100%);
        background-size: 200% 100%;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        animation:
            heroFadeIn 0.6s ease-out,
            shimmerMove 8s linear 1s infinite;
    }

    .hero .subtitle {
        font-family: 'El Messiri', serif;
        font-size: 20px;
        line-height: 32px;
        font-weight: 500;
        color: #123524;
        opacity: 0.9;
    }

    .hero .btn-primary {
        margin-top: 16px;
        width: auto;
    }

    .hero-image {
        animation: heroFadeIn 0.8s ease-out 0.1s backwards;
        width: auto;
        height: auto;
        border-radius: 16px;
        overflow: hidden;
    }

    .hero-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* === BUTTONS === */
    .btn-primary {
        height: auto;
        width: auto;
        padding: 9px 50px;
        font-size: 18px;
        line-height: 25px;
        border-radius: 20px;
        box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
        width: 100%;
        max-width: 280px;
    }

    .btn-secondary {
        height: 55px;
        padding: 0 40px;
        font-size: 18px;
        width: 100%;
        max-width: 280px;
    }

    .section-header {
        display: flex;
        flex-direction: column;
        gap: 34px;
        margin-bottom: 34px;
        text-align: center;
    }

    .section-description {
        max-width: 100%;
    }

    /* ============================================
       SECTION PRODUITS - CAROUSEL
       ============================================ */

    .products-section {
        min-height: auto;
        padding: 40px 0;
        overflow: hidden;
    }

    .products-section h2 {
        color: #123524;
        text-align: center;
    }

    .product-cards {
        display: flex;
        flex-direction: row;
        gap: 20px;
        padding: 16px 20px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        justify-content: flex-start;
        scroll-padding-left: 20px;
    }
    
    .product-cards::-webkit-scrollbar {
        display: none;
    }

    .product-card-homepage {
        min-width: 280px;
        max-width: 280px;
        padding: 20px 30px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }

    .product-name {
        font-size: 24px;
        line-height: 50px;
    }

    .product-card-left,
    .product-card-right {
        transform: none;
        opacity: 1;
    }

    /* ============================================
    NOS 3 PILIERS
    ============================================ */

    .piliers-section {
        align-self: stretch;
        padding: 32px 24px;
        background: white;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 34px;
    }

    .piliers-title {
        text-align: center;
        color: #123524;
        font-size: 36px;
        font-family: 'El Messiri', serif;
        font-weight: 500;
        line-height: 44px;
        letter-spacing: 0.18px;
        word-wrap: break-word;
        margin: 0;
    }

    .piliers-cards {
        align-self: stretch;
        padding: 0 10px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        gap: 40px;
    }

    /* === CARTE INDIVIDUELLE === */
    .pilier-card {
        align-self: stretch;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        gap: 30px;
    }

    /* === CARTE INTÉRIEURE (avec glassmorphism) === */
    .pilier-card-inner {
        align-self: stretch;
        height: 300px;
        background: rgba(255, 243, 233, 0.22);
        box-shadow: 0px 4px 32px rgba(0, 0, 0, 0.20);
        overflow: hidden;
        border-radius: 20px;
        backdrop-filter: blur(24px);
        -webkit-backdrop-filter: blur(24px);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 32px;
        padding: 35px 32px;
    }

    /* === ICÔNES === */
    .pilier-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
    }

    .pilier-icon img {
        width: 100%;
        height: auto;
        display: block;
    }

    .pilier-card:nth-child(1) .pilier-icon img {
        max-width: 180px;
        height: 111px;
    }

    .pilier-card:nth-child(2) .pilier-icon img {
        max-width: 154px;
        height: 154px;
    }

    .pilier-card:nth-child(3) .pilier-icon img {
        max-width: 150px;
        height: 151px;
    }

    /* === TITRES === */
    .pilier-card-title {
        text-align: center;
        color: #123524;
        font-size: 32px;
        font-family: 'El Messiri', serif;
        font-weight: 500;
        line-height: 36px;
        letter-spacing: 0.16px;
        word-wrap: break-word;
        margin: 0;
    }

    /* === DESCRIPTIONS === */
    .pilier-description {
        align-self: stretch;
        text-align: center;
        color: #000000;
        font-size: 20px;
        font-family: 'Josefin Sans', sans-serif;
        font-weight: 400;
        word-wrap: break-word;
        margin: 0;
    }

    /* Line-height Sérénité */
    .pilier-card:nth-child(1) .pilier-description {
        line-height: 25px;
    }

    /* Line-height Créativité et Design */
    .pilier-card:nth-child(2) .pilier-description,
    .pilier-card:nth-child(3) .pilier-description {
        line-height: 30px;
    }


    /* ============================================
   SECTION INTRO MARQUE
   ============================================ */

   .intro-marque-section {
        min-height: unset; /* laisse le contenu définir la hauteur */
    }

    .intro-marque-container {
        position: relative;
        z-index: 1;
    }

    h2.intro-title {
        color: white;
        text-shadow: #3f3f3f 1px 0 10px;
    }

    .intro-marque-container {
        display: flex;
        gap: 10px;
        flex-direction: column;
        text-align: center;
    }

    .intro-content {
        display: flex;
        gap: 30px;
        flex-direction: column;
        align-items: center;
        padding: 0 24px;
    }

    .intro-text {
        display: flex;
        gap: 30px;
        flex-direction: column;
        align-items: center;
    }

    .intro-photo img{
        height: 300px;
    }

    .intro-photo-left {
        opacity: 0.7;
        height: 450px;
        position: absolute;
        z-index: -1;

        -webkit-mask-image: radial-gradient(
            ellipse 249% 100% at 50% 80%,
            transparent 0%,
            transparent 35%,
            black 70%,
            black 100%
        );
        mask-image: radial-gradient(
            ellipse 249% 100% at 50% 80%,
            transparent 0%,
            transparent 35%,
            black 70%,
            black 100%
        );
    }


    /* ============================================
    SECTION L'EXPÉRIENCE LUSH SPHERE
    ============================================ */
    
    .experience-desktop {
        display: none;
    }
    
    .experience-mobile {
        display: block;
        position: relative;
        width: 100%;
        margin: 30px 0;
    }

    .experience-visual {
        aspect-ratio: auto;
    }

    .experience-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
        padding: 32px 24px;
    }

    .experience-image-mobile {
        position: relative;
        z-index: 0;
        width: 100%;
        height: auto;
        display: block;
        border-radius: 20px;
    }

    .experience-svg-mobile {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
    }

    .experience-mobile .annotation-text {
        font-size: 52px;
    }

}