@charset "UTF-8";
/* CSS Document */

/* 1) Smartphones et autres mobiles (767px de large max) ------------- */
@media screen and (max-width: 767px), screen and (max-device-width: 767px) { 
	body { 
		background-color:;
        font-size:0.7em;
		}
    .page { width: 96%; }
    .colonne1, .colonne2, .colonne3, .colonne4, .colonne5, .colonne6, .colonne7, .colonne8, .colonne9, .colonne10, .colonne11, .colonne12{
        width:97%;
    }
    .colonne-item1, .colonne-item2, .colonne-item3, .colonne-item4, .colonne-item5, .colonne-item6, .colonne-item7, .colonne-item8, .colonne-item9, .colonne-item10, .colonne-item11, .colonne-item12{
        width:97%;
    }
    .repousse-colonne1,.repousse-colonne2, .repousse-colonne3, .repousse-colonne4,.repousse-colonne5,.repousse-colonne6, .repousse-colonne7, .repousse-colonne8,.repousse-colonne9,.repousse-colonne10, .repousse-colonne11, .repousse-colonne12{
        margin-left:1.5% !important;
    }
    
    h1{font-size:2.4em;}
    .marge-top-section{margin-top:8.5em;}
    .colonne-phone1 { width:5.3333333333333%; }
    .colonne-phone2 { width:13.666666666667%; }
    .colonne-phone3 { width:22%; }
    .colonne-phone4 { width:30.333333333333%; }
    .colonne-phone5 { width:38.666666666667%; }
    .colonne-phone6 { width:47%; }
    .colonne-phone7 { width:55.333333333333%; }
    .colonne-phone8 { width:63.666666666667%; }
    .colonne-phone9 { width:72%; }
    .colonne-phone10 { width:80.333333333333%; }
    .colonne-phone11 { width:88.666666666667%; }
    .colonne-phone12 { width:97%; }
    
    .visible-phone { display: block; }
	.visible-tablet { display: none; }
	.visible-desktop { display: none; }
	.visible-large { display: none; }
	.hidden-phone { display: none; }
	.hidden-tablet { display: block; }
	.hidden-desktop { display: block; }
	.hidden-large { display: block; }
    .visible-touch { display: block; }
    .hidden-touch { display: none; }
    .repousse-droite-colonne1{margin-right:1.5%!important;}
    .repousse-colonne-phone-responsive{
        margin-left:9.8333333333333%!important;
    }
    .repousse-colonne-phone-responsive2{
        margin-left:18.166666666667%!important;
    }
    .repousse-colonne-phone-responsive3{
        margin-left:26.5% !important;
    }
    .repousse-colonne-phone-responsive4{ 
        margin-left:34.833333333333% !important; 
    }
    
    .repousse-colonne-touch-responsive4{ 
        margin-left:34.833333333333% !important; 
    }
    .repousse-colonne-touch-responsive2{
        margin-left:18.166666666667%!important;
    }
    .repousse-colonne-touch-responsive{
        margin-left:9.8333333333333% !important;
    }
    .repousse-colonne-touch-responsive3{
        margin-left:26.5% !important;
    }
    .repere{display:none;}
    .adresse-touch{
        position:absolute;
        top:2em;
        right:0;
        left:0;
        background-color:#fbf2e6;
        padding:2.5em;
        padding-left:2em;
        
    
    }
    
    .chronologie{display:block;left:0}
    .marge-negative{margin-left:-4.5em;}
    .marge-gauche{margin-left:1.5% !important;}
    .marge-top-plus{margin-top:30px;}
    .marge-negative-insta{margin-left:-0.5em;}
    .marge-top-responsive{margin-top:70px;}
    /*.recette{min-height:256px;}*/
    .popup{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        overflow-x: auto;
        height:100vh;
        width:100vw;
    }
    .mini{font-size:0.9em}
    .centrer{margin-top:90px;}
    .marge-gauche-ingredients{margin-left:3.7em;}
    .croix{
        font-size:4em;
        margin-right:-1em;
        margin-top:-0.6em;
    }
    
    .croix-adresse-touch{
        font-size: 4em;
        margin-right: -0.4em;
        margin-top: -0.6em;
    }
    .rond{
        width:14px;
        height:14px;
        margin:0 10px;
    }
    
    .burger-croix{
    font-size:4em;
    position:relative;
    top:-0.4em;
    right:-3.8em;
    
}
    .histoire{
        height:60vh;
    }
    
}

