* {margin: 0; padding: 0; }
@font-face {font-family: myFont; src: url(MAIAN.TTF);}
@font-face {font-family: myFontJesus; src: url(jesus.ttf);}
@font-face {font-family: myFontMoses; src: url(moses.otf);}
@font-face {font-family: myFontScript; src: url(script.ttf);}
@font-face {font-family: myFontBerlin; src: url(berlin.ttf);}
@font-face {font-family: myFontGabriola; src: url(gabriola.ttf);}
@font-face {font-family: beautiful; src: url(beautiful.ttf);}
@font-face {font-family: ecriture; src: url(cursive.ttf);}
@font-face {font-family: aron; src: url(aron.ttf);}

::-webkit-scrollbar { width: .5em; height: .5em; border-radius: 100vw; margin-block: 1em; }
::-webkit-scrollbar-track {background: rgba(243, 241, 248,1);}
::-webkit-scrollbar-thumb {background: rgb(218, 218, 218); border-radius: 100vw;}

:root {
    --bezier35: all 3.5s cubic-bezier(0.16,1,0.3,1);
    --bezier25: all 2.5s cubic-bezier(0.16,1,0.3,1);
    --bezier20: all 2s cubic-bezier(0.16,1,0.3,1);
    --bezier15: all 1.5s cubic-bezier(0.16,1,0.3,1);
     
}

.c_cont {position: fixed; transition: var(--bezier15) 0ms; transform: translateY(100dvh); opacity: 0; width:100%; height:100%; z-index:12; background-color: rgba(255, 255, 255,1); backdrop-filter: blur(8px);}
.c_cont[position="true"] {transform: translateY(0); opacity: 1 ; }

.RightSide {position: fixed; transition: var(--bezier25) 0ms; transform: translateX(100dvw); opacity: 1; width:100%; height:100dvh; z-index:12; background-color: rgb(15, 15, 15); backdrop-filter: blur(8px);}
.RightSide[position="true"] {transform: translateX(0); opacity: 1 ; }

/* MENU */
.menuTop { position: fixed; z-index: 99;  }

.mobileDraps { position: absolute; width: 100vw; height: 100dvh; background-color: rgba(0, 0, 0, 0.8); transform: translateX(-100vw); transition: var(--bezier25);}
.mobileMenuList {position: absolute; width: 330px; transform: translateX(-330px); height: 100dvh;  display: flex; flex-direction:column; align-items: center; justify-content: right; background-color: rgba(149, 237, 115, 0.2);backdrop-filter: blur(8px); transition: var(--bezier15);}
.mobileMenuList li {  justify-content: left; width: 330px; transform: translate(50px, 75px); align-items: start; color: white; font-family: 'myFont'; margin-right: 30px; list-style: none;} 
.mobileMenuList li {line-height: 50px; font-size: 40px;}
.menuTop[status="black"] li {color: black;}

.mobileContainer[position="true"] .mobileDraps {transform: translateX(0px);}
.mobileContainer[position="true"] .mobileMenuList {transform: translateX(0px);}

.megaContainer { position: absolute; width: 100%; height: 100%;  transition: var(--bezier20); background: url("/assets/img/background.jpg") cover}
.megaContainer[lift="up"] { transform: translateY(-200px); backdrop-filter: blur(8px);}
.megaContainer[lift="left"] { transform: translateX(-300px); backdrop-filter: blur(8px);}

.containerYaourt {position: absolute; width: 100%; height: 100dvh;transform: translateY(-200px); transition: var(--bezier20); }
.containerYaourt[lift="down"] {transform: translateY(0);}

.menuList {backdrop-filter: blur(8px); background-color: rgba(0, 0, 0, 0.3); transition: var(--bezier20);width: 100vw; height: 50px; display: flex; align-items: center; justify-content: right; transform: translateY(-50px)}
@media (min-width: 850px) { .menuList[position="true"] {transform: translateY(0px);} } 
.menuTop[status="black"] .menuList {background-color: rgba(255, 255, 255, 0.3);}

/* :root { --color: white; } */

.menuHamburger { position: absolute;  top: 25px; transform: translate(25px, -50px); transition: var(--bezier25);}
.hamburger { width: 25px; height: 2px; position: absolute; background-color: white;  top: 0px; transition: var(--bezier25);}
.hamburger::before {position: absolute; content: ''; width: 25px; height: 2px; background-color: white;  transform: translateY(-6px); transition: var(--bezier25);}
.hamburger::after { position: absolute; content: ''; width: 25px; height: 2px; background-color: white; transform: translateY(6px); transition: var(--bezier25);}

@media (max-width: 850px) { .menuHamburger { transform: translate(25px, 0px); } }
.menuTop[status="black"] .hamburger { background-color: black;}
.menuTop[status="black"] .hamburger::before { background-color: black;}
.menuTop[status="black"] .hamburger::after { background-color: black;}





.logo {position: absolute; display: flex; align-items: center;  transform: translateY(25px); z-index: 999;}
.logoCenter {position: absolute; height: 30px; width: 200px; display: flex; justify-content: center; margin-left: 50px; }
.logoLR {position: absolute; font-family: 'myFontMoses'; color: white; font-size: 28px; }
.menuTop[status="black"] .logoLR {color: black;}
.polygoneCenter {position: absolute; clip-path: polygon(4% 0, 96% 0, 100% 50%, 96% 100%, 4% 100%, 0% 50%); width: 200px; height: 30px; background-color: rgb(139, 75, 56); }
.polygoneLeft {position: absolute; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%, 30% 50%);; width: 13px; height: 20px; background-color: rgb(110, 145, 61); margin-left: 15px;}
.polygoneRight {position: absolute; clip-path: polygon(0 0, 100% 0, 65% 50%, 100% 100%, 0 100%, 30% 50%);; width: 13px; height: 20px; background-color: rgb(110, 145, 61); margin-left: 222px;}


