/* ******************************* IMPORT POLICES */
@font-face {
  font-family: 'BlackBamboo';
  src: url(../fonts/BlackBamboo.woff);
  src: url(../fonts/BlackBamboo.woff) format('woff'),
	   url(../fonts/BlackBamboo.ttf) format('truetype'),
	   url(../fonts/BlackBamboo.otf) format('opentype');
}
@font-face {
  font-family: 'ITC';
  src: url(../fonts/itc-avant-garde-gothic-bold.woff);
  src: url(../fonts/itc-avant-garde-gothic-bold.woff) format('woff'),
	   url(../fonts/itc-avant-garde-gothic-bold.ttf) format('truetype'),
	   url(../fonts/itc-avant-garde-gothic-bold.otf) format('opentype');
}
:root {
	--Rouge: #e00010;
	--Jaune: #fcea0d;
	--Bleu: #0068b2;
	
	
	--Turquoise: #0ba596;
	--Violet: #682a85;
	
}




/* ******************************* */
html {font-size: 10px; height: 100%;}
body {margin: 0; font-size: 15px;line-height: 1.6; color: #000; background-color: #fff; font-family: "ITC", sans-serif; font-weight: 400; font-style: normal; height: 100%;}

.page {
	overflow: hidden; width: 100%; margin: 0 auto; position: relative; 
	/*background: url('../images/home/haut-droit-stylo.jpg') top right no-repeat, url('../images/home/haut-droit-sac.svg') top right no-repeat #fff;
	background-size: auto, 250px auto;*/
	
	/*background:url('../images/home/haut-droit-sac.svg') top right no-repeat,url('../images/home/haut-droit-stylo.jpg') top right no-repeat #fff;
	background-size: 350px auto, auto;*/
	background : #fff;
}

/*p, ul, table {font-size: 1em;margin-bottom:1em;}*/
@media (min-width: 1080px) {
	.page {width: 1080px;}
}


/* ******************************* HOMEPAGE   */
.page-home {background: url(../images/home/bg-home.jpg) center top no-repeat; background-size: 100%;}
.logo {margin: 0 auto; margin-top: 120px; background: url('../images/home/logo.svg') top right no-repeat; width: 260px; height: 200px; }
.texte { text-align: center; padding:0 10px;}
.texte .ligne1 {color: var(--Rouge); font-family: "bakerie-rough", sans-serif; line-height: 1; font-weight: 700; font-size: 55px;  margin: 0;}
.texte .ligne1-grosse {font-size: 72px; line-height: 0.8;}
.texte .ligne1-suite {color: #000; font-family: "bakerie-rough", sans-serif; line-height: 1; font-weight: 900; font-size: 25px; margin-top: 20px;}
.texte .ligne2a {color: #000; font-family: "BlackBamboo", sans-serif; font-weight: 400; font-style: normal; font-size: 37px; line-height: 50px; text-transform: uppercase; margin-top: 12px; }
.texte .ligne2 {color: #000; font-family: "BlackBamboo", sans-serif; font-weight: 400; font-style: normal; font-size: 37px; line-height: 50px; text-transform: uppercase; background:  var(--Jaune); display: inline-block; margin: 0 auto; padding: 0 15px; position: relative; }
.texte .ligne2:before {content:''; background:url('../images/home/dechire-gauche.svg'); background-size: 100%; width: 20px; height: 50px; margin-left: -18px; position: absolute; top:0; left:0; }
.texte .ligne2:after {content:''; background:url('../images/home/dechire-droite.svg'); background-size: 100%; width: 24px; height: 50px; margin-right: -21px; position: absolute; top:0; right:0; }
.texte .ligne3 {font-size: 16px; margin: 0; margin-top: 14px; padding: 0 10px; font-family: "bakerie-rough", sans-serif; line-height: 1.15; font-weight: 700; color: #6e6e6d;}
.texte .ligne-retrouvez {font-family: "ITC", sans-serif; line-height: 1.1; color: var(--Bleu); font-weight: 700; font-size: 18px; margin-top: 30px;}
.texte .ligne-retrouvez a {color: var(--Bleu); text-decoration: underline;}
.lots-zone {}
/*
.bt-home-participer {display: block; width: 200px; margin: 0 auto; margin-top: 45px; text-align: center; background-color: var(--Violet); color: #fff; padding: 5px 8px; padding-top: 10px; padding-bottom: 7px; text-decoration: none; font-size: 26px; line-height: 30px; text-transform: uppercase;}
.bt-home-participer:hover {background-color: var(--Turquoise); text-decoration: none;}*/
.bt-home-participer {color: #000; font-family: "BlackBamboo", sans-serif; font-weight: 400; font-style: normal; font-size: 37px; line-height: 50px; text-transform: uppercase; background:  var(--Jaune); display: inline-block; margin: 0 auto; padding: 0 15px; position: relative; }
.bt-home-participer:before {content:''; background:url('../images/home/dechire-gauche.svg'); background-size: 100%; width: 20px; height: 50px; margin-left: -18px; position: absolute; top:0; left:0; }
.bt-home-participer:after {content:''; background:url('../images/home/dechire-droite.svg'); background-size: 100%; width: 24px; height: 50px; margin-right: -21px; position: absolute; top:0; right:0; }
.bt-home-participer:hover {text-decoration: none; background: var(--Bleu); color: #fff;}
.bt-home-participer:hover:before {content:''; background:url('../images/home/dechire-gauche-hover.svg'); background-size: 100%; }
.bt-home-participer:hover:after {content:''; background:url('../images/home/dechire-droite-hover.svg'); background-size: 100%; }

@media (min-width: 480px) {
	.logo {margin-top: 150px;  width: 310px; height: 220px; }
	.lots-zone {background: url(../images/home/lot1.jpg) center left no-repeat, url(../images/home/lot2.jpg) center right no-repeat, url(../images/home/lot-ou.svg) center center no-repeat; background-size: 42%, 37%, 80px; width: 100%; height: 200px; max-width: 620px; margin: 0 auto; margin-top: -30px; }
	.texte {padding: 0;}
	.texte .ligne1-suite {margin-top: 10px;}
}
@media (min-width: 600px) {
	.logo {margin-top: 180px; } 
}
@media (min-width: 800px) {
	.logo {margin-top: 200px; }
}

/*
@media (min-width: 992px) {
	.page-home { height: 100%;}
	
	.bt-home-participer {position: absolute; top: 700px; left: calc(50% - 100px);}
}
@media (min-width: 1200px) {
	
	.bt-home-participer {top: 760px; }
}*/




/* ******************************* PAGE INTERIEURE   */
.page-interieure {background: url(../images/home/bg-home.jpg) center top no-repeat; background-size: 100%;}
.texte-header { text-align: center; padding:0 10px; margin-top: 20px; max-width: 410px; margin-left: auto; margin-right: auto;}
.texte-header .ligne1 {color: var(--Rouge); font-family: "bakerie-rough", sans-serif; line-height: 0.65; font-weight: 700; font-size: 35px;  margin: 0;}
.texte-header .ligne1-suite {color: #000; font-family: "bakerie-rough", sans-serif; line-height: 0.7; font-weight: 900; font-size: 16px; margin-top: 10px;}
.texte-header .lots-zone-header {background: url(../images/lot1.png) top left no-repeat, url(../images/lot2.png) top right no-repeat, url(../images/home/lot-ou.svg) center center no-repeat; background-size: 47%, 42%, 40px; width: 100%; height: 130px;   margin-top: 0px;}

.lien-header-total {height: 150px; display: none;}
@media (min-width: 380px) {
	.texte-header .lots-zone-header {height: 145px;}
}
@media (min-width: 380px) {
	.texte-header {max-width: 500px;}
	.texte-header .lots-zone-header {background: url(../images/lot1.png) top left no-repeat, url(../images/lot2.png) top right no-repeat, url(../images/home/lot-ou.svg) center center no-repeat; background-size: 42%, 37%, 50px; width: 100%; height: 125px; }
}
@media (min-width: 600px) {	
	.texte-header .lots-zone-header {background: url(../images/lot1.png) top left no-repeat, url(../images/lot2.png) top right no-repeat, url(../images/home/lot-ou.svg) center center no-repeat; background-size: 42%, 37%, 50px; width: 100%; height: 110px; }
}
@media (min-width: 1080px) {
	.zone-sm {display: none;}
	.lien-header-total {display: block;}
	.page-interieure {background: url(../images/bg-interieur.jpg) top center no-repeat; background-size: 100%; height: 800px;}
}


/* ******************************* HEADER   */
.img-header-logo {margin-left: auto; margin-right: auto; margin-top: 90px; height: 100px; display: block;}
@media (min-width:480px) {
	.img-header-logo {margin-top: 120px; height: 120px; }
}
@media (min-width:680px) {
	.img-header-logo {margin-top: 130px; height: 120px; }
}
@media (min-width:800px) {
	.img-header-logo {margin-top: 165px; height: 120px; }
}
@media (min-width: 1080px) {
	.img-header-logo {display: none;}
}

/*{margin: 0 auto; display: block; max-width: calc(100% - 20px);}
@media (min-width: 400px) {
	.img-header {max-width: 360px;}
}
@media (min-width:480px) {
	.img-header {width: 600px; max-width: calc(100% - 20px);}
}
@media (min-width:768px) {
	.img-header {width: 920px; max-width: calc(100% - 20px);}
}*/



/* ******************************* CONTENU   */
.contenu {margin-top: 40px; padding-left: 15px; padding-right: 15px; /*border: solid 1px #000;*/}
h1 {color: var(--Bleu); font-family: 'BlackBamboo'; font-size: 20px; text-transform: uppercase; text-align: center;}
@media (min-width: 1080px) {
	.contenu {margin-top: 0px; padding-left: 15px; padding-right: 15px; width: 550px; margin-left: auto; margin-right: auto; min-height: 630px;}
}

/* ******************************* FORMULAIRE   */
#formInscription {padding-bottom: 15px;}
.zone-champs {max-width: 550px; margin: 0 auto; }
.zone-champs .row {margin-right: -2px; margin-left: -2px;}
.zone-champs .row .colonne {padding-left: 2px; padding-right: 2px;}
.zone-champs .colonne1 {font-weight: bold; font-size: 17px; text-transform: uppercase; padding-top: 9px; text-align: center;}
.zone-champs .champ {background: url(../images/bg-champ.svg) top center no-repeat; width: 208px; height: 40.8px; padding-left: 15px; padding-top: 7px; margin: 0 auto;}
.zone-champs .champ input {border: none; width: 180px; height: 28px; font-family: Arial; padding: 1px 4px;}
.zone-champs .joindre {margin-top: 35px; font-size: 12px; text-align: center;}
.zone-champs .joindre-txt {margin-bottom: 5px;}
.zone-champs .formats {margin-top: 6px;}
.zone-champs p {margin: 0;}
.zone-champs .joindre p {line-height: 18px;}
.zone-champs .obli {font-size: 11px; margin-top: 10px; text-align: center;}

/* On cache l'input 😢 */
.zone-champs input[type=file] {display: none;}
/* On créé un bouton en ciblant un élément dans la balise label */
.zone-champs label span.intitule-button {padding: 4px 12px; background: var(--Bleu); color: #fff; cursor: pointer; font-size: 20px;}
.zone-champs label span.intitule-button:hover { background: var(--Rouge);}
.zone-champs .bt-invisible {border: none; font-size: 1px; height:1px; width:1px; background: none;}
.zone-champs .bouton {margin-top: 35px;}
.zone-champs .bt-valider {display: block; width: 220px; margin: 0 auto; background: url(../images/bt-je-decouvre.svg) top center no-repeat; background-size: 100%; height: 90px;}
.zone-champs .bt-valider:hover {background: url(../images/bt-je-decouvre-hover.svg) top center no-repeat; background-size: 100%;}
/*.zone-champs .bt-valider {display: block; width: 220px; margin: 0 auto; text-align: center; color: var(--Violet); text-decoration: none; font-size: 26px; line-height: 32px;}
.zone-champs .bt-valider span {display: block; color: #FFF; background-color: var(--Violet); padding: 1px 12px; padding-top: 8px; padding-bottom: 6px; text-transform: uppercase; font-size: 28px; margin-bottom: 6px;}
.zone-champs .bt-valider:hover {color: var(--Turquoise);}
.zone-champs .bt-valider:hover span {background-color: var(--Turquoise);}*/

.zone-champs #attente-formulaire {text-align: center; display: none; padding: 15px 0;}

@media (min-width:768px) {
	#formInscription {}
	.zone-champs .colonne1 { text-align: right;}
	.zone-champs .champ {margin-left: 0;}
	.zone-champs .obli {text-align: left; margin-left: 75px;}
}
@media (min-width:992px) {
	
	.zone-champs .joindre {margin-top: 35px;}
	.zone-champs .bouton {margin-top: 40px;}
}
@media (min-width:1080px) {
	.page-formulaire.page-interieure {background: url(../images/bg-interieur2.jpg) center top no-repeat; background-size: 100%;}
	.page-formulaire h1 {margin-top: 0px; margin-bottom: 13px!important;}
	.zone-champs .obli {margin-top: 3px;}
	.zone-champs .joindre {margin-top: 10px;}
	.zone-champs .joindre-txt {margin-bottom: 2px;}
	.zone-champs .formats {margin-top: 3px;}
	.zone-champs .bouton {margin-top: 15px;}
}

/* ******************************* RESULTAT   */
.page-resultat .image-resultat {margin: 0 auto; max-width: 600px; width: 100%;}
.page-resultat .info {text-align: center; font-size: 13px; margin: 0 auto; max-width: 700px; margin-top: 40px; margin-bottom: 40px;}
.page-resultat .perdu {text-align: center; font-size: 18px; margin: 0 auto; max-width: 700px; margin-top: 40px; margin-bottom: 70px; color: var(--Bleu);}
.page-resultat .perdu a {display: block; width: 270px; margin: 0 auto; margin-top: 5px; text-align: center; background-color: var(--Bleu); color: #fff; padding: 5px 8px; padding-top: 10px; padding-bottom: 7px; text-decoration: none; font-size: 26px; line-height: 30px; text-transform: uppercase;}
.page-resultat .perdu a:hover {background-color: var(--Rouge); text-decoration: none;}
.page-resultat .resultat-txt .txt2 {color: #000; font-family: "bakerie-rough", sans-serif; color: var(--Rouge); font-weight: 700; font-style: normal; font-size: 40px; line-height: 50px; margin-top: 2px; }
.page-resultat .resultat-txt .txt1 {color: #000; font-family: "BlackBamboo", sans-serif; font-weight: 400; font-style: normal; font-size: 37px; line-height: 50px; text-transform: uppercase; background:  var(--Rouge); color: #fff; display: inline-block; margin: 0 auto; padding: 0 15px; position: relative; }
.page-resultat .resultat-txt .txt1:before {content:''; background:url('../images/home/dechire-gauche-rouge.svg'); background-size: 100%; width: 20px; height: 50px; margin-left: -18px; position: absolute; top:0; left:0; }
.page-resultat .resultat-txt .txt1:after {content:''; background:url('../images/home/dechire-droite-rouge.svg'); background-size: 100%; width: 24px; height: 50px; margin-right: -21px; position: absolute; top:0; right:0; }
.page-resultat .gain-0 .resultat-txt {padding-top: 100px;}
.page-resultat .gain-1 .info .txt-bleu {color: var(--Bleu); }
@media (min-width:1080px) {
	.page-resultat .gain-0 .resultat-txt {padding-top: 170px;}
	.page-resultat .gain-2 .resultat-txt {padding-top: 100px;}
	.page-resultat .gain-1 .resultat-txt {padding-top: 20px;}
	.page-resultat .info {max-width: 400px;}
	.page-resultat .gain-1 .info {margin-top: 5px;}
	.page-resultat .gain-1 .info .petit {font-size: 0.85em; margin-left: auto; margin-right: auto; max-width: 320px;}
	.page-resultat .gain-1 .info .txt-bleu {margin-top: 8px; }
}


/* ******************************* REGLEMENT   */
.reglement {margin: 0 auto; max-width: 900px; text-align: justify; margin-bottom: 40px;}
.reglement h1 {font-size: 30px;  }
.reglement h2 {margin-top: 35px; color: var(--Rouge);}
.bt-retour {display: block; width: 200px; margin: 0 auto; text-align: center; background-color: var(--Bleu); color: #fff; padding: 5px 8px; padding-top: 14px; padding-bottom: 8px; text-decoration: none; font-size: 26px; line-height: 30px; text-transform: uppercase;}
.bt-retour:hover {background-color: var(--Rouge); text-decoration: none;}
@media (min-width:1080px) {
	.reglement {margin: 0 auto; width: 430px; height: 490px; overflow: auto; margin-bottom: 110px;}
}


/* ******************************* FOOTER   */
footer {text-align: center;/* padding-top: 40px; padding-bottom: 15px;*/}
.page-home footer {padding-top: 40px; padding-bottom: 0;}
footer a {text-transform: uppercase; font-family: "ITC"; color: var(--Bleu); font-size: 11px; margin: 0 10px; text-decoration: none;}
footer a:hover {text-decoration: underline;}
@media (min-width: 992px) {
	/*footer {position: absolute; bottom:0; width: 100%; height: 35px; text-align: center; padding-top:0;}*/
	footer a.lien-reglement {margin-right: 20px; margin-left: 50px; }
	footer a.lien-contact {margin-left: 70px; margin-right: 0;}
}
@media (min-width: 1200px) {
	footer a.lien-reglement {margin-right: 70px; margin-left: 0px; }
	footer a.lien-contact {margin-left: 0px; margin-right: 0;}
}




/* ******************************* POPUP   */
.popup .cadre {padding:0px; /*box-shadow: 3px 3px 4px #000; */background: #fff; border: solid 5px var(--Bleu); border-radius: 25px; text-transform: uppercase; color: #000;}
.popup .cadre .filet {/*border: solid 4px #e5370d;*/ padding: 8px;}
.popup .cadre .filet .zone-fermer {width: 100%; overflow: hidden; margin-bottom: 20px;}
.popup .cadre .filet .zone-fermer img {width: 17px; height: 17px; float: right; display: block;}
.popup .cadre .filet .zone-contenu {padding: 0 12px; padding-top: 40px; text-align: center; font-size: 24px; line-height: 1.4; font-weight: 400;}
.popup .cadre .filet .zone-contenu.reduit {padding-top: 0; }
.popup .cadre .filet .zone-contenu .rouge {color: #2d3cff;}
@media (min-width:420px) {
	.popup { padding:5px;  }
	.popup .cadre .filet {padding: 18px;}
	.popup .cadre .filet .zone-fermer img {width: 34px; height: 34px; }
}