/* =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%;
}
 
input
{
	outline: none;
}

a
{
	text-decoration: none;
}

/* FONTS
-------------------------------------------------------------- */

@font-face {
    font-family: 'Baloo';
    src: url('../fonts/Baloo-Regular.woff2') format('woff2'),
        url('../fonts/Baloo-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/*

@font-face {
    font-family: 'burbank_big_condensedmedium';
    src: url('../fonts/burbank_big_condensed_medium-webfont.woff2') format('woff2'),
         url('../fonts/burbank_big_condensed_medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
  font-family: 'GothamRounded-Book';
  src: url("../fonts/GothamRoundedBook21018.eot");
  src: url("../fonts/GothamRoundedBook21018.eot?#iefix") format("embedded-opentype"),
    url("../fonts/GothamRoundedBook21018.otf") format("opentype"),
    url("../fonts/GothamRoundedBook21018.svg") format("svg"),
    url("../fonts/GothamRoundedBook21018.ttf") format("truetype"), 
    url("../fonts/GothamRoundedBook21018.woff") format("woff"),
    url("../fonts/GothamRoundedBook21018.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto Flex';
  src: url("../fonts/GothamRoundedBold21016.eot");
  src: url("../fonts/GothamRoundedBold21016.eot?#iefix") format("embedded-opentype"),
    url("../fonts/GothamRoundedBold21016.otf") format("opentype"), 
    url("../fonts/GothamRoundedBold21016.svg") format("svg"), 
    url("../fonts/GothamRoundedBold21016.ttf") format("truetype"), 
    url("../fonts/GothamRoundedBold21016.woff") format("woff"),
    url("../fonts/GothamRoundedBold21016.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'GothamRounded-Medium';
  src: url("../fonts/GothamRoundedMedium21022.eot"); 
  src: url("../fonts/GothamRoundedMedium21022.eot?#iefix") format("embedded-opentype"), 
    url("../fonts/GothamRoundedMedium21022.otf") format("opentype"), 
    url("../fonts/GothamRoundedMedium21022.svg") format("svg"),
    url("../fonts/GothamRoundedMedium21022.ttf") format("truetype"), 
    url("../fonts/GothamRoundedMedium21022.woff") format("woff"), 
    url("../fonts/GothamRoundedMedium21022.woff2") format("woff2"); 
  font-weight: normal;
  font-style: normal;
}

*/
sup
{
	vertical-align: top;
	font-size: small;
}

body
{
	background: #12BAEE;
}

body, a
{
	color: #20206C;
	font-family: 'Baloo';
	font-size: 15px;
}


#page
{
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	flex: 1;
}

body {
	position: relative;
	display: flex;
	flex-flow: column;
}

body:before {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 133px;
	height: 100%;
	background: url(/img/carreaux.png) repeat-y left 60px / 100%;
	content: '';
	max-width: 20%;
	z-index: 2;
}

body:after {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 133px;
	height: 100%;
	background: url(/img/carreaux.png) repeat-y left 60px / 100%;
	content: '';
	max-width: 24%;
	z-index: 2;
}


.bat
{
	position: relative;
	text-align: right;
}

body.home img.main {
	max-width: 100%;
	display: block;
}


#header
{
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 4;
	background: #20206C;
	height: 60px;
	box-shadow: 0px 4px 8px -2px #0000004D;
	flex: 0 0 60px;
}

#header .logo {
	position: absolute;
	left: 96px;
	top: 6px;
}

#header .logo img {
	width: 56px;
}

#header .center
{
	margin-left: 70px;
	margin-right: 60px;
	position: relative;
}


#header .center a {
	position: relative;
	z-index: 2;
	color: #fff;
}

#header .center img {
	display: block;
	width: 140px;
}

#header .left, #header .right {
	flex: 1;
	padding-top: 10px;
	position: relative;
	z-index: 2;
}

#header ul { 
	display: flex;
	gap: 28px;	
} 

#header .left ul {
	justify-content: flex-end;
}

#header li {
	padding: 2px 5px;
}

#header a {
	font-size: 15px;
	color: #fff;
}

.layout {
	display: flex;
	position: relative;
	z-index: 2;
	justify-content: center;
}

html {
  height: 100%;
}
body {
  min-height: 100%;
}


body.preview .titre {
	margin: 30px 0;
}

body.home {
	overflow-x: hidden;
}

body.home .layout {
	display: block;	
}

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

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

body.home .mentions .titre {
	color: #f6a006;
	font-size: 42px;
	font-weight: bold;
	margin-top: 30px;
	margin-bottom: 10px;
}