/* 2) Ipad + Tablette ------------------------------------------ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
	body { 
		background-color:;
        font-size:0.9em;
		}
    .page{
        width:94%;
    }
    .colonne-tablet1 { width:5.3333333333333%; }
    .colonne-tablet2 { width:13.666666666667%; }
    .colonne-tablet3 { width:22%; }
    .colonne-tablet4 { width:30.333333333333%; }
    .colonne-tablet5 { width:38.666666666667%; }
    .colonne-tablet6 { width:47%; }
    .colonne-tablet7 { width:55.333333333333%; }
    .colonne-tablet8 { width:63.666666666667%; }
    .colonne-tablet9 { width:72%; }
    .colonne-tablet10 { width:80.333333333333%; }
    .colonne-tablet11 { width:88.666666666667%; }
    .colonne-tablet12 { width:97%; }
    
    .visible-phone { display: none; }
	.visible-tablet { display: block; }
	.visible-desktop { display: none; }
	.visible-large { display: none; } 
	.hidden-phone { display: block; }
	.hidden-tablet { display: none; }
	.hidden-desktop { display: block; }
	.hidden-large { display: block; }
    .visible-touch { display: block; }
    .hidden-touch { display: none; }
    
    .repousse-colonne1{margin-left:1.5% !important;}
    .repousse-colonne3{margin-left:1.5% !important;}
    .repousse-colonne2{margin-left:1.5% !important;}
    .repousse-colonne-touch-responsive2{
        margin-left:18.166666666667%!important;
    }
    .repousse-colonne-touch-responsive3{
        margin-left:26.5% !important;
    }
    .repousse-colonne-touch-responsive{
        margin-left:9.8333333333333% !important;
    }
    
    .repousse-colonne-touch-responsive4{ 
        margin-left:34.833333333333% !important; 
    }
    .repousse-colonne-tablet-responsive2{
        margin-left:18.166666666667%!important;
    }
    .repousse-colonne-tablet-responsive{
        margin-left:9.8333333333333% !important;
    }
    .repousse-colonne-tablet-responsive3{ 
        margin-left:26.5% !important;
    }
    .colonne-touch2 { width:13.666666666667%; }
    .recette{min-height:257px;}
    .marge-gauche{margin-left:3em;}
    .marge-negative{margin-left:-4.5em;}
    .marge-top-plus{margin-top:50px;}
    .marge-negative-insta{margin-left:1.5em;}
    .chronologie{display:block;left:0}
    .popup{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        right:0;
        overflow-x: auto;
        height:100vh;
        width:100vw;
    }
    .centrer{margin-top:10%;}
    .marge-gauche-ingredients{margin-left:3.8em;}
    
    .rond{
        width:15px;
        height:15px;
        margin:0 10px;
    }
}

/* 3) affichage PC standard : version 960px --------------------- */
@media screen and (min-width: 1025px) and (max-width: 1299px) {
	body { 
		background-color:;
        font-size:0.92em;
		}
    .page{
        width:1000px;
    }
    
    .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:-45%;
    right:20%;
}

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

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

    .colonne-desktop1 { width:5.3333333333333%; }
    .colonne-desktop2 { width:13.666666666667%; }
    .colonne-desktop3 { width:22%; }
    .colonne-desktop4 { width:30.333333333333%; }
    .colonne-desktop5 { width:38.666666666667%; }
    .colonne-desktop6 { width:47%; }
    .colonne-desktop7 { width:55.333333333333%; }
    .colonne-desktop8 { width:63.666666666667%; }
    .colonne-desktop9 { width:72%; }
    .colonne-desktop10 { width:80.333333333333%; }
    .colonne-desktop11 { width:88.666666666667%; }
    .colonne-desktop12 { width:97%; }
    
    
    .visible-phone { display: none; }
	.visible-tablet { display: none; }
	.visible-desktop { display: block; }
	.visible-large { display: none; } 
	.hidden-phone { display: block; }
	.hidden-tablet { display: block; }
	.hidden-desktop { display: none; }
	.hidden-large { display: block; }
    .visible-touch { display: none; }
    .hidden-touch { display: block; }
    
    .marge-negative{margin-left:-5em;}
    
    .marge-negative-insta{margin-left:6em;}
    .recette{min-height:286px;}
    
    #rond-timeline1{
    position:absolute;
    top:-0.6em;
    left:3em;
}

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

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

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

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

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

