:root {
    --tab-height: 4vw;
    --padding-m: 1vw;
    --border-radius-m: 2vw;
}

@font-face {
    font-family: 'lack';
    src: url("../fonts/Lack-Regular.otf") format("opentype");
}

@font-face {
    font-family: 'opti';
    src: url("../fonts/OPTIsupAuvantGothicBold.otf") format("opentype");
}

@media screen and (min-width: 800px) {
    :root {
        --tab-height: 3vw;
    }
}

html {
    height: 100%;
    width: 100%;
    /* padding: var(--padding-m); */
    position: relative;
    box-sizing: border-box;
    /* width: 100vw;
    height: 100vh; */
}


body {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    font-family: 'opti';
}

.section {
    box-sizing: border-box;
    height: calc(100% - calc(var(--tab-height)*2));
    width: 100%;
    position: absolute;
    transition: top 0.5s ease-in-out;
    padding: var(--padding-m);
    display: flex;
    flex-direction: column;
}

.content-container {
    box-sizing: border-box;
    margin-top: var(--padding-m);
    height: 80%;
    
    border-radius: var(--border-radius-m);
    transition: font-size 0.5s ease-in-out;
    /* display: flex;
    flex-wrap: wrap; */

    
}

.content-row {
    display: flex;
    
  
    
}



/* --------- SECTION HISTOIRE */


#histoire {
    background-color: rgb(226, 1, 1);
}

.title-container {
    border-radius: 2vw;
    background-color: white;
   

}

.title {
    text-transform: uppercase;
    font-size: calc((1.5vh + 2vw));
    text-align: center;
    cursor: pointer;
}

#histoire-title, #ingredients-title {
    /* text-align: left; */
    transition: font-size 0.5s ease-in-out;
    cursor: pointer;
    
}

.big-title {
    font-size: calc((5vh + 5vw)) !important;
    text-align: center;
    padding: 1vh;
    line-height: 11vh;
}
@media screen and (max-width: 1100px) {
    .big-title {
        font-size: calc((5vh + 5vw)) !important;
        text-align: center;
        padding: 1vh;
        line-height: 9vh;
    }
}

@media screen and (max-width: 100px) {
    .big-title {
        line-height: 9vh;
    }
}

@media screen and (max-width: 800px) {
    .big-title {
        line-height: 7vh;
    }
}

@media screen and (max-width: 550px) {
    .big-title {
        line-height: 6vh;
    }
}

@media screen and (max-width: 550px) {
    .big-title {
        line-height: 6.5vh;
    }
}

.image{
    box-sizing: border-box;
    height: fit-content;
    width: 100%;
    background-color: white;
    border-radius: var(--border-radius-m);
    display: flex;
    flex-wrap: wrap;
    padding: 1vh;
    overflow-x: scroll;
}



.history{
    border-radius: var(--border-radius-m);
    height: 49%;
    overflow-y: scroll;
    background-color: white;
    background-image: url(../images/45\ copie.png);
    margin-top: var(--padding-m);
}
.highlight {
    display: inline-table;
    padding: 7px;
    background:white;
    /* opacity: 70%; */
    border-radius: 20px;
    border: solid 3px rgb(226, 1, 1);

  }

@media screen and (max-width: 1260px) {
    .history {
        height: 51%;
    }
}
@media screen and (max-width:1100px) {
    .history {
        height: 60%;
    }
}
@media screen and (max-width: 1050px) {
    .history {
        height: 59%;
    }
}
@media screen and (max-width: 1000px) {
    .history {
        height: 60%;
    }
}
@media screen and (max-width: 800px) {
    .history {
        height: 66%;
    }
}
@media screen and (max-width: 720px) {
    .history {
        height: 67%;
    }
}
@media screen and (max-width: 660px) {
    .history {
        height: 67.5%;
    }
}
@media screen and (max-width: 600px) {
    .history {
        height: 68.2%;
    }
}
@media screen and (max-width: 555px) {
    .history {
        height: 69.6%;
    }
}