body.home .mentions li {
	font-size: 32px;
	line-height: 1;
	color: #fff;
	margin-bottom: 15px;
}

body.home .mentions li span {
	display: inline-flex;
	vertical-align: top;
	margin-top: 7px;
	color: #fff;
	background: #f6a006;
	width: 17px;
	height: 17px;
	justify-content: center;
	align-items: center;
	border-radius: 17px;
	font-size: 14px;
}

body.home .mentions li .mob {
	display: none;
}

body.home .participer {
	max-width: 100%;
	margin-top: 30px;
	text-align: center;
}

body.home .participer .img {
	position: relative;
}

body.home .participer .img img {
	display: block;	
}

body.home .participer .link {
	text-align: center;
	margin-top: -48px;
	position: relative;
	z-index: 2;
}

body.home .participer .link a {
	color: #253765;
	font-size: 26px;
	text-transform: uppercase;
	width: 272px;
	height: 74px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #f7e157;
	border: 3px solid #fff;
	border-radius: 74px;
}

body.home .participer .dates {
	position: absolute;
	text-align: center;
	left: 0;
	width: 100%;
	top: 28px;
	color: #fff;
}

body.form sup {
	font-size: 12px;
}

body.form .categorie {
	margin-bottom: 42px;
}

body.form .intro {
	text-align: center;
	margin: 40px 0 0px 0;
	padding-left: 20px;
	padding-right: 20px;
}

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

.fields input
{
	height: 40px;
	border: 0;
	padding: 0 15px;
	color:#253765; 
	font-size: 18px;	
	border: 0;
    background-color: #fff;
    border-radius: 7px;
	font-family: 'Roboto Flex';
}


#mainForm {
	width: 920px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
}

.selectcontainer > span
{
	display: block;
	width: 100%;
}

.selectcontainer:after
{
	clear: both;
	content: '';
	display: table;
}

.selectcontainer
{
	width: 100%;
	height: 40px;
	line-height: 40px;
	position: relative;
	overflow: hidden;
}

.selectcontainer.small
{
	width: 323px;
	max-width: 100%;
}

.selectcontainer select
{
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 40px;
}


.selectcontainer span.select
{
	left: 0px;
	top: 0px;
	width: 100%;
	line-height: 40px;	
	background: #fff url(/img/select.png) no-repeat calc(100% - 10px) center / 19px;
	position: absolute;
	padding-right: 44px;
	text-align: left;
	text-overflow: ellipsis;
    white-space: nowrap;
	border: 0;
	color: #253765;
	padding-left: 15px;
	border-radius: 7px;
	font-size: 18px;
}

.selectcontainer.error span.select
{
	background-color: red;
}



body.form #header {
	position: relative;
}

body.form #ombre {
	display: none;
}

.form.wrap
{
	width: 100%;
	padding-bottom: 30px;
}

form .fields {
	margin-bottom: 0px;
}

form .row
{
	margin-bottom: 43px;
	display: flex;
	align-items: center;
}

form .row.nomb
{
	margin-bottom: 0;
}

form .row label
{
	flex: 0 0 482px;
	font-size: 18px;
	text-transform: uppercase;
}

body.form .bg 
{
	background: url(/img/bg_form_bottom.png) no-repeat left center / auto 100%;
	height: 407px;
	margin-top: -300px;
}

form .cta {
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-transform: uppercase;
	width: 203px;
	height: 46px;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	background: #b31683;
	border: 0;
	border-radius: 25px;
}


form .fixe
{
	font-size: 18px;
}

form input
{
	width: 100%;
}

.form_mentions
{
	padding-left: 34px;
}

form .submit
{
	display: flex;
	flex-flow: column;
	align-items: center;	
	font-size: 18px;
	text-transform: uppercase;
	margin-bottom: 40px;
}

form.load .submit input
{
	opacity: 0.2;
	background: #372a2d!important;
	cursor: default;
}

form {
	font-family: "Roboto Flex";
	font-weight: 500;
}

form .message
{
	color: red;
	padding: 20px;
	border: 2px solid red;
	display: none;
	margin-bottom: 20px;
	text-transform: none;
}