#rond-timeline7{
    position:absolute;
    top:-0.6em;
    left:55em;
}
#rond-timeline8{
    position:absolute;
    top:-0.6em;
    left:65em;
}
    
}

/* 4) Large : affichage HD ------------------------------------------ */
@media screen and (min-width: 1300px) and (max-width: 1450px) {
	body { 
		background-color:;
		}
    
    
    .feuille1{
    position:absolute;
    bottom:-63%;
    left:30%;
}

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

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

.feuille4{
    position:absolute;
    bottom:4%;
    right:10%;
}

.feuille5{
    position:absolute;
    bottom:5%;
    left:5%;
}

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


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

.feuille8{
    position:absolute;
    bottom:-70%;
    right:40%;
}

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

.feuille10{
    position:absolute;
    bottom:-30%;
    right:10%;
}
    
    
    
    .colonne-large1 { width:5.3333333333333%; }
    .colonne-large2 { width:13.666666666667%; }
    .colonne-large3 { width:22%; }
    .colonne-large4 { width:30.333333333333%; }
    .colonne-large5 { width:38.666666666667%; }
    .colonne-large6 { width:47%; }
    .colonne-large7 { width:55.333333333333%; }
    .colonne-large8 { width:63.666666666667%; }
    .colonne-large9 { width:72%; }
    .colonne-large10 { width:80.333333333333%; }
    .colonne-large11 { width:88.666666666667%; }
    .colonne-large12 { width:97%; }
    
    .visible-phone { display: none; }
	.visible-tablet { display: none; }
	.visible-desktop { display: none; }
	.visible-large { display: block; } 
	.hidden-phone { display: block; }
	.hidden-tablet { display: block; }
	.hidden-desktop { display: block; }
	.hidden-large { display: none; }
    .visible-touch { display: none; }
    .hidden-touch { display: block; }
    
    h1{font-size:3em;}
    
	}





/* 5) Large : affichage HD ------------------------------------------ */
@media screen and (min-width: 1451px) {
	body { 
		background-color:;
		}
    .colonne-large1 { width:5.3333333333333%; }
    .colonne-large2 { width:13.666666666667%; }
    .colonne-large3 { width:22%; }
    .colonne-large4 { width:30.333333333333%; }
    .colonne-large5 { width:38.666666666667%; }
    .colonne-large6 { width:47%; }
    .colonne-large7 { width:55.333333333333%; }
    .colonne-large8 { width:63.666666666667%; }
    .colonne-large9 { width:72%; }
    .colonne-large10 { width:80.333333333333%; }
    .colonne-large11 { width:88.666666666667%; }
    .colonne-large12 { width:97%; }
    
    .visible-phone { display: none; }
	.visible-tablet { display: none; }
	.visible-desktop { display: none; }
	.visible-large { display: block; } 
	.hidden-phone { display: block; }
	.hidden-tablet { display: block; }
	.hidden-desktop { display: block; }
	.hidden-large { display: none; }
    .visible-touch { display: none; }
    .hidden-touch { display: block; }
    
    h1{font-size:3em;}
    
	}