@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200&family=Redressed&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;1,200&family=Redressed&display=swap');




/*****Version DESKTOP*****/



body {  
    font-family: "Nunito", sans-serif;
    background: url(images/fond.jpg);
    margin: 0;
    padding: 0;
}
html {
    scroll-behavior: smooth;
}

main {
 
    width: 1500px;
    margin: 0 auto;
}


.flotte {
    width: 200px; 
    height: 200px; 
    object-fit: cover; 
    max-width: 100%;
    transition: transform .2s;
    margin: 20px;
    border-radius: 10px;
}


h1 {
font-size: 3.5em;
text-align: center;
font-family: 'Redressed', cursive;
}

h2 {
    font-size: 25px;
    text-decoration: underline overline #485003;
    font-style: italic;
    display: right;
}


.flotte:hover {
  transform: scale(1.4); /* (140% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

p {
    margin-top : 10px;
    font-size: 20px;
}

/***** Création d'un fond jaune pour la div recette *****/


.fondText {
    width: 70%;
    padding: 5px 15px;
    text-align: start;
    
}

.fondText2 {
    width: 80%;
    padding: 5px 15px;
    text-align: end;
    
}

/***** Création d'un fond gris pour la section recette *****/
.section {
    /*max-height: 300px;*/
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    display: flex;
    justify-content: flex-end;
    border-radius: 10px 10px 10px 10px;
}

#sectionLeft1 {
    /*max-height: 300px;*/
    display: flex;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 15px;
    justify-content: space-around;
    border-radius: 10px ;
}
#sectionLeft2 {
    /*max-height: 300px;*/
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 15px;
    display: flex;
    justify-content: space-around;
    border-radius: 10px;
    flex-direction: row-reverse;
}
#sectionLeft3 {
    /*max-height: 300px;*/
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 15px;
    display: flex;
    justify-content: space-around;
    border-radius: 10px ;
}
#sectionLeft4 {
    /*max-height: 300px;*/
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 15px;
    display: flex;
    justify-content: space-around;
    border-radius: 10px;
    flex-direction: row-reverse;
}
#sectionLeft5 {
    /*max-height: 300px;*/
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 15px;
    display: flex;
    justify-content: space-around;
    border-radius: 10px ;
}
#sectionLeft6 {
    /*max-height: 300px;*/
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 15px;
    display: flex;
    justify-content: space-around;
    border-radius: 10px;
    flex-direction: row-reverse;
}

.fondJaune {
    display: flex;
    width: 55%;
    font-weight: bold;
    background-color : rgb(255 255 244 / 35%);
    /*justify-content: space-between;*/
    border-radius: 10px;
}
.img-flotte {
    margin: auto;
}
.recipe {
    display: flex;
    align-items: center;
}
.recipe-reverse {
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    padding: 20px;
}

.fondJaune2 {
    display: flex;
    width: 55%;
    font-weight: bold;
    background-color : rgb(255 255 244 / 35%);
    justify-content: space-between;
    border-radius: 10px 10px 10px 10px;
}

