*{
    margin: 0;
    padding: 0;
    font-family: Calibri;
    scroll-behavior: smooth;
}

body{
background-color: #d5bc6f;
background-size: cover;
background-repeat: no-repeat;
}

.liste li a{
color: white;
text-align: center;
text-decoration: none;
}
.liste li{
display: inline-block;
z-index: 5;
position: relative;
margin: 55px 1%;
font-size: 1.3em;
left: 50px;
list-style-type: none;
transition: transform 0.5s cubic-bezier(.08,.06,.25,.95);
}
.liste li a:hover{
text-decoration: underline;
}
.liste li:hover{
transform: scale(1.1);
}
.navigator{
margin: auto;
text-align: center;
}
.navmobileliste li{
display: block;
left: 0;
margin: 55px 0;
}
.navmobileliste li:hover{
transform: none;
}
.navmobileliste li a{
position: relative;
width: 80%;
display: block;
transition: background 0.5s, padding 0.5s ease-in-out;
}
.navmobileliste li a:hover{
background: white;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
padding: 10px 0;
color: black;
text-decoration: none;
}
.navigatorMobile{
z-index: 5;
width: 30%;
height: 100%;
background: linear-gradient(to left, #865e5e,#624f4f);
display: none;
position: fixed;
left: -400px;
top: 0;
transition: left 0.5s, width 0.5s ease-in-out;
}
.navbarbutton{
display: block;
border-radius: 100%;
width: 90px;
height: 90px;
background: linear-gradient(180deg, #865e5e,#624f4f);
left: -100px;
top : 30px;
position: fixed;
cursor: pointer;
z-index: 5;
transition: left 0.5s ease;
}
#mobilelines{
width: 65%;
height: 8px;
border-radius: 5px;
background: white;
margin: 10px auto;
list-style-type: none;
top: 12px;
position: relative;
}
.topsectionmobi{
position: relative;
top: 0;
height: 100px;
}
.topsectionmobi img{
width: 65px;
height: 65px;
position: absolute;
left: 20px;
top: 20px;
cursor: pointer;
}
.topsectionmobi p{
color: white;
font-size: 1.5em;
left: 18px;
text-align: left;
top: 85%;
position: relative;
}
#closeNavMobile{
color: white;
top: 0;
position: absolute;
right: 10px;
font-size: 2em;
cursor: pointer;
}
header{
background: linear-gradient(180deg, #865e5e,#624f4f);
width: 100%;
height: 125px;
position: fixed;
z-index: 2;
top: 0;
display: block;
}
header > h1{
color: white;
font-size: 2em;
position: absolute;
padding: 49px 0;
text-align: left;
left: 20px;
cursor: pointer;
}
#main-title{
text-align: center;
margin-top: 150px;
font-size: 3em;
}
#main-title img{
margin-bottom: 50px;
margin-left: auto;
margin-right: auto;
transition: transform 0.5s cubic-bezier(0,.25,.58,1);
}
#main-title img:hover{
transform: scale(1.1);
}
footer{
text-align: center;
}
footer > p, footer > a{
margin: 10px auto;
text-decoration: none;
}
.section-1{
margin-top: 100px;
}
.gauffle-3d{
margin-top: 200px;
}
#textzone-about-us{
text-align: justify;
width: 50%;
display: block;
margin: auto;
left: -100px;
position: relative;
}
.centerzero{
left: 0 !important;
right: 0 !important;
}
#textzone-about-us p{
font-size: 2em;
}
.presentation{
width: 100%;
margin-left: auto;
margin-right: auto;
display: block;
opacity: 0;
top: -80px;
font-size: 0;
position: relative;
transition: opacity 0.5s, top 0.5s, font-size 0.8s ease-in-out;
}
.prat img, .prat div img{
position: relative;
width: 300px;
height: 300px;
/*top: 50%;*/
display: flex;
box-shadow: 10px 10px 4px #00000070;
}
.dr img{
float: right;
right: 50px;
}
#numhelp{
cursor: help;
}
.imagerie{
display: inline-flex;
position: relative;
justify-content: center;
width: 100%;
}
.imagerie div img{
margin: 10px 70px;
}
.imagerie div p{
text-align: center;
font-size: 1.5em;
}
.titlescroll img{
width: 150px;
height: 150px;
position: absolute;
right: 40px;
bottom: 0;
opacity: 0;
transition: opacity 0.25s ease-in;
}
.titlescroll img.show-img{
opacity: 1;
}
.titlescroll{
width: 80%;
height: auto;
background: linear-gradient(to right, black,black,black,black,transparent, transparent);
background-size: 350%;
background-position: 58%;
font-size: 3em;
color: white;
text-align: center;
margin: 75px auto;
position: relative;
cursor: pointer;
opacity: 1;
transition: transform 1s, opacity 0.5s, background-position 0.5s ease-in-out;
}
.titlescroll h2{
padding: 100px 0;
}
.titlescroll.newstyle{
background-position: 80%;
}
.loading{
background-color: white;
}
.circload:after{
content: ".";
border-radius: 100%;
width: 30px;
background: black;
right: -15px;
position: absolute;
top: 30px;
height: 30px;
}
.concoursbanner{
width: 85%;
height: 300px;
border: solid 1px black;
position: relative;
margin-top: 200px;
margin-left: auto;
margin-right: auto;
background: white;
transition: height 0.5s ease;
}
.textbanner{
position: absolute;
left: 0;
right: 0;
}
.textbanner p, .textbanner div{
position: relative;
text-align: center;
font-size: 5em;
z-index: 1;
margin: auto;
display: block;
}
.responsivebox{
display: none;
bottom: 0;
position: relative;
color: white;
font-size: 0.69em;
left: 20px;
cursor: pointer;
}
.textbanner div{
background: linear-gradient(to right,green,green,green,green,green,#00d000,#8de38d);
background-size: 150%;
background-position: 0%;
width: 20%;
height: auto;
padding: 8px;
font-size: 2em;
border-radius: 10px;
margin-top: 30px;
cursor: pointer;
animation: btnconcours running alternate-reverse infinite 1.5s forwards linear;
transition: background-size 0.5s, background-position 0.5s, transform 0.2s, background 0.5s cubic-bezier(.8,.43,.41,.82);
}
.textbanner div:hover, .buttoncommencer:hover{
animation-play-state: paused;
background-position: 100%;
background-size: 500%;
}
.joindrecc a{
color: white;
text-decoration: none;
}
#message2c{
font-size: 3em;
}
.imagebanner{
width: 100%;
height: 100%;
}
.imagebanner img{
object-fit: contain; /*pour faire rentrer l'image dans la balise mere */
max-width: 100%;
max-height: 100%;
position: absolute;
display: block;
}
#imgban1{
float: left;
left: -50px;
}
#imgban2{
float: right;
right: 0;
}
nav > figure:before{
content: 'Oh! Aimes-tu les gaufres?';
}
/*-----------page concours-----------------*/
.introcc{
margin-top: 200px;
position: relative;
}
.introcc div{
text-align: center;
margin : 75px auto;
}
.introcc div h1{
font-size: 5em;
}
.introcc div h2, .introcc div p{
font-size: 3em;
}
.introcc div p{
top: 80px;
bottom: 0;
position: relative;
margin: auto;
}
.imageintro{
position: relative;
max-height: 100%;
max-width: 100%;
object-fit: contain;
}
.leftimin{
float: left;
left: 20px;
}
.rightimin{
float: right;
right: 20px;
}
.cadeaux{
height: 300px;
}
.buttoncommencer{
color: white;
padding: 5px;
background: linear-gradient(to right,green,green,green,green,green,#00d000,#8de38d);
background-size: 150%;
background-position: 0%;
height: auto;
width: 500px;
margin-top: 200px;
position: relative;
margin-left: auto;
margin-right: auto;
font-size: 3em;
border-radius: 10px;
cursor: pointer;
transition: transform 1s cubic-bezier(.89,.16,.27,1.55), background-size 1s, background-position 1s ease !important;
}
.buttoncommencer:hover{
transform: scale(0.8) !important;
}
#pass{
opacity: 0;
transition: opacity 1s, transform 1s ease-in-out;
}
.textregle h1, .confidentalite article h1{
font-size: 2em;
margin: 20px auto;
background-color: black;
width: 65%;
padding: 5px;
color: white;
}
.textregle h2{
text-align: left;
position: relative;
margin-left: 20px;
}
#reglejeu{
font-size: 1.3em;
}
#textarticle{
text-align: justify;
width: 90%;
margin: auto;
}
.closeregle:hover{
transform: scale(0.9);
}
/*------adapt-------*/
@media(max-width : 1280px){
.textbanner p{
font-size: 4em;
}
.textbanner div{
font-size: 1.8em;    
}
#message2c{
font-size: 2.3em;
}
}
@media (max-width : 1024px){
header{
top: -200px;
display: none;
}
.navbarbutton{
display: block;
}
.textbanner div{
width: 50%;
}
.textbanner p{
font-size: 3em;
}
#message2c{
font-size: 2em;    
}
#imgban2{
max-width: 110%;   
}
}
@media (max-width: 768px){
.titlescroll h2{
font-size: 1.1em;
}
.navigatorMobile{
width: 40%;
}
#main-title{
font-size: 2.2em;
}
.imagerie{
display: block;
}
.introcc div h1{
font-size: 4em;
}
.introcc div h2, .introcc div p{
font-size: 2em;
}
.imageintro{
max-width: 50%;
}
.buttoncommencer{
font-size: 2em;
width: 400px;
}
.textregle h2, .confidentalite article h2{
font-size: 1em;
}
.concoursbanner{
height: 400px;
}
#imgban2{
display: none;
}
#imgban1{
bottom: 0;
left: 0;
}
}
@media (max-width: 480px){
.titlescroll h2{
font-size: 0.8em;
}
#main-title{
font-size: 2em;
}
#textzone-about-us{
left: 0;
width: 55%;
}
#textzone-about-us p{
font-size: 1.5em;
}
.prat img{
width: 240px;
margin: 20px auto;
}
.dr img{
float: none;
right: 0;
}
.buttoncommencer{
font-size: 1.5em;
width: 300px;
}
.textregle h1, .confidentalite article h1 {
font-size: 1.2em;
}
.textbanner div{
width: 80%;
font-size: 1.5em;
}
}
@media (max-height: 550px){
.liste li{
margin: 20px 0;    
}
.topsectionmobi{
margin-bottom: 100px;
}
.responsivebox{
display: block;
}
.navigator li{
margin: 45px 1%;
}
}
@keyframes btnconcours{
0% {transform: scale(0.8);} 
100%{transform: scale(1.1);}
}