@media screen and (max-width: 545px) {
    .history {
        height: 60.8%;
    }
}

@media screen and (max-width: 490px) {
    .history {
        height: 62%;
    }
}

.content-row .indications {
    width: 50%;
    padding: 1.5vh;
    overflow: auto;
    text-transform: uppercase;
    color:black ;
}

@media screen and (max-width: 700px) {
    .content-row .indications {
        padding: 2vh;
    }
}

.content-row .texte {
    width: 90%;
    padding: 2vh;
    font-size: 3.2vh;
    color:  rgb(226, 1, 1);
    overflow: auto;
    text-align: center;


}
@media screen and (max-width: 900px) {
    .content-row .texte {
        padding: 1vh;
        font-size: 2.7vh;
    }
}

@media screen and (max-width: 600px) {
    .content-row .texte {
        padding: 1vh;
        font-size: 2.5vh;
        line-height: 2.3vh;
    }
}

.cake-images {
    /* justify-content: space-around; */
    gap: 1.5vw;
    cursor: pointer;
    /* top: 30%; */

    
    

}

/* .cake-images img {
    max-width: 100%;
    max-height: 100%;
} */

/* @media screen and (max-width: 1000px) {
    .cake-images {
        top: 20%;
    }
} */

/* @media screen and (max-width: 800px) {
    .cake-images {
        bottom: 2%;
    }
} */

.texte {
    font-family: 'lack';
   
}





.indications {
    font-size: 3.3vh;
}

/* Click petites images page rouge */
#button-panel,
.button {

    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

#button-panel:hover {
    transform: scale(90%) translate(0%, 0%);
}

.panel {
    /* display: none; */
    position: fixed;
    top: 45%;
    left: 10%;
    width: 20vh;
    transform: translateY(100%) scale(0);
    transition: transform 0.5s ease-in-out;
    mix-blend-mode: hard-light;
    opacity: 80%;

}

.panneau1 {
    width: 25vh;
}

.switch-panel.panel {
    /* display: block; */
    display: flex;
    align-items: center;
    transform: translateX(0%) rotate(0) scale(1);
}

.bouton1 {
    width: 35vh;
}

/* buttom2 */
#button-panel2,
.button {
 transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

#button-panel2:hover {
    transform: scale(90%) translate(0%, 0%);
}

.panel2 {
    /* display: none; */
    position: absolute;
    top: 78%;
    left: 53%;
    width: 20vh;
    transform: translateY(100%) scale(0);
    transition: transform 0.5s ease-in-out;
    mix-blend-mode: hard-light;
    opacity: 80%;

}

.panneau2 {
    width: 25vh;
}

.switch-panel2.panel2 {
    /* display: block; */
    display: flex;
    align-items: center;
    transform: translateX(0%) rotate(0) scale(1);
}

.bouton2 {
    width: 35vh;
}

/* buttom3 */
#button-panel3,
.button {
    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

#button-panel3:hover {
    transform: scale(90%) translate(0%, 0%);
}

.panel3 {
    /* display: none; */
    position: absolute;
    top: 65%;
    left: 2%;
    
    width: 20vh;
    transform: translateY(100%) scale(0);
    transition: transform 0.5s ease-in-out;
    mix-blend-mode: hard-light;
    opacity: 80%;

}

.panneau3 {
    width: 25vh;
}

.switch-panel3.panel3 {
    /* display: block; */
    display: flex;
    align-items: center;
    transform: translateX(0%) rotate(0) scale(1);
}

.bouton3 {
    width: 35vh;
}

/* buttom4 */
#button-panel4,
.button {

    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

#button-panel4:hover {
    transform: scale(90%) translate(0%, 0%);
}

