html{
    font-size:16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
}

body{     
    color:#707070;
    line-height: 21px; 
}
header{
background: linear-gradient(to right, #012379 0%, #193d9a 50%, #012379 100%);
padding: 14px;
position:fixed;
width:100%;
}

/*Dessin du burger*/
.trigger{ 
    z-index:3;
    cursor: pointer;
    width: 45px;
    height: 45px;
    opacity: 0;
}
.trigger, .burger{
    position: absolute;
    top: 30px;
    left:30px;
    margin:0;
}
.burger{
    z-index: 2;
}
.burger > div{
    width: 45px;
    height: 5px;
    background: #FFF;
    margin-bottom:15px;
    border-radius: 3px;
    transition: transform 0.25s ease-out, opacity 0.5s ease-in-out;
}
.burger > :last-child{
    margin-bottom: 0;
}

/*Animation du burger et de la <nav> */
.trigger:checked + .burger > :nth-child(1){
    transform: translateY(20px) rotate(45deg);
}
.trigger:checked + .burger > :nth-child(2){
    transform: sclae(0.2, 0);
    opacity: 0;
}
.trigger:checked + .burger > :nth-child(3){
    transform: translateY(-20px) rotate(-45deg);
}
.trigger:checked ~ nav {
    transform:translateX(0);
}
.trigger:checked,
.trigger:checked + .burger{
    position: fixed;
    bottom:90px;
    top: unset;
    left: 32.5%;
    /* transform: translateX(50%) */
}

/* Dessin de la <nav> */
nav {
    height: 100vh;
    position: fixed;
    top:0;
    left:0;
    width: 75%;
    font-family: 'Courgette', cursive;
    color : white;
    background: linear-gradient(to top, #012379 0%, #193d9a 50%, #012379 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(.17,.67,1,.04);
    z-index: 1;
}
nav > img {
  position: absolute;
  width: 240px;
  top:20px;
}
.logo{ 
    width: 180px;
    margin:auto;
}
.nav > li {
    margin: 20px 0;
    border-bottom: 1px solid #FFF;
    padding-bottom:20px;
    
}
 .nav > li > a{
  color:  #D5BA5B;
  text-decoration: none;
  font-size: 1.5rem;
  transition: color 0.5 ease-in-out;
}
.nav > li > a:hover,
.nav > li > a.active {
    color:white;
}
header > img {
    width: 60%;
    margin-left:100px;
}

img{ width: 100%; }

h2{ 
    font-family: 'Courgette', cursive;
    font-size: 1.25rem; /* 20 px */
    margin-top: 24px;
    border-bottom: 1px solid #707070;
    padding-bottom:5px;
    width: 50%;
}
p{
    margin-top:10px ;
    margin-bottom: 24px;
}

/* Layout */
.row{ display: flex; margin-right: -0.4375rem;}
[class^="col-"]{ margin-right: 0.4375rem;}
.col-4{ flex:4 4 21px; }
.col-4 > img { height: 100%;}
/* Classes utilitaires > Utilitary classes */
h2,p,.row{
    margin-left: 19px;
    margin-right: 19px;
}
no-margin{
    margin:0;
}
.btn{

    background: #e5c063;
    text-transform: uppercase;
    text-decoration: none;
    color:#583622;
    padding: 0.4375rem;
    transition: all 0.5s ease-out;
}
.btn:hover,.btn:active{
    background: #583622;
    color:#e5c063;
}
.ta-right{ 
    text-align: right;
    margin-bottom: 40px;
}
.bandeau{
    position: relative;
    z-index: -1;
}
.banner{ 
    font-family: 'Courgette', cursive;
    font-size: 1rem;
    font-weight: 100;
    line-height:1.3rem;
    /*padding:40px 30px 40px 60% ;  
    /*background: url(./img/Central_Teasing_Box_Enjoy.png) no-repeat center;
    background-size: cover;*/
    color:#e5c063;
    text-align: left;
    position: absolute;
    width: 35%;
    right: 30px;
    top: 50%;
    transform: translateY(-50%)
}

h1 { 
    font-family: 'Courgette', cursive;
    font-size: 1.875rem;
    font-weight: 100;
    line-height:1.3rem;
    padding:30px 0px 30px;  
    text-align: center;
    color:#e5c063;
}
.actual{ display: flex; }
.actual > :first-child{ 
    width: 30%; 
    margin-right: 30px; 
    margin-left:20px;
    margin-bottom: 20px;
}
.actual > :last-child{ width: 70%; }
.actual > div > p{
    margin-left:0px;
}
.upper {
    text-transform: uppercase;
}
.emplacmt {
    background: linear-gradient(to right, #012379 0%, #193d9a 50%, #012379 100%);
    padding: 14px;
    margin-top:20px;
}
.emplacmt > h2 {
    font-family: 'Courgette', cursive;
    color:white;
    text-align: center;
    margin-left:0;
    margin-right: 0;
    margin-bottom: 19px;
    border-bottom:0;
    font-size: 1.25rem;
    width: 100%;
}
.emplacmt > input {
    border:1px solid #707070;
    background-color: white;
    padding: 14px;
    color:#707070;
    margin-bottom: 10px;
    width: 100%;
}

footer{ 
    text-align: center; 
    background-color: #583622;
}
footer > img { 
    width: 60%;
    margin-top:20px;
    margin-bottom:20px; 
}
footer > h4{
    color:#E5C063;
    text-transform: uppercase;
    margin-top:19px;
    margin-bottom:19px;
}
.ta-center{ 
    text-align: center;
    margin-top:40px; 
    margin-bottom: 40px;
}
footer > a {
  background:#000;
  color:  #fff;
  display: inline-flex;
  font-size: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  /*border :1px solid #fff;*/
}
.legal_links{
    margin-top:19px;
    margin-bottom:19px;
}
.legal_links > div > a{
    color : #A88A68;
    text-decoration: none;
}
.legal_links  > div {
    padding:4px;
}
.down_bar{
    background-color:#3E2617;
    padding:1px;
    border-top:1px solid #888888;
}
.wrapper{
    color:#888888;
    margin-top:20px;
    margin-bottom:20px;
}
@media all and (min-width: 720px){
    #header{
        height: 124px;
    }
    .banner{
        font-size: 1.5rem;
        line-height: 1.5rem;
    }
    nav{
        width:45%;
    }
    .trigger:checked, .trigger:checked + .burger{
        left:18.5%;
    }
}
@media all and (min-width: 1130px){
    header > img{
        width: 20%;
        margin-left: 40%;
    }
    nav{
        width:35%;
    }
    .nav > li{
        margin: 20% 0;
        padding-bottom: 20%;
    }
    .nav > li > a{
        font-size: 2rem;
    }
    .logo{
        width: 220px;
    }
    .trigger, .burger{
        top:33%;
    }
    .trigger:checked, .trigger:checked + .burger{
        left:15.5%;
    }
    .banner{
        font-size: 2.5rem;
        line-height: 3.3rem;
    }
    .pres{
        display: flex;
        flex-wrap: wrap;
    }
    .univers, .recettes{
        width: 50%;
    }
    .recettes{
        order: 2;
    }
    .row{
        order:3;
    }
    .pres{
        margin-left: 120px;
        margin-right: 120px;
    }
    [class^="col-"]{
      margin-right: 1.4375rem;
    }
    .ta-right{
        margin-right:40px;
    }
    .content-actual{
        display: flex;
        flex-wrap: wrap;
        margin:40px 140px;
    }
    .actual{
        width:33%;
    }
    .actual > :first-child{ 
        margin-left:0px;
    }
    footer > img{
        width: 25%;
    }

}

/* PAGE Histoire */
.title {
    border-bottom: none;
    width: 100%;
    text-align: center;
    margin-left:0;
}
figure{ 
    margin-top:10px;
    margin-bottom: 24px;
}
figure > img {
    float:left;
    width: 118.5px;
    height: 142px;
    margin-left:19px;
    margin-right: 19px;
    border:1px solid #707070;
}
figcaption{
    margin-left:154px;
    margin-right: 19px;
}
.ticket{
    width: 243px;
    margin: auto;
}
@media all and (min-width: 720px){
  
}
@media all and (min-width: 1130px){
    figure > img{
        margin-left:140px;
        width: 170.04px;
        height: 203.76px;
    }
    figcaption{
        margin-left:325px;
        margin-right: 140px;
    }
    .p{
        margin-left: 120px;
        margin-right:120px;
    }
    .secret-choco{
        margin : 0 120px;
    }
    .ticket{
        width: 595px;
    }
    .p + .mh  {
        margin:0 130px;
    }
}
/* Fin Page Histoire */

/* PAGE Produits */
.flexbox{
    display: flex;
    flex-wrap: wrap;
    margin:20px 5px 40px 5px;
}
.flexbox > div {
    border: 1px solid #3E2617;
    overflow: hidden;
    margin : 10px 11px 10px 11px;
    box-shadow: 2px 2px 2px #0004;
    width: calc(33.33% - 22px);
    border: none;
}
.flexbox > :nth-child(2n){
    margin: 10px;
}
.flexbox > div > a {
    text-decoration: none;
    font-size: 0.80rem;
    text-align: center;

}
div > a > img{
    margin: -6px 0 0 0;
}
a > h3 {
    background-color: #193D9A;
    font-size:0.80rem;
    color:white;
    padding: 5px 0px 5px 0px;
    margin:-6px 0 0 0;
}
div:nth-child(even) > a > h3{
    background-color: #583622;
    color:#d5ba5b;
}
@media all and (min-width: 720px){
    .flexbox{
        margin:15px 20px;
    }
    .flexbox > div {
        width: calc(25% - 41px);
        margin: 14px 15px 14px 15px;
        box-shadow: 3px 3px 3px #0004;
    }
    .flexbox > :nth-child(2n){
        margin: 14px;
    }
    a > h3{
        font-size:1rem;
        padding: 10px 0px 10px 0px;
    }
}

@media all and (min-width: 1130px){
    .flexbox{
        margin:40px 120px;
    }
    .flexbox > div {
        width: calc(25% - 41px);
        margin: 20px 21px 20px 21px;
        box-shadow: 4px 4px 4px #0004;
    }
    .flexbox > :nth-child(2n){
        margin: 20px;
    }
   
    a > h3{
        font-size:1rem;
        padding: 10px 0px 10px 0px;
    }
}
/* Fin PAGE Produits */

/* PAGE Chocolats */
.choco{
    border-bottom: 1px solid #000;
    width: 100%;
    text-align: center;
    margin-left:0;
    color:black;
    background-color: #FFF8E5;
    margin:auto;
    padding:10px;
}
section{
    display: flex;
    flex-wrap: wrap;
    
}
section > a{
    text-decoration: none;
    width: 100%;
    margin : 20px 0;
}
.prod{
    display: flex;
    flex-wrap: wrap;
    margin:20px;
   
}
.prod > img{
    border-radius: 50%;
    width: 99px;
    height: 99px;
    margin-left:0px;
}
.prod > figcaption{
    padding-top:35px;
    margin-left:0;
    margin-right: 0;
    color:black;
    width: 60%;
}
@media all and (min-width: 720px){
    section > a{
        width: 33.33%;
    }
    
    .prod{
        margin:10px;
    }
    .prod > figcaption{
        padding-top:20px;
        width: 45%;
    }
   
}
@media all and (min-width: 1130px){
    section{
        margin:0px 120px;
    }
    .prod{
        margin:10px;
    }
    .prod > figcaption{
        padding-top:20px;
    }
}
/* Fin PAGE Chocolats */

/* PAGE Fiche Produit */
.detail {
    border-bottom: none;
    width: 100%;
    margin-left:20px;
    
}
.contenu {
    background-color: #FFF8E5;
    padding:1px;
    margin-bottom: 20px;
}
@media all and (min-width: 720px){
    .prod-fiche{
        margin:20px 190px;
    }
    .contenu{
        margin:5px 40px 20px;
        padding:1px 85px;
    }
    .detail{
        margin:0 140px;
    }
}
@media all and (min-width: 1130px){
    .prod-fiche{
        margin:20px 395px;
    }
    .contenu{
        margin:5px 120px 20px;
        padding:1px 85px;
    }
    .detail{
        margin:0 140px;
        padding:0 85px;
    }
}

/* Fin PAGE Fiche Produit */

/* PAGE Contact */
.type-contact {
    text-align: center;
}
.type-contact > a {
    background: #FFF8E5;
    color:black;
    width:138px;
    height: 110px;
  display: inline-flex;
  font-size: 75px;
  text-decoration: none;
  justify-content: center;
  align-items: center;
  margin:10px 10px;

}
.adresse {
    background: #FFF8E5;
    margin-top:10px;
    margin-bottom: 10px;
    
}
section > div {
    width: 100%
}
.adresse > p {
    text-align: center;
    padding:10px;
}
span{
    color:#3E2617;
}
@media all and (min-width: 720px){
.rep{
    text-align: center;
}
section > div {
    margin:0 120px;
}
}
@media all and (min-width: 1130px){
    section > div {
        display: flex;
        flex-wrap: wrap;
        margin:0;
    }
    .adresse{
        width: 50%;
    }
}
/* Fin PAGE Contact */

/* PAGE Formulaire */
form > div {
    display: flex;
    flex-direction: column;
    width: 100%;
}
form > div:nth-child(odd):not(.terms){
    background: #FFF8E5;
}
.formfield{
    position: relative;
}
.formfield-select{
    position: relative; 
	
	background-color: #fff;
	border: #777 1px solid;
	margin: 0px 19px 1.5em 20px;
	
	overflow: hidden; 
	/* 
		Le select natif pourra 
		dépasser sans être vu 
    */
}
.formfield-select select{
    -webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	width: 110%; 
	/* 
		On est sûr de ne plus voir
		la flèche native 
	*/
	
	height: auto;
	border: 0; 
	margin: 0;
	padding: .75em;
	border-radius: 0;
	

	overflow: hidden;
	text-overflow: ellipsis;
	/* 
		On empêche le texte d'aller
		jusqu'au bout s'il est trop long
	*/

}
.formfield-select::after{
    /* Le pointeur du select */
	content: '';
	position: absolute;
	top: 50%; 
	margin-top: -3px;
	right: .75em;  
	display: block; 
	width: 0; height: 0;
	border-color: transparent;
	border-top-color: #444; 
	border-width: 6px;
	border-style: solid;
	pointer-events: none;
}
.titre{
    text-align: center;
    display: flex;
    flex-direction: row;
    margin:0 40px 0 40px;
}
.titre > input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height:20px;
    width: 40px;
    background: white;
    border-radius: 50%;
}
.titre > label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.80rem;
    margin-right: 20px;
    margin-left:-18px;
    padding: 0;
}
label{
    font-family: 'Courgette', cursive;
    font-size: 1.10rem;
    color:#707070;
    margin:10px 19px 10px;
    width: 100%;
}
input, select{
    margin:10px 19px 20px 19px;
    border:1px solid #707070;
    height: 40px;
    font-size: 0.80rem;
    color:#707070;
    font-weight: 100;
    padding:5px
}
textarea{
    margin:10px 19px 20px 19px;
    border:1px solid #707070;
}
.line{
    display:flex;
    flex-direction: row;
}
.line > div{
    margin:10px 0 0;
}
.line:first-child > div{
    width: 25%;
}
.line:last-child > div{
    margin:10px 0 0;
    width: 35%;
}
.line > div:last-child > label {
    margin-left:0px
}
#num{
    width: 80px;
    padding:0;
}
#rue{
    margin-left:0px;
    width:236px;
}
#cp{
    width: 98px;
     padding:0;
}
#ville{
    width: 216px;
    margin-left:0px;
}
#telechrgmt{
    border:none;
}
.terms{
    display: inline-block;
    margin:0px 19px 20px 19px;
    width: 334px;
}
.terms > label {
    font-family: 'Roboto', sans-serif;
    font-size: 0.80rem;
    margin-left: 5px;
}
.terms > label > a {
    color : #A88A68;
}
iframe{
    margin-left: 19px;
}
.terms > input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 15px;
    height: 15px;
    background: #549494;
    border:none;
    margin:0;
}
form > p{
    font-style: italic;
}
form > button{
    background: #e5c063;
    text-transform: uppercase;
    color:#583622;
    padding: 10px;
    transition: all 0.5s ease-out;
    border:none;
    display: flex;
    margin:auto;

}
form{
    margin-top:15px;
    margin-bottom: 40px;
}
@media all and (min-width: 720px){
    form{
        margin: 0 80px 20px;
    }
    .terms{
        width: 537px;
    }
    iframe{
        display: flex;
        margin:auto;
    }
    #num{
        width: 117px;
    }
    #cp{
        width: 150px;
    }
    #ville{
        width: 320px;
    }
    #rue{
        width: 320px;
    }
}
@media all and (min-width: 1130px){
    form{
        margin: 0 140px 20px;
    }
    .terms{
        width: 800px;
    }
    iframe{
        display: flex;
        margin:auto;
    }
    #num{
        width: 200px;
    }
    #cp{
        width: 250px;
    }
    #ville{
        width: 620px;
    }
    #rue{
        width: 620px;
    }
}

/* Fin PAGE Formulaire */

/* Flèche retour Header PAGE Chocolats, Fiche Produit, Formulaire */

.retour{
    z-index: 1;
    position: absolute;
    top: 30px;
    left:30px;
    margin:0;
}
.retour > div{
    width: 45px;
    height: 8px;
    background: #FFF;
    margin-bottom:15px;
    border-radius: 3px;
    transition: transform 0.25s ease-out, opacity 0.5s ease-in-out;
}
.retour > :nth-child(1){
    transform: translateY(30px) rotate(35deg);
}
.retour > :nth-child(2){
    transform: translateY(-15px) rotate(-35deg);
}
/* Fin Flèche retour Header PAGE Chocolats, Fiche Produit, Formulaire */