.btn_all {display: inline-block; position: relative; cursor: pointer;}
.btn_all::after {content: ''; position: absolute; margin-bottom: -10px; width: 100%; transform: scaleX(0) translateY( 0px ); height: 1px; bottom: 0; left: 0; background-color: rgba(255, 255, 255, 0.8); transform-origin: bottom right; transition: transform 1s cubic-bezier(0.16,1,0.3,1);}
.btn_all:hover::after {transform: scaleX(1) translateY( 0px ); transform-origin: bottom left;}
.menuTop[status="black"] .btn_all::after {background-color: rgba(0, 0, 0, 0.8);}


.menuContainer {transform: translateY(-100px);}
.menuContainer li {color: white; font-family: 'myFont'; margin-right: 30px; list-style: none; transition: var(--bezier25)}
.menuTop[status="black"] li {color: black;}

.megaContainer h1 {color: white; font-family: 'myFont'; font-size: 26px; margin-bottom: 50px; opacity: 0; transform: translateY(100px); transition: var(--bezier15);}
.megaContainer h1.appear {transform: translateY(0); opacity: 1;}
.megaContainer p {color: white; font-family: 'myFont'; opacity: 0; transform: translateY(100px); transition: var(--bezier20);}
.megaContainer p.appear {transform: translateY(0); opacity: 1;}
.megaContainer a {color: white; font-family: 'myFont'; text-decoration: none;}
.aTag {opacity: 0; transform: translateY(100px); transition: var(--bezier25); margin-top: 25px;}
.aTag.appear {opacity: 1; transform: translateY(0);}




.organicIntro { width: 100%; height: 100dvh;  }
.organicIntroPic {transition: var(--bezier15); opacity: 0;}
.organicIntroPic.appear { opacity: 1;   }
.organicIntroImg {position: absolute; width: 100%; height: 100dvh; object-fit: cover; object-position: center; }
.introH1 {position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; animation: parallax linear; animation-timeline: scroll(); --parallax-speed: -20;}

.introH1 h2 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200; transform: translateY(50px); opacity: 0; transition: var(--bezier20);}
.introH1 img {width: 400px; transform: translateY(50px); opacity: 0; transition: var(--bezier25);}

.introH1 h2.appear {transform: translateY(0); opacity: 1;}
.introH1 img.appear {transform: translateY(0); opacity: 1;}


@keyframes parallax { to { transform: translateY( calc(var(--parallax-speed) * 200px)  ); } }

/* ==================== STRIKING & ELEGANT HERO ==================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100dvh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%; /* Adjust if your image has important elements at top/bottom */
    transition: transform 12s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero-section:hover .hero-img {
    transform: scale(1.06); /* Very slow, luxurious zoom */
}

/* Elegant gradient overlay - darker at bottom for depth */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.45) 45%,
        rgba(0, 0, 0, 0.65) 100%
    );
}

/* Content container */
.hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 860px;
    padding: 0 24px;
}

.hero-title {
    font-family: 'Josefin Slab', serif;
    font-size: clamp(3.2rem, 9vw, 6.2rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.05em;
    margin-bottom: 1.4rem;
    text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
}

.hero-subtitle {
    font-size: 1.45rem;
    font-weight: 300;
    max-width: 520px;
    margin: 0 auto 3rem;
    opacity: 0.92;
}

/* Bio badge */
.hero-badge {
    margin: 2rem 0 4rem;
}

.hero-badge img {
    height: 62px;
    filter: drop-shadow(0 6px 16px rgba(0,0,0,0.5));
    transition: transform 0.5s ease;
}

.hero-badge:hover img {
    transform: scale(1.12);
}

/* Elegant scroll indicator */
.scroll-indicator {
    position: absolute;
    bottom: 9vh;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 0.95rem;
    letter-spacing: 2.5px;
    transition: all 0.4s ease;
}

.scroll-indicator:hover {
    color: white;
    transform: translateX(-50%) translateY(8px);
}

.scroll-indicator .arrow {
    font-size: 1.8rem;
    animation: gentle-bounce 3s infinite ease-in-out;
}

@keyframes gentle-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(14px); }
}


.hello { width: 100%; height: 100dvh; display: flex; justify-content: center; align-items: center;}
.helloImg {position: absolute; width: 100%; height: 100%; clip-path: polygon(0 0, 100% 0, 100% 50%, 0 70%); display: flex; justify-content: center; align-items: center; opacity: 0; transition: var(--bezier25);}
.helloImg.appear { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1;}

.helloImgPic {width: 100%; object-fit: cover; object-position: center;  }


.helloImgCover {position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.25); }
.helloH1 {position: absolute; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;}

.helloH1 h2 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200; transform: translateY(50px); opacity: 0; transition: var(--bezier20);}
/* .helloHydro {position: absolute; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;} */
.helloH1 img {width: 400px; transform: translateY(50px); opacity: 0; transition: var(--bezier25);}

.helloH1 h2.appear {transform: translateY(0); opacity: 1;}
.helloH1 img.appear {transform: translateY(0); opacity: 1;}

