@charset "UTF-8";
/* WEBFONTS */
@font-face {
    font-family: 'neotericregular';
    src: url('../fonts/neoteric/neoteric_-_regular_demo_version-webfont.woff2') format('woff2'),
         url('../fonts/neoteric/neoteric_-_regular_demo_version-webfont.woff') format('woff'),
         url('../fonts/neoteric/neoteric_-_regular_demo_version-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}
    
  @font-face {
    font-family: 'chapazaregular';
    src: url('../fonts/chapaza/chapaza-webfont.woff2') format('woff2'),
         url('../fonts/chapaza/chapaza-webfont.woff') format('woff'),
         url('../fonts/chapaza/chapaza-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}


}
.normal{
   font-family:'avenir', Arial, Helvetica, Verdana, Sans-serif;
   font-weight: normal;
   font-style: normal; 
}

.strong, .gras{
   font-family:'avenir-bold', Arial, Helvetica, Verdana, Sans-serif;
   font-weight: normal;
   font-style: normal; 
}

/* ---- HABILLAGE GENERAL DU HTML ---- */
body { 
	margin: 0; 
	padding: 0; 
	background-color: #ffffff; 
	font-family:'avenir', Arial, Helvetica, Verdana, Sans-Serif; 
	color: #878f30; 
	line-height: 1.5; 	/* interligne par defaut */
	font-size: 100%;	/* permet de gérer la taille GLOBALE des fontes de toute la page Web */
    overflow-x: hidden;
	}
p, ul, ol, li, td { 
	font-size: 1.15em; 	/* taille des textes par défaut */
	}
p, ul, ol {
    margin-bottom: 1.25em;
    }
h1, h2, h3, h4, h5, h6 {
    margin-bottom: 1.1em;
    font-family:'chapazaregular', Arial, Helvetica, Verdana, Sans-Serif; 
	font-weight: normal;
    font-style: normal;
    line-height: 1.2;
    color:#878f30;
	}
h1 { font-size: 3em; }	
h2 { font-size: 2.4em; }
h3 { font-size: 1.5em; }
h4 { font-size: 1.25em; }
h5 { font-size: 1.1em; }
h6 { font-size: 1em; }
blockquote { 
    margin: 15px 0 15px 40px;
    padding: 10px 20px; 
    font-style: italic;
    font-size: 1.1em;
    color: #333333;
    border-left: 10px solid #359ac7;
    }
sub, sup { font-size: 0.7em; }
hr { /* simple ligne de separation */
	color: #999; 
	background-color: #999; 
	height: 1px; 
	border: #999; 
	}
img { 
	border: none; 		/* on supprime les bordures sur les images (qui apparaissent avec un lien) */
	vertical-align: middle; /* alignement des images sur le milieu de la ligne de texte */
	} 
figure {
    margin-bottom: 15px;
    overflow: hidden; /* cache le contenu qui dépasse du block */
    }
figcaption { 
    font-size:0.8em;
    }
span{
    font-family: 'neotericregular', Arial, Helvetica, Verdana, Sans-Serif;
    font-weight:normal;
    font-style:normal;
    color:#878f30;
    font-size:1.4em;
}
button{
    background-color:transparent;
    border:none;
    cursor:pointer;
}
button:link, button:visited{
    background-color:transparent;
    border:none;
    cursor:pointer;
}
button:hover, button:active{
    background-color:transparent;
    border:none;
    cursor:pointer;
    
}

button:focus{
    outline:none;
}
/* ---- lien par defaut a ---- */
a:link, a:visited { 
    color: #878f30; 
    text-decoration: none; 
    }
a:hover, a:active { 
    color: #878f30; 
    text-decoration: none; 
    }

/* ---- lien vert rond page ---- */
.rond-page:link, .rond-page:visited { 
    color: transparent;
    text-decoration: none;
    border:transparent;
    border-radius:50%;
    }
.rond-page:hover, .rond-page:active { 
    color: transparent;
    text-decoration: none;
    border:3px solid #e5e9b8;
    border-radius:50%;
    }

/* ---- lien bleu sans soulignement .a3 ---- */
.a3:link, .a3:visited { 
    color: #359ac7; /* bleu rgba(53,154,199,1) */
    text-decoration: none; 
    }
.a3:hover, .a3:active { 
    color: #007394; 
    text-decoration: underline; 
    }

/* ---- lien noir transparent sans soulignement .a4 ---- */
.a4:link, .a4:visited { 
    color: #359ac7; /* bleu rgba(53,154,199,1) */
    text-decoration: none; 
    }
.a4:hover, .a4:active { 
    color: #007394; 
    text-decoration: none; 
    }

/* ---- lien soulignement tiret gris .a5 ---- */


/* ---- BOUTONS ---- */
.bouton {
    display:inline-block;
    margin-top:20px;
    padding:10px 20px;
	background-color: #e5e9b8;
    font-family:'avenir', Arial, Verdana, Sans-Serif;
    font-weight:normal;
    font-style:normal;
    font-size:1.1em;
    color: #ffffff;
    border-radius:5px;
    transition:all 0.25s ease;
    }
.bouton:link, .bouton:visited { 
	background-color: rgba(229,233,184, 1);
	color: #ffffff;
	text-decoration: none; 
	}
.bouton:hover, .bouton:active { 
	background-color: rgba(229,233,184, 0.75);
	color: #ffffff;
	text-decoration: none; 
	}

/* ---- HEADER ---- */
header {
    margin:0;
    padding:15px 0;
    
    }
header nav { 
    
    }
header nav ul { /* on cible tous les 'ul' contenus dans le 'nav' du 'header' */
    list-style:none;
    margin:15px 0;
    padding:0;
    }
header nav ul li { /* on cible tous les 'li' des 'ul' contenus dans le 'nav' du 'header' */
    list-style:none;
    display:inline-block;
    margin:0 30px;
    padding:0;
    font-family: 'neotericregular', Arial, Helvetica, Verdana, Sans-Serif;
    font-weight:normal;
    font-style:normal;
    font-size:1.1em;
    color:#878f30;
	}
header nav ul li a {
    display:inline-block;
    margin:0;
    padding:10px 5px;
    white-space:nowrap; /* interdit les retours à la ligne */
    color:#878f30;
    transition: all 0.25s ease; /* paramètre d'animation du lien */
    border-bottom: 5px solid transparent;
	}
header nav ul li a:link, header nav ul li a:visited {
    color:#878f30;
    text-decoration:none;
    border-bottom: 5px solid transparent;
	}
header nav ul li a:hover, header nav ul li a:active {
    color:#e5e9b8;
    border-bottom: 5px solid #e5e9b8;
	}

.marge-loupe{margin-left:105px; margin-top:0.6em;}

.marge-top-loupe{margin-top:33.25px;}

#recherche{display:none;}

#recherche-touch{display:none;}

.logo { width: 85px; height: auto;}
.picto { 
    margin-left: 8px;
    width: 20px; 
    height: 20px; 
    border-radius: 50%;
    border: 2px solid #359ac7;
    }
#bt1:hover > .picto { opacity: 0.5; }

#menu{
    background-color:#ffff;
    position:fixed;
    top:0;
    right:0;
    left:0;
    bottom:0;
    text-align: center;
    padding:10px 0;
    display:none;
    z-index:100;
}
#menu ul {
    display:block;
    list-style:none;
    margin:0;
    padding:0;
    margin-top:3em;
    
    }
#menu ul li { 
    display:block;
    list-style:none;
    margin:0 15px;
    padding:0;
    font-family:'neotericregular', Helvetica, Verdana, Sans-Serif;
    font-weight:normal;
    font-style:normal;
    font-size:2em;
    margin-bottom:1.3em;
    color:#878f30;
	}