form input::-webkit-input-placeholder { font-family: "Roboto Flex", sans-serif; color:#002D4B; opacity: 1; font-size: 16px; }
form input::-moz-placeholder { font-family: "Roboto Flex", sans-serif; color:#002D4B; opacity: 1; font-size: 16px; } 
form input:-ms-input-placeholder { font-family: "Roboto Flex", sans-serif; color:#002D4B; opacity: 1; font-size: 16px; }
form input:-moz-placeholder { font-family: "Roboto Flex", sans-serif; color:#002D4B; opacity: 1; font-size: 16px; }


form input.error { background: red; }

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

form button
{
	border: 0;
	outline: none;
	padding: 0;
	cursor: pointer;
	position: relative;
}

form button:before, body.resultat .merci .link a:before
{
	position: absolute;
	content: '';
	display: block;
	width: 38px;
	height: 34px;
	background: url(../img/coeurs_left.png) no-repeat center center / 100%;
	left: -80px;
	top: 9px;
}

body.jeu .back {
	margin-top: 20px;
	display: none;
}

body.resultat .layout .wrap
{
	margin-bottom: 40px;
}

body.resultat #page {
	display: flex;
	flex-flow: column;
	width: 100%;
}

body.resultat .layout {
	flex-flow: column;
}

body.resultat .layout img {
	max-width: 70%;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

body.resultat .merci .link a:before
{
	top: -21px;
	left: -46px;
}

form button:after, body.resultat .merci .link a:after
{
	position: absolute;
	content: '';
	display: block;
	width: 38px;
	height: 34px;
	background: url(../img/coeurs_right.png) no-repeat center center / 100%;
	right: -61px;
	top: -21px;
}

body.resultat .merci .link a:after
{
	top: 14px;
}

body.form #page {
	padding-left: 133px;
	padding-right: 133px;
}

form button img
{
	display: block;
}

form .caption
{
	font-style: italic;
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 21px;
}

form .radios
{
	padding-top: 15px;
}

form .radios
{
	padding-top: 15px;
	padding-left: 30px;
}

form .obli
{
	text-transform: uppercase;
	padding-left: 30px;
	font-weight: normal;
	margin-top: 20px;
	margin-bottom: 40px;
}

form .obli sup, form .radios sup
{
	vertical-align: top;
	font-size: 12px;
}

form .radios, form .radios a
{
	font-size: 18px;
	line-height: 25px;
}

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

form .radios > div
{
	margin-bottom: 25px;
	position: relative;
	cursor: pointer;
	display: flex;
	align-items: flex-start;
	gap: 25px;
}

form .radios > div:before
{
	content: '';
	width: 23px;
	height: 23px;
	background: #fff;
	border-radius: 4px;
	border: 0;
	flex: 0 0 23px;
}

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

form .radios > div.checked:before
{
	background: #fff url(/img/check.svg) no-repeat center center / 20px;
}

label.filebutton {
	width: 100%;
  position:relative;

}

.photo label.filebutton {
	background: url(/img/input_photo.png) no-repeat center center / 100%;	
	width: 253px;
	height: 40px;
}

.file label.filebutton {
	background: url(/img/input_file.png) no-repeat center center / 100%;	
	width: 253px;
	height: 40px;
}



.zone.error label.filebutton {
	background: red;	
}

label.filebutton .txt {
    display: flex;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    height: 100%;
	font-size: 27px;
	font-weight: bold;
	color: #f6a006;
	gap: 15px;

}

label.filebutton .txt .info {
	display: block;
	width: 24px;
	height: 24px;
	background: url(/img/info.svg) no-repeat center center / 100%;
	position: absolute;
	right: -33px;
	top: 8px;
	cursor: pointer;
	border-radius: 7px;

}

#overall
{
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 9998;
	background: rgba(0, 0, 0, 0.25);
}

.popup
{
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 9999;
	text-align: center;
	cursor: pointer;
	align-items: center;
	justify-content: center;
}

.files
{
	display: flex;
	justify-content: center;
	gap: 98px;
	margin-top: 60px;
	margin-bottom: 20px;
}

.zone
{
	margin-top: 12px;
	margin-bottom: 32px;
	display: flex;
	flex: 1;
	position: relative;
}

.zone.photo {
	display: flex;
	justify-content: flex-end;
}

.zone .filename
{
	font-size: 14px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;	
	display: flex;
    align-items: center;
    height: 40px;
    padding-left: 15px;
    position: absolute;
    left: 0;
    bottom: -40px;
}

.zone.photo .filename {
	left: 144px;
}

body
{
	position: relative;
}

body.home .mobile {
	display: none;
}

body.home #ombre {
	top: 35.4%;
}

body.home #page
{
	padding: 23px 0 0 0;
}


body.form .layout
{
	width: 1390px;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-top: 50px;
	padding-left: 20px;
	padding-right: 20px;
}



body #page {
	position: relative;
	z-index: 3;
}

body.jeu .bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 283px;
}