.panel4 {
    /* display: none; */
    position: absolute;
    top: 5%;
    right: 12%;
    transform: translate(-50%,-50%);
    width: 20vh;
    transform: translateY(100%) scale(0) rotate(180deg);
    transition: transform 0.5s ease-in-out;
    mix-blend-mode: hard-light;
    opacity: 80%;

}

.panneau4 {
    width: 25vh;
}

.switch-panel4.panel4 {
    /* display: block; */
    display: flex;
    align-items: center;
    transform: translateX(0%) rotate(0) scale(1);
}

.bouton4 {
    width: 35vh;
}

/* buttom5 */
#button-panel5,
.button {
    transition: background-color 0.5s ease-in-out, border-radius 0.5s ease-in-out;
}

#button-panel5:hover {
    transform: scale(90%) translate(0%, 0%);
}

.panel5 {
    /* display: none; */
    position: fixed;
    top: 20%;
    right: 22%;
    transform: translate(-50%,-50%);
    width: 20vh;
    transform: translateY(100%) scale(0);
    transition: transform 0.5s ease-in-out;
    mix-blend-mode: hard-light;
    opacity: 80%;

}

.panneau5 {
    width: 25vh;
    
}

.switch-panel5.panel5 {
    /* display: block; */
    display: flex;
    align-items: center;
    transform: translateX(0%) rotate(0) scale(1);
}

.bouton5 {
    width: 35vh;
}

/* --------- SECTION INGREDIENTS */


#ingredients {
    background-color: rgb(1, 78, 24);
    top: calc(100vh - calc(var(--tab-height)*2));

}

#ingredients.fullPage {
    top: calc(var(--tab-height)*1) !important;
}

.content-container1 {
    box-sizing: border-box;
    height: 97%;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    transition: font-size 0.5s ease-in-out;
}

.content-container2 {
    margin-top: var(--padding-m);
    width: 65%;
    height: 86.5%;
    background-color: white;
    border-radius: var(--border-radius-m);
    transition: font-size 0.5s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
    padding-bottom: 10px;
    
}

@media screen and (max-width: 1000px) {
    .content-container2 {
        height: 91%;
    }
}

@media screen and (max-width: 900px) {
    .content-container2 {
        height: 91%;
    }
}

@media screen and (max-width: 700px) {
    .content-container2 {
        height: 92.5%;
    }
}

@media screen and (max-width: 600px) {
    .content-container2 {
        height: 93%;
    }
}

@media screen and (max-width: 500px) {
    .content-container2 {
        height: 93.5%;
    }
}

.cake:hover {
    transform: scale(90%);
}

.cake2:hover {
    transform: scale(90%);
}

.cake {
    width: 29vw;
    padding: 10px;

}

@media screen and (max-width: 1230px) {
    .cake {
        width: 58vw;
    }
}

.cake2 {
    width: 29vw;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;

}

@media screen and (max-width: 1230px) {
    .cake2 {
        width: 58vw;
        border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
    }
}

.content-container3 {
    margin-top: var(--padding-m);
    margin-left: var(--padding-m);
    height: 86.5%;
    width: 33.7%;
    background-color: white;
    border-radius: var(--border-radius-m);
    transition: font-size 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding-bottom: 10px;
    overflow-y: scroll;
    

}

@media screen and (max-width: 1000px) {
    .content-container3 {
        height: 91%;
    }
}

@media screen and (max-width: 900px) {
    .content-container3 {
        height: 91%;
    }
}

@media screen and (max-width: 700px) {
    .content-container3 {
        height: 92.5%;
    }
}

@media screen and (max-width: 600px) {
    .content-container3 {
        height: 93%;
    }
}

@media screen and (max-width: 500px) {
    .content-container3 {
        height: 93.5%;
    }
}

.icing {
    width: 30vw;
    padding: 18px;

}

@media screen and (max-width: 1230px) {
    .icing {
        width: 30.5vw;
        padding: 5px;
    }
}