#menu ul li a {
    margin:0;
    padding: 0;
    white-space:nowrap; /* interdit les retours à la ligne */
    color:#878f30;
    border-bottom: transparent;
    transition: all 0.25s ease; /* paramètre d'animation du lien */
	}
#menu ul li a:link, #menu nav ul li a:visited {
    color:#878f30;
    text-decoration:none;
	}

#menu ul li a:hover, #menu nav ul li a:active {
    color:#e5e9b8;
    text-decoration:none;
	}

.burger-croix{
    font-size:6em;
    position:relative;
    top:-0.4em;
    right:-4.1em;
    
}
.burger{
    position:fixed;
    top:20px;
    right:15px;
    z-index:10;
}
.ligne{
    background-color:#878f30;
    width:17px;
    height:2px;
    margin-bottom:4px;
    border-radius:10px;
    
}





/* ---- FOOTER ---- */
footer {
	margin: 0; 
	padding: 15px 0;
    font-size: 0.7em;
	}
footer ul {
	margin: 0; 
	padding: 15px 0;
    }
footer ul li{
    list-style: none; /* on repete pour les vieux navigateurs IE */
    margin: 0 0 0.25em 0; /* espace sous les li */
    padding:0px;
    padding-left: 15px;
    padding-right:15px;
    display:inline-block;
    }

footer ul li a {
    display:inline-block;
    margin:0;
    padding:8px 5px;
    white-space:nowrap; /* interdit les retours à la ligne */
    color:#878f30;
    transition: all 0.25s ease; /* paramètre d'animation du lien */
	}
footer ul li a:link, footer ul li a:visited {
    color:#878f30;
    text-decoration:none;
    border-bottom: 3px solid transparent;
	}
footer ul li a:hover, footer ul li a:active {
    color:#e5e9b8;
    border-bottom: 3px solid #e5e9b8;
	}

/* ------------------------------------------------------------------------- */


/* ---- MES STYLES DE BLOCS ---- */
.page { 
	margin: 0 auto; /* centre hrizontalement le block */
	padding: 0; 
	width: 1400px;
	}