body.jeu .bottom .inner {
	position: relative;	
	height: 100%;
}

body.jeu .bottom .inner:before, body.resultat .bottom .inner:before, body.dotations .bottom .inner:before, body.termine .bottom .inner:before {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 342px;
	height: 283px;

	content: '';
}

/*
body.jeu .bottom .inner:after, body.resultat .bottom .inner:after, body.dotations .bottom .inner:after, body.termine .bottom .inner:after {
	position: absolute;
	right: 0;
	bottom: 0px;
	width: 746px;
	height: 217px;

	content: '';
}
*/
/*
body.deja:before {
	position: absolute;
	right: 0;
	top: 0px;
	width: 380px;
	height: 768px;
	background: url(/img/bg_resultat_left.png) no-repeat center top / 100%;
	content: '';
}


body.deja:after {
	position: absolute;
	right: 0;
	top: 150px;
	width: 385px;
	height: 768px;
	background: url(/img/bg_resultat_right.png) no-repeat right top / 100%;
	content: '';
}

body.resultat:before {
	position: absolute;
	right: 0;
	top: 0px;
	width: 380px;
	height: 768px;
	background: url(/img/bg_resultat_left.png) no-repeat center top / 100%;
	content: '';
}

*/

body.resultat #content {
	position: relative;
}






body.resultat #page {
	padding-top: 60px;
	text-align: center;
	position: relative;
	z-index: 3;

}

body.resultat .back {
	padding-top: 30px;
}

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

body.preview .preview {
	max-height: 708px;	
}

#ombre {
	background: url(../img/ombre.png) repeat-x left top;	
	height: 250px;
	position: absolute;
	left: 0;
	top: 45%;
	width: 100%;
}


body.preview #page {
	margin-top: 20px;
}




body.resultat .texte {
	line-height: 1.3;
	position: absolute;
	text-align: center;
	display: flex;
	justify-content: center;
	padding-top: 200px;
	width: 100%;
	bottom: 33px;
}

body.resultat .texte > div {
	width: 630px;
	max-width: 42%;
	
}

body.resultat .texte > div, body.resultat .texte > div a {
	font-family: "Roboto Flex";
	font-size: 14px;
	line-height: 22px;
	font-weight: 500;
}

body.resultat .texte > div a {
	font-weight: 700;
	text-decoration: underline;	
}

@media(min-width: 1360px)
{
	body.resultat .texte {
		bottom: 55px;	
		
		
	}
	
	body.resultat .texte > div, body.resultat .texte > div a {
			font-size: 16px;	
			line-height: 24px;	
		}
}


@media(max-width: 1200px)
{
	body.resultat .back {
		padding-top: 10px;
	}
	
	body.resultat .back img {
		width: 250px;
	}
	
	body.resultat .texte { 
		bottom: 10px;	
	}
	
}

@media(max-width: 1130px)
{
	body.resultat .texte > div, body.resultat .texte > div a {
			font-size: 13px;	
			line-height: 20px;	
		}
		

}

.more {
	padding-top: 30px;
	text-align: center;
}

.more {
	color: #993399;
	font-size: 11px;
	text-transform: uppercase;
}

.more a.l {
	background: #993399;
	border-radius: 25px;
	padding: 3px 3px 2px 3px;
	color: #ffccff;
	font-size: 12px;
}

.more .links {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
	margin-top: 20px;
	width: 50%;
	margin-left: 25%;
}

.more .links .center {
	display: flex;
	gap: 20px;
	justify-content: space-between;
	align-items: center;
}

body.jeu #page
{
	padding-top: 30px;
	text-align: center;
	position: relative;
	z-index: 3;
}

body.termine .cb
{
	margin-top: 30px;
	margin-bottom: 30px;
}

body.termine #page
{
	padding-top: 40px;
	width: 100%;
	padding-left: 300px;
	padding-right: 300px;
}

body.termine .rouge {
	width: 300px;
	height: 446px;
	left: 10px;
}

body.termine .bleu {
	width: 312px;
	height: 618px;
	right: 10px;
}

body.deja .back
{
	margin-top: 30px;
	margin-bottom: 80px;
}

body.deja #page
{
	padding-bottom: 60px;
	margin-top: 70px;
}

body.dotations
{
	text-align: center;
}

body.dotations img
{
	display: block;
	margin-left: auto;
	margin-right: auto;
}


body.dotations #page , body.deja #page 
{
	display: flex;
	flex-flow: column;
	width: 100%;
	padding-top: 50px;
}