.cows { width: 100%; height:  30dvh; display:flex; flex-direction: column; justify-content: center; align-items: center; }
.cowsPartI { display: flex; justify-content: center; align-items: center; transition: var(--bezier25); transform: translateY(150px); opacity: 0; }
.cowsPartI.appear {transform: translateY(0); opacity: 1;}
.cows h2 {font-family: 'myFontBerlin'; color: rgba(0, 0, 0, 0); font-size: 75px; -webkit-text-stroke: 2px rgba(98,98,98,1);}
.cows h3 {font-family: 'myFontScript'; color: rgb(98, 98, 98); font-size: 50px; font-weight: 200; }
.cows h4 {font-family: 'myFontBerlin'; color: rgb(98, 98, 98); font-size: 25px;}
.cows h4::before { content: ''; width: 75px; height: 4px; background-color: rgb(98, 98, 98); position: absolute; transform: translateX(-125%) translateY(12px); }
.cows h4::after { content: ''; width: 75px; height: 4px; background-color: rgb(98, 98, 98); position: absolute; transform: translateX(25%) translateY(12px); }

.cowsPartII { transition: var(--bezier25); transform: translateY(200px); opacity: 0; }
.cowsPartII.appear {transform: translateY(0); opacity: 1;}

.cowsPartIII {transform: translateY(250px); transition: var(--bezier25); opacity: 0;}
.cowsPartIII.appear {transform: translateY(25px); opacity: 1;}

/* DIV YAOURT */

.yaourt {height: 100dvh; width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow:hidden; transition: var(--bezier25); }

.arrowYaourt { position: absolute; z-index: 100; font-size: 5rem; color: bisque; opacity: 1;}
.arrowYaourt h5 { opacity: 1; font-size: 5rem; }

.yaourtPic {position: relative; width: 100%; height: 100dvh; opacity: 0; transform: translateY(250px); clip-path: polygon(0 0, 100% 0, 100% 10%, 0 30%);}
.yaourtPic.appear {transition: var(--bezier25); transform: translate(0); opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.yaourtPic.left { transition: var(--bezier35); transform: translate(-100%); opacity: 1;}

.yaourtImg {width: 100%;  height: 100dvh;  object-fit: cover; object-position: middle; }

.yaourtFerme {height: 100dvh; width: 100%; transition: var(--bezier25); background: black;}
.yaourtFerme.open { transform: translateX(-100%);}
.yaourtFerme.left { transform: translateX(-200%); transition: var(--bezier35);}

.yaourtFerme h2 {position: absolute; top: 0; opacity: 1;}
.yaourtFerme h2.appear {transform: translateX(200px);}

.yaourtFermeImg {height: 100dvh; width: 100%; object-fit: cover; object-position: middle; }

.yaourtBoire {height: 100dvh; width: 100%; }
.yaourtBoireImg {height: 100dvh; width: 100%; object-fit: cover; object-position: middle; }

/* YAOURT BRASSE */

.yaourtBrasse {position: relative; height: 100dvh; width: 100%; transition: var(--bezier25); transform: translateX(-100%);}
.yaourtBrasse.open {transform: translateX(-200%);}
.yaourtBrasseImg { height: 100dvh; width: 100%; object-fit: cover; object-position: bottom left; }

.yaourtBrasseTXT { position: absolute; display: flex; flex-direction: column; align-items: center; width: 100%; height: 100dvh; font-size: 5rem; color: white; opacity: 0; transform: translate(40%, -100%); transition: var(--bezier25);}
.yaourtBrasseTXT.appear { transform: translate(25%, -90%); opacity: 1; } 

.yaourtBrasseTXT img { width: 15rem; transform: rotate(5deg); }

.yaourtGrec {height: 100dvh; width: 100%; }
.yaourtGrecImg {height: 100dvh; width: 100%; object-fit: cover; object-position: middle; }

.yaourtH1 {position: absolute; width: 100%; height: 95dvh;transform: translateY(-100%); display: flex; flex-direction: column; justify-content: center; align-items: center; transition: var(--bezier35);}
.yaourtH1.decouverte { transform: translateX(-100%); }
.yaourt h2 {font-family: 'myfontBerlin';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 42px; font-weight: 200;transition: var(--bezier25); transform: translateY(300px); opacity: 0;}
.yaourt h2.appear { transform: translateY(0); opacity: 1;}
.yaourt h3 {font-family: 'myfontScript';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(300px); opacity: 0;}
.yaourt h3.appear {transform: translateY(0); opacity: 1;}
.yaourt h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: rgb(249, 150, 43); font-size: 30px; font-weight: 200;}
.yaourtH1 img { width: 300px; transform: translateY(300px); opacity: 0; transition: var(--bezier25); }
.yaourtH1 img.appear { transform: translateY(50px); opacity: 1; }

.yaourtBrasseTXT h3 {font-size: 5dvw; font-family: 'beautiful';}
.folie { font-family: 'ecriture'; font-size: 8rem; color: rgb(216, 171, 14); transform: translate(6vw, -5vh); transition: var(--bezier35) ;}
.coulis { font-family: 'aron'; font-size: 3rem; color: rgb(161, 167, 198); transform: translate(-10vw, -10vh);}

/* DIV FROMAGE FRAIS */

.fromageFrais { width: 100%; height: 100dvh;  }
.fromageFraisPic { width: 100%; height: 100dvh; }
.fromageFraisImg { width: 100%; height: 100%;  object-fit: cover; object-position: middle; }