.icing2 {
    width: 30vw;
    padding: 18px;
    border-radius: 3vw;
    margin-left: 0.8vh;
}

@media screen and (max-width: 1230px) {
    .icing2 {
        width: 30vw;
        padding: 5px;
        border-radius: 3vw;

    }
}
@media screen and (max-width: 600px) {
    .icing2 {
        margin-left: 0.3vh;
    }
}
.icing:hover {
    transform: scale(90%);
}

.icing2:hover {
    transform: scale(90%);
}

.content-container4 {
    box-sizing: border-box;
    width: 65%;
    font-family: 'lack';
    color: rgb(1, 78, 24);
    margin-top: var(--padding-m);
    background-color: white;
    border-radius: var(--border-radius-m);
    transition: font-size 0.5s ease-in-out;
    font-size: calc((1.5vh + 2vw));
    text-align: center;
    top: 50%;
}

.content-container5 {
    box-sizing: border-box;
    margin-top: var(--padding-m);
    margin-left: var(--padding-m);
    width: 33.65%;
    font-family: 'lack';
    color: rgb(1, 78, 24);
    background-color: white;
    border-radius: var(--border-radius-m);
    transition: font-size 0.5s ease-in-out;
    font-size: calc((1.5vh + 2vw));
    text-align: center;
}

/* --------- SECTION RECETTE */

#recette {
    background-color: rgb(13, 13, 144);
    top: calc(100vh - calc(var(--tab-height)*1));
}

#recette.fullPage {
    top: calc(var(--tab-height)*2);
}

.content-container6 {
    box-sizing: border-box;
    margin-top: var(--padding-m);
    height: 100vh;
    background-color: white;
    border-radius: var(--border-radius-m);
    transition: font-size 0.5s ease-in-out;
    position: relative;
    overflow: hidden;

}
.swiper {
    width: 100%;


}


.texte2 {
    font-family: 'lack';
    font-size: calc((5vh + 5vw)) !important;
    text-align: center;
    padding: 3vh;
    text-transform: uppercase;
    color: rgb(13, 13, 144);
    align-items: center;

}

.texte3 {
    font-family: 'lack';
    left: 50%;
    top: 0%;
    transform: translate(-50%,0%);
    position: relative;
    font-size: calc((5vh + 5vw)) !important;
    text-align: center;
    padding: 3vh;
    text-transform: uppercase;
    color: rgb(13, 13, 144);
    mix-blend-mode: hard-light;


}


/* .swiper .swiper-pagination-bullet-active {
    background: rgb(13, 13, 144);
    height: 20px;
    width: 20px;
    border-radius: 10%;
    opacity: 70%;
    mix-blend-mode: hard-light;


} */

.swiper .swiper-button-next, .swiper .swiper-button-prev{
    color: rgb(13, 13, 144);
    mix-blend-mode: hard-light;
    position: absolute;
    top: 94%;
   
}


.swiper-slide{
    overflow: hidden;
}
.swiper-slide div{
    position: absolute;
}
.étape {
    height: 100vh;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    mix-blend-mode: darken;
}


.dégustez{
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 40vw;
}
@media screen and (max-width: 800px) {
    .dégustez {
        top: 70%;
        transform: translate(-50%,-50%);
        height: 60vw;
    }
}

.content-container6{overflow: hidden}

#accueil{
   
    width: 100vw;
    height: 100vh;
    position: fixed;
    top:0;
    z-index: 10;
    opacity: 0%;
    transition: opacity 0.5s ease-in-out;
}


#roundButton{
    position: fixed;
    width: 30vh;
    height: 30vh;
    border-radius: 50%;
    background-color: transparent;
    z-index: 11;
    left: 50%;
    top:50%;
    transform: translate(-50%,-50%);
    cursor: pointer;
}

.visibleIframe{
    opacity: 100% !important;
  
}

/* #accueil:hover{
    width: 50vw;
} */