body.jeu #page 
{
	display: flex;
	flex-flow: column;
	width: 100%;
	padding-bottom: 140px;
}

body.jeu .cartes
{
	display: flex;
	justify-content: center;
	margin-top: 40px;
}

body.jeu .cartes .carte
{
	position: relative;
}

body.jeu .cartes .carte2, body.jeu .cartes .carte3
{
	margin-left: -22px;
}

body.jeu .cartes .carte img
{
	position: relative;
	z-index: 2;
	margin-left: -28%;
	margin-top: -70px;
}

body.jeu #ombre {
	top: 48%;
}

body.dotations .mobile {
	display: none;
}

body.termine .titre {
	margin-bottom: 20px;
}

.rouge {
	width: 338px;
	height: 520px;
	background: url(../img/gant_rouge.png) no-repeat right bottom / auto 100%;
	position: absolute;
	left: 40px;
	bottom: -10px;
}

.bleu {
	width: 349px;
	height: 699px;
	background: url(../img/gant_bleu.png) no-repeat right 150px / auto 100%;
	position: absolute;
	right: 40px;
	bottom: -10px;
}

body.resultat .rouge {
	max-width: 30%;
	left: 0;	
}

body.resultat .bleu
	width: 360px;
	height: 499px;
	background: url(../img/gant_bleu_vide.png) no-repeat left bottom / auto 100%;
	position: absolute;
	right: 0px;
	bottom: -10px;
	max-width: 25%;
}

#didomi-host a
{
	font-family: inherit;
}

.bottom
{
	position: absolute;
	z-index: 9;
	padding: 15px;
	left: 0;
	bottom: 0;
	width: 100%;
	text-align: center;
}

body.termine .bottom
{
	position: static;
}

.bottom .inner 
{
	text-align: center;
	display: flex;
	justify-content: center;
	gap: 20px;
}

.bottom , .bottom .inner a { 
	color: #f6a006;
	font-size: 17px;
}

.bottom .inner a {
	font-size: 17px;
	text-decoration: underline;
	text-transform: uppercase;
	
}

.bottom .copy {
	text-transform: uppercase;
	font-size: 17px;
	margin-top: 10px;
	font-weight: bold;
	letter-spacing: 0.05em;
}

#footer {
	height: 175px;
	flex: 0 0175px;
	background: #20206C;
	color: #fff;
	z-index: 4;
	text-align: center;
	position: relative;
}

#footer .links {
	position: absolute;
	display: flex;
	gap: 25px;
	top: 44px;
	right: 209px;
}

#footer .links a {
	width: 25px;
	height: 25px;
}

#footer .links a[href*=facebook] {
	background: url(../img/fb.svg) no-repeat center center;
}

#footer .links a[href*=instagram] {
	background: url(../img/insta.svg) no-repeat center center;
}

#footer a {
	color: #fff;
}

#footer, #footer a {
	font-family: "Roboto Flex";
}

#footer .separ {
	height: 32px;
	background: url(../img/carreaux_footer.png) repeat-x left top;
}

#footer .nav {
	display: flex;
	gap: 35px;
	justify-content: center;
	padding-top: 15px;
	margin-bottom: 35px;
}

#footer .nav a {
	font-size: 14px;	
}

#footer .mention {
	font-size: 12px;	
}

#footer .baseline {
	margin-top: 15px;
}

#footer .baseline, #footer .baseline a {
	font-size: 12px;	
	color: #FCC850;
}

#footer .baseline a {
	text-decoration: underline;
}


@media (max-width: 1280px)
{
	body.jeu .rouge {
		width: 288px;
		background: url(../img/gant_rouge.png) no-repeat right top / 100% auto;
		bottom: -100px;
	}
	
	body.jeu .bleu {
		width: 259px;
		background: url(../img/gant_bleu.png) no-repeat right 150px / 100% auto;
		bottom: -140px;
	}
	
	#footer .links {
		right: 25px;
}

