/* =Reset default browser CSS. Based on work by Eric Meyer: http://meyerweb.com/eric/tools/css/reset/index.html
-------------------------------------------------------------- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	background: transparent;
	border: 0;
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6 {
	clear: both;
	font-weight: normal;
}
ol, ul {
	list-style: none;
}
blockquote {
	quotes: none;
}
blockquote:before, blockquote:after {
	content: '';
	content: none;
}
del {
	text-decoration: line-through;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a img {
	border: none;
}

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }
 
 
img {
	max-width: 100%;
	display: block;
}
 
input
{
	outline: none;
}

button {
	background: none;
	border: 0;
}

a
{
	text-decoration: none;
}

@font-face {
    font-family: 'Castor';
    src: url('../fonts/Castor-One.eot');
    src: local('Castor One'), local('Castor-One'),
        url('../fonts/Castor-One.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Castor-One.woff2') format('woff2'),
        url('../fonts/Castor-One.woff') format('woff'),
        url('../fonts/Castor-One.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body
{
	background: url(../img/bg_mobile.jpg);
	overflow-x: hidden;
}

body, a
{
	font-family: 'Roboto';
	color: #482B1E;
}

.default
{
	font-family: 'Roboto', sans-serif;
}

#header
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 13px;
	padding: 19px 35px 0 35px;
}

.layout
{
	display: flex;
	flex-flow: column;
	align-items: center;
	padding: 0 20px;
}

#nav {
	display: flex;
	justify-content: center;
	gap: 40px;
	margin: 17px 0 ;
}

body.home .mentions {
	text-align: center;
}

body.home .mentions, body.home .mentions a {
	color: #482B1E;
	font-size: 12px;
	font-weight: 500;
}

body.home .mentions a {
	text-decoration: underline;
}

.cta.white {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}


.cta.red {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

#navmobile {
	display: none;
}

body.nav #navmobile {
	display: block;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background: #D00900;
	z-index: 11;
	padding: 30px;
}

body.nav #navmobile .top {
	display: flex;
	justify-content: space-between;
}


body.nav #navmobile .top .menu {
	flex: 0 0 auto;
	width: 93px;
	height: 45px;

}

body.nav #navmobile .top .close {
	flex: 0 0 auto;
	width: 110px;
	height: 43px;
	background: url(/img/close.png) no-repeat center center / 100%;
}

body.nav #navmobile .items {
	margin-top: -45px;
}

body.nav #navmobile .items li {
	margin-bottom: 12px;
}

body.nav #navmobile .items li.marge {
	margin-bottom: 70px;
}

body.nav #navmobile .items a {
	color: #fff;
	font-size: 28px;
	text-transform: uppercase;	
	font-family: 'Baloo 2', cursive;
	font-weight: bold;
}

body.nav #navmobile .items .small a {
	font-size: 22px;
	line-height: 1.2;
}

body.home .cta.white {
	margin-top: 5px;
}

body.home .cta.red {
	margin-top: 10px;
}

h2
{
	font-size: 32px;
    padding: 12px 5px 10px 5px;	
    text-align: center;
    background: #fff;
    line-height: 1;
}

body.home h2 {
	font-size: 25px;
	margin: 20px 0 15px;
	padding: 15px 20px 10px 20px;	
}

body.home .layout { 
	text-align: center;
}

body.home .recettes {
	display: flex;
	flex-flow: column;
	align-items: center;
}


.contrat {
	font-family: 'Roboto';
	font-size: 8px;
	font-weight: 500;
	text-transform: uppercase;
	padding-bottom: 3px;
}

body.form .contrat {
	font-size: 10px;
	margin-top: 20px!important;
}

label span input {
    z-index: 999;
    line-height: 0;
    font-size: 15px;
    position: absolute;
    color: #a7a7a7;
    top: -2px;
    left: -700px;
    opacity: 0;
    filter: alpha(opacity = 0);
    -ms-filter: "alpha(opacity=0)";
    cursor: pointer;
    _cursor: hand;
    margin: 0;
    padding:0;
}

.fields input, .fields textarea
{
	width: 100%;
	height: 48px;
	border: 0;
	padding: 0 15px;
	font-family: 'Roboto', sans-serif; 
	color:#002D4B; 
	font-size: 17px;	
	border-radius: 4px;
	border: solid 2px #D00900;
    background-color: #fff;
}

.fields textarea
{
	height: 145px;
	padding: 10px;
}

.fields .selectcontainer
{
	width: 100%;
	height: 48px;
	border: 0;
	padding: 0 10px;
	font-family: 'Roboto', sans-serif; 
	color:#002D4B; 
	font-size: 17px;	
	border-radius: 4px;
	border: solid 2px #D00900;
    background-color: #fff;
}

.fields .selectcontainer select
{
	border: 0;
	background: none;
	width: 100%;
	height: 100%;
	font-size: 18px;
	font-family: 'Roboto', sans-serif; 
	color:#002D4B; 
}

form .row
{
	display: flex;
	gap: 13px;
	margin-bottom: 13px;
	justify-content: center;
}

form input::-webkit-input-placeholder, form textarea::-webkit-input-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 18px; }
form input::-moz-placeholder, form textarea::-moz-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 18px; } 
form input:-ms-input-placeholder, form textarea:-ms-input-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 18px; }
form input:-moz-placeholder, form textarea:-moz-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 18px; }


form input.error { color: red; }

form input.error::-webkit-input-placeholder, form textarea.error::-webkit-input-placeholder { color: red; }
form input.error::-moz-placeholder, form textarea.error::-moz-placeholder { color: red; } 
form input.error:-ms-input-placeholder, form textarea.error:-ms-input-placeholder { color: red; }
form input.error:-moz-placeholder, form textarea.error:-moz-placeholder { color: red; }

.fields .selectcontainer select.error { color:red; }

label.filebutton {
	flex: 0 0 154px;
  width: 154px;
  height: 31px;
  border-radius: 31px;
  background: #D00900;
  color: #fff;
  overflow:hidden;
  position:relative;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;

    
}

label.filebutton .txt {
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
    font-family: 'Roboto', sans-serif; 
	color: #fff;
	font-size: 14px;
	font-weight: bold;
}

label.filebutton.error .txt {
	color: red;
	background: #fff;	
}

.zone
{
	margin-top: 20px;
	margin-bottom: 12px;
	display: flex;
}

.form label {
	font-family: 'Roboto', sans-serif; 
	font-size: 20px;
	font-weight: bold;
}

.zone .filename
{
	font-size: 14px;
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;
	
	font-family: 'Roboto', sans-serif; 
	
	display: flex;
    padding-top: 8px;
    height: 53px;
    padding-left: 15px;
}


body.form .form .first h2 {
	margin-bottom: 25px;
}

body.form .form .second h2 {
	margin-top: 30px;
	margin-bottom: 20px;
}

#footer {
	padding: 20px;
	background: #E30613;
	width: 1290px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

#footer, #footer a {
	color: #fff;
	font-family: 'Roboto', sans-serif;
	font-size: 9px;
	font-weight: bold;
	text-transform: uppercase;
}

form .radios {
	margin-top: 35px;
}

form .radios, form .radios a
{
	font-family: 'Roboto', sans-serif; 
}

form .radios a
{
	text-decoration: underline;
	padding-bottom: 3px;
	text-underline-offset: 2px;
}

form .radios > div
{
	margin-bottom: 12px;
	padding-left: 32px;
	position: relative;
	cursor: pointer;
	font-weight: 500;
	font-family: 'Roboto', sans-serif; 
}

form .radio.red a {
	color: #D00900;
}


form .submit {
	display: flex;
	flex-flow: column;
	align-items: center;
	margin: 30px 0 0px 0;
}

sup {
	vertical-align: top;
	font-size: 11px;
}

form .obli {
	font-family: 'Roboto', sans-serif; 
}

form .radios > div:before
{
	content: '';
	position: absolute;
	left: 0;
	top: -3px;
	width: 23px;
	height: 23px;
	background: #fff;
	border-radius: 2px;
	border: solid 2px #D00900;
}

form .radios > div.error:not(.checked):before
{
	background: red;
}

form .radios > div.checked:after
{
	content: '';
	position: absolute;
	left: 4px;
	top: 4px;
	width: 15px;
	height: 15px;
	background: #D00900;
	border-radius: 2px;
}

.second .row1 {
	
	position: relative;
}

.second .row1 .sticker {
	position: absolute;
	left: 243px;
	top: -16px;
	width: 183px;
}

.second .row {
		justify-content: flex-start;
	}
	
	.second .row1 {
		margin-top: 25px;
	}
	
	.second .row2 {
		margin-bottom: 40px;	
	}
	
	.second .row5 {
		flex-flow: column;
	}
	
	.second .fields .selectcontainer, .second input {
		width: 170px;
	}


body.resultat .layout
{
	width: 840px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-flow: column;
	align-items: center;
	margin-top: 20px;
}

body.resultat .perdu.layout p
{
	font-family: 'Roboto';
	font-size: 18px;
	font-weight: bold;
	text-align: center;
}

body.resultat .gagne.layout p
{
	font-family: 'Roboto';
	font-size: 14px;
	font-weight: bold;
	text-align: center;
	line-height: 19px;
}

body.resultat .gagne .decouvrez
{
	margin-top: 50px;
	margin-bottom: 30px;
}

body.resultat .perdu
{
	margin-bottom: 25px;
}

body.resultat .merci
{
	margin-bottom: 10px;
}

body.resultat .retentez
{
	margin-top: 25px;
	margin-bottom: 0px;
}

body.resultat .recettes
{
	margin-top: 30px;
}

body.resultat .gain
{
	margin-bottom: 30px;
}

body.fini .layout
{
	margin-top: 30px;
}

body.fini .bientot
{
	margin-top: 25px;
	margin-bottom: 40px;
}

body.fini .recettes
{
	margin-bottom: 25px;
}


body.deja .layout
{
	margin-top: 10px;
	font-weight: bold;
	text-align: center;
}

body.deja .deja
{
	margin-bottom: 10px;
	margin-top: 10px;
}

body.deja .bientot
{
	margin-top: 25px;
	margin-bottom: 40px;
}

body.deja .recettes
{
	margin-bottom: 25px;
	margin-top: 20px;
}

body.deja .retentez
{
	margin-bottom: 20px;
}

body.deja .contrat
{
	text-transform: none;
}

body.deja .contrat sup
{
	font-size: 8px;
}

body.recettes .titre
{
	display: flex;
	justify-content: center;
	padding: 10px 20px;
}

body.recettes .layout
{
	display: flex;
	flex-wrap: wrap!important;
	justify-content: center;
	flex-flow: row;
	width: 750px;
	max-width: 100%;
	padding: 20px;
	margin: 0 auto;
	align-items: flex-start;
	margin-bottom: 40px;
}

body.recettes .layout a
{
	flex: 0 0 193px;
	margin: 10px 20px
}

body.contact .layout
{
	padding-top: 10px;
}

body.contact h2
{
	width: 100%;
	margin-bottom: 15px;
}

body.contact .fields
{
	display: flex;
	flex-wrap: wrap;
}

body.contact .half
{
	width: calc(50% - 5px);
}

body.contact .row
{
	margin-bottom: 10px;
}

body.contact .row.full
{
	flex: 0 0 100%;
	display: flex;
	justify-content: flex-start;
}

body.contact .row.half
{
	flex: 0 0 calc(50% - 5px);
}

body.contact .row.half.mr
{
	margin-right: 10px;
}

body.contact .row5
{
	display: block;
}

form.load .submit button
{
	opacity: 0.4;
}

.contactForm
{
	width: 550px;
	max-width: 100%;
	margin: 0 auto;
}

@media (min-width: 800px)
{
	body.home .layout {
		flex-flow: row;
		justify-content: center;
		gap: 87px;
		align-items: flex-start;
		width: 745px;
		margin: 0 auto;
	}
	
	
	
	#header {
		gap: 26px;
		padding-top: 0;
		margin-top: 10px;
	}
	
	body.form #header {
		margin-top: -10px;
	}
	
	#mainForm {
		display: flex;
		gap: 63px;
		justify-content: center;
		padding-top: 9px;
	}
	
	html, body {
		height: 100%;
	}
	
	body {
		display: flex;
		flex-flow: column;
	}
	
	#page {
		flex: 1;
	}
	
	body.home .lots {
		margin-top: -39px;
	}
	
	body.home .sticker {
		display: flex;
		justify-content: flex-end;
		margin-top: -76px;
	}
	
	body.home .sticker img {
		transform: translateX(77px);
	}
	
	#footer .desktop {
		display: flex;
		justify-content: center;
		position: absolute;
		left: 0;
		top: 0;
		padding: 0 100px;	
		width: 100%;
		gap: 25px;
	}
	
	#footer .wrap
	{
		width: 1024px;
		max-width: 100%;
		margin: 0 auto;
		position: relative;
	}
	
	body.home .cta.white a {
		margin-top: 10px;
	}
	
	body.home .mentions {
		
	}
	
	body.home #page {
		margin-top: 30px;
	}
	
	body.home h2 br {
		display: none;
	}
	
	body.home h2 {
		padding: 9px 15px 5px 15px;
		font-size: 20px;
	}
	
	.cookeo {
		margin-top: -24px;
	}
	
	
	#nav a {
		font-size: 18px;
		font-family: 'Baloo 2', cursive;
		font-weight: 800;
		color: #fff;
	}
	
	.contrat {
		display: none;
	}
	
	.contrat2 {
		display: block;
		text-align: center;
		margin-bottom: 5px;
		margin-top: 10px!important;
	}
	
	body.home .recettes {
		margin-top: -27px;
	}
	
	.cta.red a {
		width: 159px;
		height: 38px;
		border-radius: 38px;
		font-size: 18px;
		padding-top: 2px;
	}
	
	body
	{
		background: url(../img/bg.jpg) no-repeat center top / 1290px;
	}
	body:not(.home)
	{
		background: url(../img/bg2.jpg) no-repeat center top / 1290px;
	}
	
	.form label br {
		display: none;
	}
	
	.form label {
		font-size: 16px;
	}
	
	body.form .form .first .titre {
		margin-bottom: 16px;
	}
	
	body:not(.home) h2 {
		font-size: 22px;
		display: inline-block;
		padding-left: 30px;
		padding-right: 30px;
	}
	
	.fields input, .fields .selectcontainer {
		height: 40px;
	}
	
	.second .fields > div:not(.titre) {
		padding-left: 17px;
	}
	
	.first .fields > div:not(.titre) {
		padding-left: 26px;
		padding-right: 26px;
	}
	
	body.form .form .second .titre {
		margin-bottom: 14px;
		margin-top: 0;
	}
	
	.zone {
		margin-top: 16px;
		margin-bottom: 2px;
	}
	
	.fields input, .fields .selectcontainer select, .fields textarea {
		font-size: 16px;
	}
	
	form input::-webkit-input-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 16px; }
	form input::-moz-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 16px; } 
	form input:-ms-input-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 16px; }
	form input:-moz-placeholder { font-family: 'Roboto', sans-serif; color:#482B1E; opacity: 1; font-size: 16px; }
	
	.second .row2 {
		margin-bottom: 21px;
	}
	
	form .radios {
		margin-top: 10px;
		font-size: 12px;
	}
	
	form .radios > div::before { 
		width: 18px;
		height: 18px;	
		top: 0;
		
	}
	
	form .radios > div.checked::after {
		left: 4px;
		top: 4px;
		width: 10px;
		height: 10px;	
	}
	
	form .obli {
		font-size: 12px;
	}
	
	.submit button {
		width: 262px;
		height: 64px;
		border-radius: 64px;
		font-size: 23px;
		cursor: pointer;
	}
	
	form .submit {
		margin-top: 10px;
	}
	
	.form .first {
		padding-left: 153px;
	}
	
	form .radios > div {
		padding-left: 28px;
	}
	
	body.instagram .bloc2 {
		margin-bottom: 12px;
	}
	body.instagram .bloc3 {
		margin-bottom: 4px;
	}
	body.instagram .bloc4 {
		margin-bottom: 15px;
	}
	
	body.instagram .reglement, body.instagram .reglement a {
		font-family: 'Roboto';
		font-size: 11px;
		color: #D00900;
		text-transform: uppercase;
		text-decoration: underline;
	}
	
	body.instagram .reglement {
		margin-bottom: 5px;
	}
}

body.confidentialite .layout, body.mentions .layout
{
	width: 1044px;
	max-width: 100%;
	margin: 10px auto;
}

body.confidentialite .titre, body.mentions .titre, body.contact .titre
{
	background: url(/img/fond_titre.png) no-repeat center center / cover;
	width: 100%;
	display: flex;
	justify-content: center;
	padding: 0 10px;
	height: 49px;
	margin-bottom: 30px;
}

body.confidentialite .txt, body.mentions .txt, body.confidentialite .txt a, body.mentions .txt a
{
	font-size: 12px;
	font-family: 'Roboto';
	line-height: 18px;
}

body.confidentialite .txt a, body.mentions .txt a
{
	text-decoration: underline;
}

body.confidentialite .retour, body.mentions .retour
{
	margin-top: 50px;
	margin-bottom: 30px;
}

body.contact .submit {
	margin-bottom: 20px;
}

@media (max-width: 800px)
{
	#header > div:first-child img {
		width: 144px;
	}
	
	body.resultat #header > div:first-child img {
		width: 122px;
	}
	
	body:not(.home) #header > div:last-child {
		display: none;
	}
	
	body.form #header {
		margin-bottom: 90px;
	}
	
	body.form .titre {
		margin-bottom: 10px;
	}
	
	.second .row1 .sticker {
		width: 140px;
		left: 176px;
		top: 12px;
	}
	
	.perdu br {
		display: none;
	}
	
	body.contact button img {
		width: 326px;
	}
	
	body.form {
		overflow-x: hidden;
	}
	
	body.resultat .layout {
		margin-top: 90px;
	}
	
	body:not(.home)
	{
		background: url(../img/bg2_mobile.jpg) no-repeat center top / cover;
	}
	
	body:not(.home):not(.form)
	{
		background: url(../img/bg_simple_mobile.jpg) no-repeat center top / 100%;
	}
	
	
	form .radios > div.checked:after {
		top: 1px;
	}
	
	body.home .sticker
	{
		display: flex;
		justify-content: flex-end;
		margin-top: 30px;
	}
	
	body.home .sticker img
	{
		width: 200px;
	}
	
	body.fini .decouvrez, body.deja .decouvrez {
		margin-bottom: 35px;
	}
	
	body.resultat .retentez {
		margin-bottom: 20px;
	}
	
	body.resultat .recettes {
		margin-bottom: 15px;
	}
	
	body.resultat .gagne .decouvrez {
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	body.instagram .bloc1 {
		margin-bottom: 22px;
	}
	body.instagram .bloc2 {
		margin-bottom: 12px;
		padding: 0 5%;
	}
	body.instagram .bloc3 {
		margin-bottom: 4px;
	}
	body.instagram .bloc4 {
		margin-bottom: 25px;
		padding: 0 5%;
	}
	
	body.deja .bientot {
		margin-bottom: 0;
	}
	
	body.instagram .reglement, body.instagram .reglement a {
		font-family: 'Roboto';
		font-size: 14px;
		color: #D00900;
		text-transform: uppercase;
		text-decoration: underline;
	}
	
	body.instagram .reglement {
		margin-bottom: 15px;
	}
	
	.contrat2 {
		text-align: center;
		margin: 20px 0;
	}
	
	.submit {
		margin: 20px 0 40px 0;
	}
	
	.cookeo img {
		width: 320px;
	}
	
	#footer .desktop {
		display: none;
	}
	
	.fields input, .fields .selectcontainer
	{
		max-width: 100%;
	}
	
	
	.fields .row, .zone {
		width: 272px;
		max-width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
	
	
	#nav {
		display: none;
	}
	
	#header
	{
		display: flex;
		flex-flow: column;
		align-items: center;
	}
	
	h2 {
		margin-left: calc(50% - 50vw)!important;
		margin-right: calc(50% - 50vw)!important;
	}
	
	#footer {
		position: sticky;
		bottom: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px 25px;
	}
	
	#footer .toggle {
		width: 88px;
		height: 24px;
		background: url(/img/burger.png) no-repeat center center / 100%;
	}
	
	body.recettes .layout a
	{
		flex: 0 0 calc(100% - 40px);
		margin: 10px 20px;
		display: flex;
		justify-content: center;
	}
	
	body.contact .layout
	{
		display: block;
	}
	
	body.contact .row.half {
		margin-right: 0!important;
		width: 100%;
		flex: 0 0 100%;
	}
	
	body.contact h2
	{
		width: 100vw;
	}
	
	body.contact .fields .row, body.contact .zone {
		width: 100%;
	}
	
	body.contact .zone {
		margin-top: 4px;	
	}
	
	body.contact .pj {
		margin-top: 14px;	
	}
	
	body.contact form .obli {
		margin-top: 20px;
	}
}