.fromageFraisPic {position: absolute; opacity: 0; transform: translateY(250px); clip-path: polygon(0 50%, 100% 60%, 100% 10%, 0 30%);}
.fromageFraisPic.appear {transition: var(--bezier25); transform: translate(0); opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.fromageFraisH1 {position: absolute; width: 100%; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.fromageFrais h2 {font-family: 'myfontBerlin';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 42px; font-weight: 200;transition: var(--bezier25); transform: translateY(200px); opacity: 0;}
.fromageFrais h2.appear { transform: translateY(0); opacity: 1;}
.fromageFrais h3 {font-family: 'myfontScript';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(300px); opacity: 0;}
.fromageFrais h3.appear {transform: translateY(0); opacity: 1;}
.fromageFrais h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: rgb(249, 150, 43); font-size: 30px; font-weight: 200;}
.fromageFraisH1 img { width: 200px; transform: translateY(200px); opacity: 0; transition: var(--bezier25); }
.fromageFraisH1 img.appear { transform: translateY(50px); opacity: 1; }


/* DIV FROMAGE Afine */

.fromageAfine { width: 100%; height: 100dvh;  }
.fromageAfinePic { width: 100%; height: 100dvh; }
.fromageAfineImg { width: 100%; height: 100%;  object-fit: cover; object-position: middle; }

.fromageAfinePic {position: absolute; opacity: 0; transform: translateY(250px); clip-path: polygon(0 50%, 100% 60%, 100% 10%, 0 30%);}
.fromageAfinePic.appear {transition: var(--bezier25); transform: translate(0); opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.fromageAfineH1 {position: absolute; width: 100%; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.fromageAfine h2 {font-family: 'myfontBerlin';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 42px; font-weight: 200;transition: var(--bezier25); transform: translateY(200px); opacity: 0;}
.fromageAfine h2.appear { transform: translateY(0); opacity: 1;}
.fromageAfine h3 {font-family: 'myfontScript';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(300px); opacity: 0;}
.fromageAfine h3.appear {transform: translateY(0); opacity: 1;}
.fromageAfine h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: rgb(249, 150, 43); font-size: 30px; font-weight: 200;}
.fromageAfineH1 img { width: 200px; transform: translateY(200px); opacity: 0; transition: var(--bezier25); }
.fromageAfineH1 img.appear { transform: translateY(50px); opacity: 1; }

/* DIV DESSERT */

.dessert { width: 100%; height: 100dvh;  }
.dessertPic { width: 100%; height: 100dvh; }
.dessertImg { width: 100%; height: 100%;  object-fit: cover; object-position: middle; }

.dessertPic {position: absolute; opacity: 0; transform: translateY(250px); clip-path: polygon(0 0, 100% 0, 100% 10%, 0 30%);}
.dessertPic.appear {transition: var(--bezier25); transform: translate(0); opacity: 1; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

.dessertH1 {position: absolute; width: 100%; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.dessert h2 {font-family: 'myfontBerlin';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 42px; font-weight: 200;transition: var(--bezier25); transform: translateY(200px); opacity: 0;}
.dessert h2.appear { transform: translateY(0); opacity: 1;}
.dessert h3 {font-family: 'myfontScript';filter: drop-shadow(black 1px 1px 2px); color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(300px); opacity: 0;}
.dessert h3.appear {transform: translateY(0); opacity: 1;}
.dessert h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: rgb(249, 150, 43); font-size: 30px; font-weight: 200;}
.dessertH1 img { width: 200px; transform: translateY(200px); opacity: 0; transition: var(--bezier25); }
.dessertH1 img.appear { transform: translateY(50px); opacity: 1; }

.eco { width: 100%; height:  30dvh; display:flex; flex-direction: column; justify-content: center; align-items: center; }
.ecoPartI { display: flex; justify-content: center; align-items: center; transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.ecoPartI.appear {transform: translateY(0); opacity: 1;}
.eco h2 {font-family: 'myFontBerlin'; color: rgba(0, 0, 0, 0); font-size: 75px; -webkit-text-stroke: 2px rgba(98,98,98,1);}
.eco h3 {font-family: 'myFontScript'; color: rgb(98, 98, 98); font-size: 50px; font-weight: 200; }
.eco h4 {font-family: 'myFontBerlin'; color: rgb(98, 98, 98); font-size: 25px;}
.eco h4::before { content: ''; width: 75px; height: 4px; background-color: rgb(98, 98, 98); position: absolute; transform: translateX(-125%) translateY(12px); }
.eco h4::after { content: ''; width: 75px; height: 4px; background-color: rgb(98, 98, 98); position: absolute; transform: translateX(25%) translateY(12px); }

.ecoPartII { transition: var(--bezier25); transform: translateY(50px); opacity: 0; }
.ecoPartII.appear {transform: translateY(0); opacity: 1;}

.ecoPartIII {transform: translateY(75px); transition: var(--bezier25); opacity: 0;}
.ecoPartIII.appear {transform: translateY(25px); opacity: 1;}


.pageLaitueI {width: 100%; height: 130dvh;}
/* .pageLaitueI.appear .laitueIImg {} */
.pageLaitueIImg { position: absolute; width: 100%; height: 130dvh; clip-path: polygon(0 35%, 100% 25%, 100% 80%, 0 90%); display: flex; justify-content: center; align-items: center; transition: var(--bezier25); opacity: 0;}
.pageLaitueIImg.appear { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1;}
.pageLaitueIImg img { width: 100%;  object-fit: cover; object-position: center; }



.pageLaitueIRoots { display: flex; justify-content: center; align-items: center; transform: translateY(80px); transition: var(--bezier25); opacity: 0;}
.pageLaitueIRoots.appear {transform: translateY(30px); opacity: 1;}
.pageLaitueIRootsRectangle { position: absolute; width: 320px; height: 50px; background-color: white; }
.pageLaitueIH1 {position: absolute; width: 100%; height: 130dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pageLaitueI h2 {font-family: 'myfontBerlin'; color: white; font-size: 42px; font-weight: 200;transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.pageLaitueI h2.appear { transform: translateY(0); opacity: 1;}
.pageLaitueI h3 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.pageLaitueI h3.appear {transform: translateY(0); opacity: 1;}
.pageLaitueI h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: rgb(249, 150, 43); font-size: 30px; font-weight: 200;}


.lettuceSelect {width: 100%; height: 30dvh; transform: translateY(-30dvh); display: flex; justify-content: center;}
.lettuceSelector { position: absolute; width: 60vw; display: flex; overflow: hidden; }
.lettuceSelector img {  width: 20vw; }
.lettuceContainer { height: 40dvh; width: 20vw; transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.lettuceContainer.appear { transform: translateY(0); opacity: 1; }

.lettuceSelect h1 { font-family: 'myfontScript'; color: grey;font-weight: 100; font-size: 35px; opacity: 1; margin: 0; transform: translate(0); text-align: center;}
.lettuceSelect h2 { font-family: 'myfontBerlin'; color: grey;font-weight: 100; font-size: 35px; opacity: 1; margin: 0; transform: translate(0); text-align: center;}

.rightArrowLaitue { height: 30dvh; transform: translateX(30vw) translateY(50px); display: flex; align-items: center; transition: var(--bezier20); opacity: 0;}
.rightArrowLaitue.appear {transform:  translateX(32vw) translateY(0); opacity: 1;}
.rightArrowLaitue h1 {font-family: 'myfontBerlin';}

.leftArrowLaitue { height: 30dvh; transform: translateX(-30vw) translateY(50px); display: flex; align-items: center; transition: var(--bezier20); opacity: 0;}
.leftArrowLaitue.appear {transform:  translateX(-32vw) translateY(0); opacity: 1;}
.leftArrowLaitue h1 {font-family: 'myfontBerlin';}

.rightArrowL, .leftArrowL {display: none;}
.rightArrowG, .leftArrowG {display: none;}
.rightArrowA, .leftArrowA {display: none;}


.cuisineContainer {width: 100%; height: 110dvh;}

.cuisineContainerImg { position: absolute; width: 100%; height: 80dvh; clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); display: flex; justify-content: center; align-items: center; transition: var(--bezier25); opacity: 1;}
.cuisineContainerImg img { width: 100%; height: 80dvh;  object-fit: cover; object-position: center bottom; }

.cuisineContainerH1 {position: absolute; width: 40%; height: 130dvh; transform: translateY(30dvh) translateX(50vw);}
.cuisineh3top {font-family: 'myfontScript'; color: white; font-size: 62px; line-height: 0px; font-weight: 200; transition: var(--bezier25); transform: translateX(-150px); opacity: 0;}
.cuisineh3top.appear {transform: translateX(-50px); opacity: 1;}

.cuisineh2 {font-family: 'myfontBerlin'; color: transparent; font-size: 92px; font-weight: 200;transition: var(--bezier25); transform: translateX(-100px); opacity: 0; -webkit-text-stroke: 2px rgba(255,255,255,1);}
.cuisineh2.appear { transform: translateX(50px); opacity: 1;}

.cuisineContainerH1 img { width: 30vw; border: solid 2px rgb(105, 105, 105);transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.cuisineContainerH1 img.appear {transform: translateY(0); opacity: 1;}

.cuisineh3title { font-family: 'myfontScript'; color: rgb(60, 60, 60);font-weight: 200;  font-size: 62px; transition: var(--bezier25); transform: translateX(-60px); opacity: 0; }
.cuisineh3title.appear {transform: translateX(-10px); opacity: 1;}

.cuisineh3pro { font-family: 'myfontBerlin'; color: rgb(62, 116, 14);font-weight: 200;line-height: 0px; font-size: 24px; transition: var(--bezier25); transform: translateX(-60px); opacity: 0; }
.cuisineh3pro.appear {transform: translateX(10px); opacity: 1;}

.cuisinep { font-family: 'myFontGabriola'; color: rgb(121, 119, 119); font-size: 24px;line-height: 24px;  font-weight: 200; transition: var(--bezier25); transform: translateX(-50px) translateY(24px); opacity: 0; }
.cuisinep.appear { transform: translateX(0) translateY(24px); opacity: 1; }

.cuisinePicImg { position: absolute; width: 50vw; display: flex; justify-content: center; transform: translateY( calc( 30dvh + 204px ) ); transition: var(--bezier25); opacity: 0;}
.cuisinePicImg.appear {transform: translateY( calc( 30dvh + 154px ) ); opacity: 1;}
.cuisinePicImg img { width: 25vw; object-position: center; }




.mixSelector { width: 60vw; display: flex; overflow: hidden; flex-wrap: wrap;}
.mixSelector img { height: 30dvh;}

.mixSelect { width: 100%; height: 40dvh; transform: translateY(-30dvh); display: flex; justify-content: center;}
.mixSelect h1 {font-family: 'myfontScript'; color: grey;font-weight: 100; font-size: 35px; opacity: 1; margin: 0; transform: translate(0); text-align: center;}


.greensSelect {width: 100%; height: 40dvh; transform: translateY(-30dvh); display: flex; justify-content: center;}
.greensSelect h1 { font-family: 'myfontScript'; color: grey;font-weight: 100; font-size: 35px; opacity: 1; margin: 0; transform: translate(0); text-align: center;}
.greensSelect h2 { font-family: 'myfontBerlin'; color: grey;font-weight: 100; font-size: 35px; opacity: 1; margin: 0; transform: translate(0); text-align: center;}


.pageJeunePousseI {width: 100%; height: 130dvh;}
.pageJeunePousseIImg { position: absolute; width: 100%; height: 130dvh; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); display: flex; justify-content: center; align-items: center;}
.pageJeunePousseIImg img { width: 100%;  object-fit: contain; object-position: center bottom;}
.pageJeunePousseIH1 {position: absolute; width: 100%; height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pageJeunePousseI h2 {font-family: 'myfontBerlin'; color: transparent; font-size: 48px; font-weight: 100; -webkit-text-stroke: 2px rgba(250,250,250,1); transition: var(--bezier25); opacity: 0; transform: translateY(50px);}
.pageJeunePousseI h2.appear {transform: translateY(0); opacity: 1;}
.pageJeunePousseI h3 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); opacity: 0; transform: translateY(50px);}
.pageJeunePousseI h3.appear {transform: translateY(0); opacity: 1;}
.pageJeunePousseI h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: white; font-size: 30px; font-weight: 200;}

.pageJeunePousseIRoots { display: flex; justify-content: center; align-items: center; transform: translateY(80px); transition: var(--bezier25); opacity: 0;}
.pageJeunePousseIRoots.appear {transform: translateY(30px); opacity: 1;}
.pageJeunePousseIRootsRectangle { position: absolute; width: 300px; height: 45px; background-color: rgb(249, 150, 43); }

.didyouknow {width: 100%; height: 50dvh; display: flex;}
.didyouknowDiv1 {position: absolute; right: 0; transform: translateY(10dvh);}
.didyouknowDiv1 img {height: 35dvh;}
.didyouknowDiv2 {position: absolute; right: 5vw;}
.didyouknowDiv2 img {height: 20dvh;}
.didyouknowDiv3 {position: absolute; }
.didyouknowDiv3 img {height: 35dvh;}

.didyouknowInfo {position: absolute; width: 80vw;  display: flex; flex-direction: column; align-items: center;  transform: translateX(10vw); line-height: 0;}
.didyouknowInfo h1 {font-family: 'myfontScript'; color: rgb(144, 144, 144); font-size: 55px; font-weight: 200; transform: translateY(50px); opacity: 0;}
.didyouknowInfo h1.appear {transform: translateY(0); opacity: 1;}
.didyouknowInfo h2 {font-family: 'myfontBerlin'; color: rgb(75, 75, 75); font-size: 55px; transform: translateY(50px); opacity: 0; transition: var(--bezier25);}
.didyouknowInfo h2.appear {transform: translateY(0); opacity: 1;}
.didyouknowInfo h3 {font-family: 'myfontJesus'; color: rgb(75, 75, 75); font-size: 40px; }
.didyouknowInfo h4 {font-family: 'myfontBerlin';color: transparent; font-size: 50px; -webkit-text-stroke: 2px rgba(75,75,75,1); transition: var(--bezier25); transform: translateY(150px); opacity: 0;}
.didyouknowInfo h4.appear {transform: translateY(25px); opacity: 1;}

.lorsque {display: flex; transform: translateX(-10vw);}
.lorsque h1 { font-family: 'myfontScript'; color: rgb(133, 170, 138); font-size: 65px; font-weight: 200; transform: translateY(50px); opacity: 0;}
.lorsque h1.appear {transform: translateY(0); opacity: 1;}

.greenContainer {position: absolute; width: 200px; height: 50px;  clip-path: polygon(0 0, 100% 15%, 95% 95%, 10% 85%); background-color: rgb(133, 170, 138);}
.greenContainer.appear {clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.div {transform: translateX(-20vw) translateY(50px); transition: var(--bezier25); opacity: 0;}
.div.appear {transform: translateX(-20vw) translateY(0); opacity: 1;}
.tendre {position: absolute; display: flex; }
.tendre h3 {font-weight: 200; transform: translateY(15px); width: 220px;}
.tendre h1 {transform: translateX(10px);}

.pageGreensI {width: 100%; height: 130dvh;}
.pageGreensIImg { position: absolute; width: 100%; height: 130dvh; clip-path: polygon(0 15%, 100% 10%, 100% 85%, 0 90%); display: flex; justify-content: center; align-items: center;}
.pageGreensIImg.appear { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.pageGreensIImg img { width: 100%;  object-fit: contain; object-position: center bottom;}
.pageGreensIH1 {position: absolute; width: 100%; height: 130dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pageGreensI h2 {font-family: 'myfontBerlin'; color: transparent; font-size: 48px; font-weight: 100; -webkit-text-stroke: 2px rgba(250,250,250,1);}
.pageGreensI h3 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.pageGreensI h3.appear {transform: translateY(0); opacity: 1;}
.pageGreensI h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: white; font-size: 48px; font-weight: 200; transform: rotate(2deg);}

.pageGreensIRoots { display: flex; justify-content: center; align-items: center; transform: translateY(80px); transition: var(--bezier25); opacity: 0;}
.pageGreensIRoots.appear {transform: translateY(30px); opacity: 1;}
.pageGreensIRootsRectangle { position: absolute; width: 300px; height: 45px; background-color: rgb(174, 161, 118); transform: rotate(-1deg);}


.pageAromatiqueI {width: 100%; height: 130dvh;}
.pageAromatiqueIImg { position: absolute; width: 100%; height: 130dvh; transition:var(--bezier25); clip-path: polygon(0 10%, 100% 15%, 100% 90%, 0 85%); display: flex; justify-content: center; align-items: center;}
.pageAromatiqueIImg.appear { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 0);}
.pageAromatiqueIImg img { width: 100%;  object-fit: contain; object-position: center bottom;}
.pageAromatiqueIH1 {position: absolute; width: 100%; height: 130dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pageAromatiqueI h2 {font-family: 'myfontBerlin'; color: transparent; font-size: 48px; font-weight: 100; -webkit-text-stroke: 2px rgba(250,250,250,1); transition:var(--bezier25); transform: translateY(50px); opacity: 0;} 
.pageAromatiqueI h2.appear { transform: translateY(0); opacity: 1;}
.pageAromatiqueI h3 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200; transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.pageAromatiqueI h3.appear {transform: translateY(0); opacity: 1;}
.pageAromatiqueI h4 {position: absolute; text-align: center; width: 320px; font-family: 'myfontBerlin'; color: white; font-size: 30px; font-weight: 200;}

.pageAromatiqueIRoots { display: flex; justify-content: center; align-items: center; transform: translateY(80px); transition: var(--bezier25); opacity: 0;}
.pageAromatiqueIRoots.appear {transform: translateY(30px); opacity: 1;}
.pageAromatiqueIRootsRectangle { position: absolute; width: 300px; height: 45px; background-color: rgb(249, 150, 43); }


.pageMgI {width: 100%; height: 130dvh;}
.pageMgIImg { position: absolute; width: 100%; height: 130dvh; clip-path: polygon(0 10%, 100% 15%, 100% 90%, 0 85%); transition:var(--bezier25); display: flex; justify-content: center; align-items: center;}
.pageMgIImg.appear { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);}
.pageMgIImg img { width: 100%;  object-fit: contain; object-position: center bottom;}
.pageMgIH1 {position: absolute; width: 100%; height: 130dvh; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.pageMgI h2 {position: absolute; font-family: 'myfontBerlin'; color: transparent; font-size: 48px; font-weight: 100; -webkit-text-stroke: 2px rgba(250,250,250,1);}
.pageMgI h3 {font-family: 'myfontScript'; color: white; font-size: 62px; font-weight: 200;transform: translateY(50px); transition: var(--bezier25); opacity: 0;}
.pageMgI h3.appear {transform: translateY(0); opacity: 1;}
.pageMgI h4 {text-align: center; width: 320px; font-family: 'myfontBerlin'; color: white; font-size: 30px; font-weight: 200; transition: var(--bezier25); transform: translateY(50px); opacity: 0;}
.pageMgI h4.appear {transform: translateY(0px); opacity: 1;}

.pageMgIRoots { display: flex; justify-content: center; align-items: center; transform: translateY(30px); }
.pageMgIRootsRectangle { position: absolute; width: 300px; height: 45px; background-color: rgb(249, 150, 43); }



.pageLaitue { width: 100%; height: 100dvh; background: #000; display: flex; align-items: center; justify-content: center;}

.pageLaitueImg { height: 75dvh;  transition: transform 120s ease-out;}
.pageLaitueImg.appear {transform: rotate(90deg) scale(1.3);}

/* @media (max-width: 680px) {.pageLaitueImg {translate: -50%;}} */
/* @media (max-width: 680px) {.pageLaitueImg {}} */
@media (max-width: 680px) {.pageLaitueImages {width: 60vw; display: flex; justify-content: right;}}

.pageBabyLeaves {z-index: 2; width: 100%; height: 100dvh; background-color: black; display: flex; align-items: center; justify-content: center;}
.pageBabyLeavesImg {height: 50dvh; margin-top: 10vh; transition: transform 120s ease-out;}
.pageBabyLeavesImg.appear { transform: rotate(45deg) scale(1.3);}

.pageBabyLeavesImgBis {height: 60dvh; transition: transform 180s ease-out;}
.pageBabyLeavesImgBis.appear { transform: rotate(-45deg) scale(1.3) } 

/* @media (max-width: 680px) {.pageBabyLeavesImg {position: absolute; translate: 0 -50%;} .pageBabyLeavesImgBis {position: absolute; translate: 0 -50%;}} */
@media (max-width: 680px) {.pageBabyLeavesImages {width: 60vw; display: flex; justify-content: right;}}

.pageGreens {width: 100%; height: 100dvh; background-color: black; display: flex; align-items: center; justify-content: center;}
.pageGreensImg { height: 70dvh; transition: transform 180s ease-out;}
.pageGreensImg.appear {transform: rotate(-45deg) scale(1.3);}

/* @media (max-width: 680px) {.pageGreensImg {translate: -50%;}} */
@media (max-width: 680px) {.pageGreensImages {width: 60vw; display: flex; justify-content: right;}}

.pageAromatique {width: 100%; height: 100dvh; background-color: black; display: flex; align-items: center; justify-content: center;}
.pageAromatiqueImg { height: 70dvh;transition: transform 180s ease-out;}
.pageAromatiqueImg.appear {transform: rotate(100deg) scale(1.3);}

/* @media (max-width: 680px) {.pageAromatiqueImg {translate: -50%;}} */
@media (max-width: 680px) {.pageAromatiqueImages {width: 60vw; display: flex; justify-content: right;}}

.pageMicroGreens {width: 100%; height: 100dvh; background-color: black; display: flex; align-items: center; justify-content: center;}
.pageMicroGreensImg {height: 70dvh;transition: transform 180s ease-out; }
.pageMicroGreensImg.appear {transform: rotate(-90deg) scale(1.3);}

/* @media (max-width: 680px) {.pageMicroGreensImg {translate: -50%;}} */
@media (max-width: 680px) {.pageMicroGreensImages {width: 62vw; display: flex; justify-content: right;}}

.pageInfo {height: 50dvh; width: 100%; background-color: black;}

/* PRODUIT */

.selectProduit {position: fixed; top: 80dvh; width: 100%; height: 20dvh; transform: translateY(-10dvh); display: flex; justify-content: center;}
.selectorProduit { position: absolute; width: 80vw; display: flex;justify-content:center;  overflow: hidden;}
.selectorProduit img { height: 20dvh; width: 16vw; object-fit: contain; opacity: 0; transform: translateY(50px); transition: var(--bezier25);}
.contProduit { height: 30dvh; width: 16vw; transition: var(--bezier25); display: flex; justify-content: center; align-items: center;}

.selectProduit h1 { font-family: 'myfontScript'; color: grey;font-weight: 100; font-size: 35px; margin: 0; text-align: center; width: 16vw; opacity: 0; transform: translateY(-50px); transition: var(--bezier25);}
.selectProduit a {text-decoration: none;}

.btnProduit { position: absolute; top: 50dvh; margin-left: 100px;}

.selectorProduit img.appear { opacity: 1; transform: translateY(0); }
.selectProduit h1.appear { opacity: 1; transform: translateY(0);}


.articleContainer {width: 100%; height: 100dvh; background-color: white; display: flex; justify-content: center;opacity:0; align-items: top; position: absolute;  transition: var(--bezier25); overflow-x: hidden;} 
.articleImg {height: 80dvh; transition: var(--bezier15);}
@media (max-width: 680px) {.articleDiv {width: 60vw; display: flex; justify-content: right;}}

.articleDiv { opacity: 0; transform: translateY(100px); transition: var(--bezier25); height: 80dvh;}
.articleDiv.appear { opacity: 1; transform: translateY(0); }

.articleInfo {z-index: 20;}

.articleContainer h1 { font-family: 'myfontjesus'; }
.articleContainer p { font-family: 'myfont';}

/* .body { overflow: hidden; } */

img {max-width: 100%;}
.decouvrir-container {  max-width: 100vw; margin-inline: auto; padding-inline: 2rem; display: flex; height: 100dvh; justify-content: center; align-items: center;}
.stacked {display: grid; }
.stacked > * { grid-column: 1 / 2; grid-row: 1 / 2; }
.product-grid {display: grid; gap: .125rem; transition: var(--bezier15); width: 80%;}
.grid-options {  grid-template-columns: repeat(auto-fit, minmax(15rem, .8fr)); }

.card {aspect-ratio: 1 / 1; width: 100%; max-height: 100dvh; }
.card__content {background: rgb(218, 218, 218 , .8); align-self: end; margin: .5rem; padding: .5rem; box-shadow: 0 .25rem 1rem rgb(0 0 0 / .1);}
.card__title {font-size: 1.25rem; line-height: 1.1; color: firebrick;  }
.card-description {font-size: 1.75rem; }
.card__img {width: 100%; aspect-ratio: 1 / 1; object-fit: cover;}
.featured { grid-row: span 2; grid-column: span 2; transition: var(--bezier15); }

@media ( min-width: 40em ) {
    .card.featured {grid-row: span 2; grid-column:  span 2; } 
    /* .card.featured .card__img { aspect-ratio: 1 / 1.25; } */
}


/* YAOURTS */

.yourtSplash { width: 100%; height: 100dvh; background-color: black; align-content: center; }
.yaourtRotate { background: black; }

.nosYaourt h1 { position:absolute; color: white; font-size: 3rem; font-family: 'beautiful' ; top: 30dvh; margin-left: 50dvw; transition: var(--bezier25); }

.buttonYaourtN:hover { cursor: pointer; }

.big { display: flex; transform: translateX(30%); height: 100%;  }

.callitContainer {height: 100%; width: 55%; margin-left: 20px;}
.callit { height: 95%; width: 100%; object-fit: cover; object-position: bottom left; border-radius: 10px; margin: 20px; filter: grayscale(80%);}

.yaourtsPage { width: 100%; height: 100%; }
.yaourts__img {width: 100%; height: 100%; object-fit: cover; object-position: bottom; }

.RightSideCurtain { position: fixed; transform: translateY(100dvh); width: 100dvw; height: 100dvh; background: rgb(15, 15, 15); transition: var(--bezier15); z-index: 10;  }
.RightSideCurtain[position="ok"] {transform: translateY(0); }
.RightSideCurtain[position="notok"] {transform: translateY(100dvh);}

.BCOn {position: fixed; width: 100dvw; height: 100dvh;  background: rgb(15, 15, 15); transition: var(--bezier15); z-index: 10; }
.BCOn[position="ok"] {transform: translateY(0); }
.BCOn[position="notok"] {transform: translateY(100dvh)};

.decouverte { position: fixed; transform: translateX(100dvw); background: rgb(15, 15, 15);   transition: var(--bezier35); z-index: 15; height: 80%; }
.decouverte[position="ok"] {transform: translateX(0);}

.carouselbody { display: flex; justify-content: center; align-items: center; height: 100vh; position: fixed; z-index: 50;}
.carousel { width: 100%; max-width: 600px; overflow: hidden; text-align: center; white-space: nowrap; position: relative;  }
.carousel-text {font-size: 3rem; font-weight: bold; display: flex; justify-content: center; align-items: center; height: 1em; overflow: hidden; color: white; }
.letter { display: inline-block; position: relative; transition: transform 0.5s ease, opacity 0.5s ease; opacity: 1;}