@media (max-width: 911px)
{
	#header li {
		background: none;	
	}
	
	#header .center img {
		margin-left: 20px;
	}
	
	body.resultat #header::after, body.termine #header::after, body.preview #header::after {
		display: none;	
	}
	
	.back img {
		width: 200px;
	}
	
	body.resultat .br {
		margin-bottom: 0;
	}
	
	#header .center:before {
		display: none;
		width: 228px;
		height: 111px;
		background: url(/img/logo_bg_mobile.png) no-repeat center center / 100%;
		position: absolute;
		left: -13px;
		top: -30px;
		content: '';
		z-index: 1;
	}
	
	
	#header .logo {
		display: none;
	}
	
	
	#mainForm {
		padding: 0;
	}

	
	.bottom {
		position: static;
	}
	
	body.dotations .wrap img {
		margin-left: 0;
	}
	
	body.home, body.form {
		
	}
	
	
	body.form .adresse img {
		width: auto;
	}
	
	#header .center {
		margin-right: 0;
		width: 100%;
		margin-left: 0;
	}
	
	body.home .mentions .titre {
		font-size: 34px;
		position: relative;
	}
	
	body.home .mentions .titre:before {
		background: url(/img/comment_fond.png) no-repeat;
		content: '';
		position: absolute;
		left: -10px;
		top: -30px;
		width: 100vw;
		height: 108px;
	}
	
	body.home .layout .right:before {
		display: none;
	}
	
	form input[type="submit"] {
		-webkit-appearance: none;
		border-radius: 0;
	}
	
	#header .left, #header .right {
		display: none;
	}
	
	#header {
		justify-content: flex-start;
	}
	
	body.home .desktop {
		display: none;
	}
	
	body.home .mobile {
		display: block;
	}
	
	#header .center a {
		font-size: 10px;
	}
	
	body.home .layout {
		flex-flow: column-reverse;
		align-items: center;
		width: 100%;
		margin-left: auto;
		max-width: 100%;
		margin-right: auto;
		margin-bottom: 0px;
		margin-top: 20px;
	}
	
	body.home .layout .right {
		margin-left: 0;
		width: auto;
	}
	
	body.home img.main {
		transform: none;
	}
	
	body.form #header::before {
		display: none;	
	}
	
	
	
	body:after {
		content: '';
		width: 23px;
		background: url(/img/carreaux_mobile.png);
	}
	
	
	body.termine #page .cb {
		text-align: left;
	}
	
	body.termine #page, body.home #page {
		padding-left: 0px;
		padding-right: 0px;
	}
	
	body.deja #page {
		padding-top: 0px;
		margin-top: 50px;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	
	body.deja #page img {
		display: block;
	}
	
	body.home .bottom {
		bottom: 34px;
	}
	
	body.home .mentions li {
		font-size: 26px;
	}
	
	body.home .mentions li br {
		display: none;
	}
	
	
	body.home .layout .right .top {
		padding: 0;
	}
	
	body.home #page {
		padding-top: 0px;
		padding-bottom: 0px;
	}
	
	body.dotations .bottom .inner:before {
		display: none;
	}
	
	body.home .participer .link a {
		width: 184px;
		height: 54px;
		font-size: 18px;
	}
	
	body.home .participer {
	}
	
	body.home .participer .dates {
		font-size: 16px;
	}


	body.home .participer .link {
		margin-top: -78px;
	}
	
	body.home .mentions {
	
	}
	
	body.home .mentions li {
		text-align: center;
	}
	
	body.home .mentions li span {
		width: 25px;
		height: 25px;
		font-size: 20px;
		padding-top: 1px;
		margin-bottom: 10px;
	}
	
	body.home .mentions li .mob {
		display: block;	
	}
	
	#footer {
		display: flex;
		flex-flow: column;
		height: auto;
	}
	
	#footer .separ {
		order: 1;
	}
	
	#footer .nav {
		order: 2;
	}
	
	#footer .links {
		order: 3;
	}
	
	#footer .baseline {
		order: 5;
		padding-bottom: 20px;
	}
	#footer .mention {
		order: 4;
		font-size: 10px;
	}
	
	#footer .baseline, #footer .baseline a {
		font-size: 10px;
	}
	
	#footer .links {
		position: relative;
		right: auto;
		width: 100%;
		justify-content: center;
		top: auto;
		margin-bottom: 25px;
	}
	
	#footer .nav {
		gap: 15px;
		margin-bottom: 15px;
	}
	
	#footer .nav a {
		font-size: 9px;
	}
	
	
	.bat {
		display: none;
	}
	
	#toggle {
		display: none;
		width: 78px;
		height: 78px;
		background: url(/img/menu.png) no-repeat center center;	
		position: absolute;
		right: 20px;
		top: 13px;
		cursor: pointer;
		z-index: 9;
	}
	
	body.nav #toggle {
		background: url(/img/close.png) no-repeat center center;		
	}
	
	body.nav #nav {
		background: url(/img/nav.png) no-repeat center center;		
		width: 284px;
		height: 447px;
		position: absolute;
		right: 0;
		top: 0;
		z-index: 7;
	}
	
	body.nav #header .left {
		position: absolute;
		top: 122px;
		right: 37px;
		display: block;
		z-index: 8;
		width: 145px;
	}
	
	body.nav #header .right {
		position: absolute;
		top: 237px;
		right: 37px;
		display: block;
		z-index: 8;
		width: 145px;
	}
	
	body.nav #header a {
	font-size: 20px;
	color: #fff;
	}
	
	body.nav #header ul {
		flex-flow: column;	
		gap: 20px;
	}
	
	body.form .intro {
		margin-top: 25px;
	}
	
	body.form .categorie {
		font-size: 12px;
		padding: 18px 5px;
		display: block;
		margin-bottom: 20px;
		text-align: center;
	}
	
	#mainForm {
		width: 347px;
		
		max-width: 100%;
		margin: 0 auto;
	}
	
	form .row label, .selectcontainer span.select, body.form sup, form .fixe {

	}
	
	form .row label, form .fixe {
		padding-left: 4px;
	}
	
	form .row > * {
		width: 100%!important;
	}
	
	.fields input {
		height: 29px;
		font-size: 17px;
	}
	
	.selectcontainer {
		height: 29px;
		line-height: 29px;
	}
	
	.selectcontainer span.select {
		overflow: hidden;
	}
	
	.selectcontainer select {
		height: 29px;
	}
	
	.selectcontainer span.select {
		line-height: 29px;
		font-size: 14px;
	}
	
	.selectcontainer span.select {
		background-size: 16px;
	}	
	
	body
	{
		overflow-x: hidden;
	}
	
	
	.fields {
		flex-flow: column;
		align-items: center;
	}
	
	.fields input {
		margin-right: 0!important;
		margin-left: 0!important;
	}
	
	.fields > * {
		width: 100%;
		max-width: 100%;
		flex: 1 auto;
	}
	
	body.form .categorie.adresse {
		width: 171px;
	}
	
	form .form {
		padding: 25px;
	}
	
	form p.desktop {
		display: none;
	}
	
	.fields p {
		padding-bottom: 10px;
	}
	
	.fields .ticket {
		margin-top: 10px;
	}
	
	form .row {
		flex-flow: column;
		align-items: center;
		margin-bottom: 15px;
		gap: 0px;
	}
	
	form .caption {
		text-align: center;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	form .row > * {
		flex: auto!important;
	}
	
	form .radios > div br {
		display: none;
	}
	
		
	form .mentions {
		padding: 0 20px;
	}
	
	body.form .layout {
		padding: 0;
	}
	
	
	.zone.photo .filename {
		left: 0;
	}
		
	.files {
		flex-flow: column;
		gap: 10px;
		padding: 0;
		margin: 0 0 10px 0;
	}
	
	form .radios {
		padding: 0;
		margin-top: 10px;
	}
	
	form .radios > div, form .radios a {
		
	}
	
	form .radios > div {
		align-items: flex-start;
		gap: 7px;
	}
	
	body.jeu .titre {
		padding: 0 25px;
	}
	
	
	
	form .radios > div:before {
		flex: 0 0 20px;
		width: 20px;
		height: 20px;
		border-radius: 3px;
	}
	
	form .radios > div.checked:before {
		background-size: 15px;
	}
	
	body::before {
		width: 23px;
		background: url(/img/carreaux_mobile.png);
		
	}
	
	#header {
		height: 33px;
		flex: 0 0 33px
	}
	
	#header ul {
		gap: 20px;
		justify-content: center;
		width: 100%;
	}
	
	
	body.termine #page {
		margin-top: 40px;
	}
	
	 body.termine #header::before {
		 display: none;
	 }
	
	body.jeu .bottom .inner:after, body.resultat .bottom .inner:after, body.dotations .bottom .inner:after, body.termine .bottom .inner:after {
		display: none;
	}
	
	
	
	body.resultat .texte {
		margin-top: 30px;
		width: 100%;
		padding: 0 20px;
	}
	
	body.resultat .texte br {
		display: none;
	}
	
	body.resultat .texte .br {
		margin-top: 20px;	
	}
	
	body.jeu #page {
		padding-top: 46px;
		padding-bottom: 230px;
	}
	
	body.jeu .cartes {
		flex-flow: column;
		margin-top: 0;
		padding-bottom: 10px;
		padding-top: 10px;
	}
	
	body.jeu .cartes .carte:before {
		display: none;
	}
	
	body.jeu .cartes .carte img {
		width: 314px;
		max-width: 80%;
	}
	
	.form.wrap {
		padding-bottom: 10px;
		padding-left: 40px;
		padding-right: 40px;
	}
	
	body.resultat .bleu, body.resultat .rouge {
		display: none;
	}
	
	body.jeu .cartes .carte:first-child img {
		margin-top: -10px;
	}
	
	body.jeu .cartes .carte:not(:first-child) img {
		margin-top: -70px;
	}
	
	body.jeu .cartes .carte2, body.jeu .cartes .carte3 {
		margin-left: 0;
	}
	
	body.resultat .layout img {
		max-width: 100%;
	}
	
	.form_mentions {
		text-align: center;
		padding: 0;
	}
	
	body.resultat .texte {
		top: 30%;
		bottom: auto;
	}
	
	body.resultat .texte > div {
		max-width: 100%;
	}
	
	.fields input, .selectcontainer span.select {
		border-radius: 7px;
		font-size: 14px;
	}
	
	body.deja .back {
		margin-top: 30px;
		margin-bottom: 30px;
		padding-left: 10px;
		padding-right: 10px;
	}
	
	form .obli {
		
		padding: 0;
	}
	
	body.resultat #page {
		padding-top: 27px;
	}
	
	form .row label {
		font-size: 16px;
		padding-bottom: 5px;
	}
	
	
	.popup img {
		max-width: 250px;
	}
	
	.more {
		font-size: 12px;
		padding-top: 17px;
		padding-bottom: 100px;
	}
	
	.more .br {
		display: block;
	}
	
	body.form #page {
		margin-top: 0px;
	}
	
	body.form .bottom {
		bottom: 257px;
	}
	
	body.deja .bottom {
		display: none;
	}
	
	body.dotations #page {
		padding-top: 20px;
	}
	
	.more a.l {

		font-size: 12px;
		color: #fff;
	}
	
	.more .links {
		flex-flow: column;
	}
	
	.more .links .center {
		order: 1;
	}
	
	.more .links .left {
		order: 2;
	}
	
	.more .links .right {
		order: 3;
	}
	
	body.dotations .bleu, body.dotations .rouge {
		display: none;
	}
	
	.zone {
		margin-right: 25px;		
		justify-content: flex-start!important;
	}
	