/***** buton love*****/
.btn-love {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.button {
    background-color:#383838;
    border: none;
    color: white;
    padding: 15px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 4px 2px;
    border-radius: 2rem;
    width: 110px;
}


.button:hover {
    background-color: #5964fc;
    font-weight: 700;
}

/*.button strong {
    font-size: 1.5rem;
}*/

/*****Etoiles******/

.rating a {
    color: rgb(144 144 144 );
    text-decoration: none;
    font-size: 2.5em;
    transition: color .4s;
 }
.rating a:hover,
.rating a:focus,
.rating a:hover ~ a,
.rating a:focus ~ a {
    color: rgb(238, 255, 0);
    cursor: pointer;
}
.rating a {
    float: right;
 }

.mrtn-font-discret {
    font-size: 1.5rem;
    color: white
}

/*****Recipe / ingredients*****/

.accordion {
    max-width: 400px;
    padding: 30px 0 30px 30px;
}


.accordion .contentBx {
    position: relative;
    margin: 10px 0px;
}

.accordion .contentBx .label {
    position: relative;
    padding: 10px;
    background: rgb(141, 137, 137);
    color: rgb(243, 234, 234);
    color: bold;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 10px 10px 10px 10px;
}

.accordion .contentBx .label::before {
    content: '+';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.5em;
    border-radius: 10px 10px 10px 10px;
}

.accordion .contentBx.active .label::before {
    content: '-';
}

.accordion .contentBx .content {
    position:relative;
    background: rgb(248, 248, 225);
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    overflow-y: auto;
    border-radius: 10px 10px 10px 10px;
}

.accordion .contentBx.active .content {
    height: 150px;
    padding: 10px;
}

.accordion-reverse {
    max-width: 400px;
    padding: 30px 30px 30px 0;
}

.accordion-reverse .contentBx {
    position: relative;
    margin: 10px 0px;
}

.accordion-reverse .contentBx .label {
    position: relative;
    padding: 10px;
    background: rgb(141, 137, 137);
    color: rgb(243, 234, 234);
    color: bold;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 10px 10px 10px 10px;
}

.accordion-reverse .contentBx .label::before {
    content: '+';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.5em;
    border-radius: 10px 10px 10px 10px;
}

.accordion-reverse .contentBx.active .label::before {
    content: '-';
}

.accordion-reverse .contentBx .content {
    position:relative;
    background: rgb(248, 248, 225);
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    overflow-y: auto;
    border-radius: 10px 10px 10px 10px;
}

.accordion-reverse .contentBx.active .content {
    height: 150px;
    padding: 10px;
}

/*****Video*****/

.video {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

/*****carrousel 3d automatique*****/

*{box-sizing : border-box}

img{max-width:100%}

.contenu_carou_auto{

margin:2rem auto;
width:420px;
height:279px;
perspective:8000px
	
}
		
.caroussel-image{
	
animation:rotation 30s infinite alternate linear;	
transform-style:preserve-3d;
position:relative;

}

.caroussel-image img{
	
position: absolute;
top:0;
left: 0;
	
	
}


		
.caroussel-image img{
	
filter:drop-shadow(0 12px 5px hsla(0,0%,0%,.4));
width:400px;
height:266px;
left:10px;
outline:1px solid transparent;
backface-visibility:hidden
	
}
		
.caroussel-image img:nth-child(1){
	
transform:translate3d(0,0,495px)
		
}
		
.caroussel-image img:nth-child(2){
	
transform:rotateY(45deg) translateZ(495px)
	
}
		
.caroussel-image img:nth-child(3){
	
	transform:rotateY(90deg) translateZ(495px)
	
}
	
.caroussel-image img:nth-child(4){
	
	transform:rotateY(135deg) translateZ(495px)
	
}
	
.caroussel-image img:nth-child(5){
	
	transform:rotateY(180deg) translateZ(495px)
	
}
	
.caroussel-image img:nth-child(6){
	
	transform:rotateY(225deg) translateZ(495px)
	
}
	
.caroussel-image img:nth-child(7){
	
	transform:rotateY(270deg) translateZ(495px)
	
}
	
.caroussel-image img:nth-child(8){
	
	transform:rotateY(315deg) translateZ(495px)
	
}

#scrollUp{
position: fixed;
bottom : 50px;
right: -100px;
opacity: 1;
scroll-behavior: smooth;
}


	
@keyframes rotation{
from{transform:rotatey(0)}
to{transform:rotatey(1turn)}}
	
/*****fin carrousel 3d automatique*****/




/*Version MOBILE*/


@media screen and (max-width:640px){

/*body{
    width: 90%;
}*/
header{
    width: auto;
}

h1{
    font-size: 30px;

}
h2 {
    font-size: 15px;
}

main{
    width: 100%;
    overflow: hidden;
}

.flotte{
    display:block;
    transition: none;
    border-radius: 10px;
    margin: 10px;
}
.img-flotte {
    margin: auto 10px;
}
.flotte:hover{
    transform: none;
}

.fondText{
    display:block;
    padding: 5px 10px;
}


p{
    font-size: 12px;
    font-weight: bold;
}
.recipe {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}
.recipe-reverse {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 15px;
}

.accordion-reverse {
    max-width: 400px;
    padding: 30px 30px 30px 0;
}

.accordion-reverse .contentBx-reverse {
    position: relative;
    margin: 10px 0px;
}

.accordion-reverse .contentBx-reverse .label-reverse {
    position: relative;
    padding: 10px;
    background: rgb(141, 137, 137);
    color: rgb(243, 234, 234);
    color: bold;
    cursor: pointer;
    font-size: 1.5em;
    border-radius: 10px 10px 10px 10px;
}

.accordion-reverse .contentBx-reverse .label-reverse::before {
    content: '+';
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    font-size: 1.5em;
    border-radius: 10px 10px 10px 10px;
}

.accordion-reverse .contentBx-reverse.active .label-reverse::before {
    content: '-';
}

.accordion-reverse .contentBx-reverse .content-reverse {
    position:relative;
    background: rgb(248, 248, 225);
    height: 0;
    overflow: hidden;
    transition: 0.5s;
    overflow-y: auto;
    border-radius: 10px 10px 10px 10px;
}

.accordion-reverse .contentBx-reverse.active .content-reverse {
    height: 150px;
    padding: 10px;
}


.fondJaune {
    display: flex;
    width: 100%;
    background-color : rgb(255 255 244 / 35%);
    /*justify-content: space-between;*/
    border-radius: 10px 10px 10px 10px;
}


.section{
    width: 100%;
}
#sectionLeft1 {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    justify-content: flex-start;
    border-radius: 10px 10px 10px 10px;
}
#sectionLeft2 {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    justify-content: flex-start;
    border-radius: 10px 10px 10px 10px;
}
#sectionLeft3 {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    justify-content: flex-start;
    border-radius: 10px 10px 10px 10px;
}
#sectionLeft4 {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    justify-content: flex-start;
    border-radius: 10px 10px 10px 10px;
}
#sectionLeft5 {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    justify-content: flex-start;
    border-radius: 10px 10px 10px 10px;
}
#sectionLeft6 {
    display: flex;
    flex-direction: column;
    padding: 15px;
    background-color : rgba(153, 152, 152, 0.5); 
    margin: 10px;
    justify-content: flex-start;
    border-radius: 10px 10px 10px 10px;
}
.accordion{
    padding: 15px 0;
}
.accordion-reverse{
    padding: 15px 0;
}

video{
    width: 300px;
    height: auto;
}

}