/* ::selection {
    color: rgba(0,0,0,0.0);
  text-shadow: 0px 0px 7px rgb(226, 1, 1);
}

::-moz-selection {
     color: rgba(0,0,0,0.0);
  text-shadow: 0px 0px 7px rgb(226, 1, 1);
} */

::selection {
    color: rgba(255, 255, 255, 0);
   text-shadow: 0px 0px 7px rgb(207, 207, 207);
}

#ingredients-title a::selection {
   color: rgba(0, 0, 0, 0.0);
   text-shadow: 0px 0px 7px rgb(1, 78, 24);
}

#histoire-title span::selection {
   color: rgba(0, 0, 0, 0.0);
   text-shadow: 0px 0px 7px rgb(226, 1, 1);
}

#recette .title a::selection {
   color: rgba(0, 0, 0, 0.0);
   text-shadow: 0px 0px 7px rgb(13, 13, 144);
}

.cakok {
    border: 0.5vh rgb(1, 78, 24)  solid;
    color:  rgb(1, 78, 24);
    border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 3rem;
    padding-right: 3rem;
    width: 24vw;
    height: 32vh;
    margin-top: 10px;
    /* line-height: 4vh; */
    text-align: center;
    cursor: pointer;
}

@media screen and (max-width: 1400px) {
    .cakok {
        border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
        
    }
}
@media screen and (max-width: 1230px) {
    .cakok  {
        border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
        width: 49vw;
        height: 40vh;
        margin-top:10px;
    }
}
@media screen and (max-width: 1000px) {
    .cakok {
        border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
        width: 45vw;
        height: 30vh;
        margin-top: 10px;
    }
}
@media screen and (max-width: 700px) {
    .cakok  {
        width: 40vw;
        height: 20vh;
        margin-top: 10px;
        border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
       
    }
}
@media screen and (max-width: 500px) {
    .cakok  {
       
        border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
        width: 34vw;
        height: 16vh;
        margin-top: 10px;
    }
}
p{
    font-family: 'lack', sans-serif;
    font-size: 5.1vw;
    text-transform: uppercase;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
@media screen and (max-width: 1200px) {
    p {
        font-size: 7vw;
    }
}
.text-cake.switch-on {
    color:  rgb(255, 255, 255);
    background-color:  rgb(1, 78, 24);
}


.icingok {
    border: 0.5vh rgb(1, 78, 24)  solid;
    color:  rgb(1, 78, 24);
    border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
    /* padding-bottom: 0.5rem; */
    /* padding-left: 3rem;
    padding-right: 3rem; */
    width: 30vw;
    height: 38vh;
    cursor: pointer;
    margin-left: 2.2vh;

    text-align: center;
}

@media screen and (max-width: 1400px) {
    .icingok {
        border-radius: 30px 30px 30px 30px / 30px 30px 30px 30px;
        
    }
}
@media screen and (max-width: 1230px) {
    .icingok  {
        border-radius: 25px 25px 25px 25px / 25px 25px 25px 25px;
        width: 31vw;
        height: 33vh;
        margin-left: 1vh;
    }
}
@media screen and (max-width: 1000px) {
    .icingok {
        border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
        width: 30vw;
        height: 20vh;
    }
}
@media screen and (max-width: 700px) {
    .icingok  {
        width: 29vw;
        height: 17vh;
        border-radius: 20px 20px 20px 20px / 20px 20px 20px 20px;
        margin-left: 1.4vh;
    }
}
@media screen and (max-width: 600px) {
    .icingok  {
       
        border-radius: 10px 10px 10px 10px / 10px 10px 10px 10px;
        width: 28.5vw;
        height: 12vh;
        margin-left: 1vh;
        
    
        
    }
}
h1{
    font-family: 'lack', sans-serif;
    font-size: 5.1vw;
    text-transform: uppercase;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);

}
.text-cake:hover {
    transform: scale(90%);
}