.marge-top { 
    margin-top:70px;
} /* à cause du menu positionné en fixed */

.marge-top-plus { 
    margin-top:100px;
}
.marge-top-section{
    margin-top:6em;
}
.hauteur90 { 
    height: 90px;
    width: auto;
    }
.hauteur70 { 
    height: 70px;
    width: auto;
    }
.hauteur-ecran {
    
    }
.relative{
    position:relative; 
}
.absolute{
    position:absolute;
    
}

.croix{
    font-size:3em;
    margin-top:-0.5em;
    
}

.marge-gauche{margin-left:5em;}
.marge-negative{margin-left:-5em;}
.marge-negative-burger{margin-top:-3em;}
.marge-negative-insta{margin-left:4em;}
.marge-bas{margin-bottom:2.5em;}


#active{
     border-bottom: 5px solid #e5e9b8;
}



.popup{
    position:absolute;
    background-color:#fbf2e6;
    width:980px;
    height:680px;
    top:calc(50% - 340px);
    left:calc(50% - 490px);
    padding:60px;
    display:none;
    z-index:50;
    
}
.croix-popup{
    background:none;
    color:#878f30;
}
.croix-popup:link, .croix-popup:visited{
    background:none;
    color:#878f30;
}
.croix-popup:hover, .croix-popup:active{
    background:none;
    color:#878f30;
}
.centrer{
    margin-top:15%;
}

.marge-gauche-ingredients{
    margin-left:1.5em;
}

.rond{
    width:15px;
    height:15px;
    border-radius:50%;
    background-color:#878f30;
    display:inline-block;
    margin:0 5px;
}

.recette button:hover img{
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: all 0.8s;
    transition: all 0.8s;
    text-decoration:none;
    
    
}

#map{
    fill:#e5e9b8;
   
}
.carte{
    position:absolute;
    top:7em;
    left:21em;
}
.repere{
    position:absolute;
    top:16.2em;
    left:42.2em;
    width:2em;
}
.adresse{
    position:absolute;
    top:-33em;
    right:0;
    background-color:#fbf2e6;
    padding:2em;
    display:inline-block;
    
    
}

.container{
    display:none;
}
.vg-patisserie{
    display:none;
}
.sitron{display:none;}

.shangri{display:none;}
.belles{display:none;}
.helmut{display:none;}
.cloud{display:none;}

#active-rond{
    background-color:#e5e9b8;
}

.feuille1{
    position:absolute;
    bottom:-3%;
    left:18%;
}

.feuille2{
    position:absolute;
    bottom:40%;
    left:10%;
}

.feuille3{
    position:absolute;
    bottom:40%;
    right:10%;
}

.feuille4{
    position:absolute;
    bottom:20%;
    right:20%;
}

.feuille5{
    position:absolute;
    bottom:40%;
    left:18%;
}

.feuille6{
    position:absolute;
    bottom:55%;
    left:10%;
}


.feuille7{
    position:absolute;
    bottom:20%;
    left:20%;
}

.feuille8{
    position:absolute;
    bottom:-15%;
    right:20%;
}

.feuille9{
    position:absolute;
    bottom:10%;
    left:5%;
}

.feuille10{
    position:absolute;
    bottom:0;
    right:10%;
}


/* TIMELINE */

.section-timeline{
    margin-top:6em;
}


.timeline{
    width:100%;
    height:6px;
    background-color: #878f30;
}


.rond-timeline{
    width:24px;
    height:24px;
    border-radius:50%;
    background-color: #878f30;
    cursor:pointer;
}
.rond-timeline:hover{
    background-color: #e5e9b8;
}

#rond-timeline1{
    position:absolute;
    top:-0.6em;
    left:6em;
    background-color: #e5e9b8;
}

#rond-timeline2{
    position:absolute;
    top:-0.6em;
    left:11em;
}

#rond-timeline3{
    position:absolute;
    top:-0.6em;
    left:20em;
}

#rond-timeline4{
    position:absolute;
    top:-0.6em;
    left:30em;
}

#rond-timeline5{
    position:absolute;
    top:-0.6em;
    left:40em;
}

#rond-timeline6{
    position:absolute;
    top:-0.6em;
    left:50em;
}

#rond-timeline7{
    position:absolute;
    top:-0.6em;
    left:60em;
}
#rond-timeline8{
    position:absolute;
    top:-0.6em;
    left:70em;
}

.encadre-histoire{
    font-size:1em;
}


.chronologie{
    position:relative;
    left:100em;
    display:none;
}

#rond-timeline1-texte{
    display:block;
    left:0;
}

.titre-histoire{
    position:relative;
    left:100em;
    display:none;
}

.fond{
  background-color:#878f30;  
}

.insta:hover{
    height:auto;
    width:100%;
    opacity:0.7;
    
}



.texte-insta{
    color:#fff;
    position:absolute;
    bottom:-1em;
    left:1.5em;
    z-index:100;
}