/*
	.photo label.filebutton {
		background: url(/img/input_photo_mobile.png) no-repeat center center / 100%;
	}
	
	.file label.filebutton {
		background: url(/img/input_file_mobile.png) no-repeat center center / 100%;
	}
	*/
	
	label.filebutton {
		border: 0;
		height: 50px;
		padding: 0;
	}
	
	body.preview .titre {
		margin-bottom: 0;	
	}
	
	body.preview .cb {
		display: none;
	}
	
	label.filebutton img {
		width: 27px;
		margin-left: 20px;
	}
	
	label.filebutton .txt {
		font-size: 22px;
		justify-content: flex-start;
		text-align: center;
		padding-right: 25px;
	}
	
	label.filebutton .txt span {
		text-align: center;
		flex: 1;
	}
	
	.fields .files input {
		height: 50px;
	}
	
	form .fields {
		margin-bottom: 20px;
	}
	
	label.filebutton .txt .info {
		width: 24px;
		height: 28px;
		background-size: 100%;
		right: -30px;
		top: 7px;
	}
	
	body.dotations h1 {
		display: none;
	}
	
	#ombre {
		background: url(../img/ombre_mobile.png) repeat-x left top / contain;	
		height: 169px;
		position: absolute;
		left: 0;
		top: auto!important;
		width: 100%;
		bottom: 300px;
	}
	
	body.preview .preview {
		max-height: none;
		padding: 0 20px;
	}
	
	body.preview .preview img {
		display: block;
	}
	
	body.form #page {
		padding: 0;
	}
	
	body.jeu .rouge {
		width: 161px;
		height: 328px;
		left: 25px;
	}
	
	body.jeu .bleu {
		width: 157px;
		height: 529px;
		right: 25px;
	}
	
	body.dotations .mobile {
		display: block;
	}
	
	body.dotations .desktop {
		display: none;
	}
	
	body.termine .rouge {
		display: none;
	}
	
	body.termine #page {
		padding-left: 45px;
		padding-right: 45px;
		margin-top: 0;
		padding-top: 20px;
	}
	
	body.termine .bleu {
		margin-top: 20px;
		width: 100%;
		position: relative;
		background-position: center top;
		background-size: 174px;
		right: auto;
		top: auto;
		height: 290px;
	}
	
	body.deja .rouge, body.deja .bleu {
		display: none;
	}
}